[Github] Github blog 생성하기

1. Ruby 설치

2. 로컬 저장소 폴더 생성

3. Jekyll & Bundler 설치

4. 테마 다운로드

5. chirpy 초기화

6. chirpy 파일 수정

7. Github repository 생성

8. 로컬 서버 실행

9. 파일 정리

10. 배포

---

제가 생성한 github page입니다.

계속 아래와 같은 "index.html" 이 출력되서 5-6번 다시 만들었습니다ㅠㅠ 

---layout: home # Index page ---

이것 저것 수정하다가 안되겠다 싶어서 repository 삭제하고 다시 만들기를 반복했네요.

 

힘들었지만 정상 작동해서 속시원!~

개비스콘

자 이제 제가 재재재재재구현한 과정을 설명하겠습니다~

 

 

1. Ruby 설치

Ruby 언어로 만들어진 Jekyll을 사용하기위해 Ruby를 설치합니다.

 

WITH DEVKIT에서 최신 버전의 Ruby 설치 파일을 다운로드합니다.

Downloads

설치 완료!

 

 

 

2. 로컬 저장소 폴더 생성

위치하고 싶은 경로에 ..\[user name].github.io 폴더를 생성합니다.

 

 

3. Jekyll & Bundler 설치

 

서버 구동을 위한 설치입니다.

Bundler는 루비 프로젝트에 필요한 gem들의 올바른 버전을 추적하고 설치해서 일관된 환경을 제공하는 도구입니다.

git bash를 실행하고 ..\[user name].github.io 디렉토리로 이동하여 명령어를 입력합니다.

$ jekyll new ./        // jekyll 초기화
$ gem install jekyll bundler
$ bundle install

 

 

4. 테마 다운로드

먼저 적용시킬 테마를 선택하고 파일을 다운로드합니다.

http://jekyllthemes.org/

Jekyll Themes

github page를 만들때 개인이 만들기 유용한 템플릿들이 있는 사이트입니다.

Jekyll는 정적 사이트 생성기이고, Github의 공동 설립자 톰 프레스턴 위너에 의해 ruby언어로 개발된 오픈소스입니다.

그렇기에 github는 jekyll와 호환성이 좋아 널리 사용되는것 같습니다. 

 

저는 Chirpy theme를 적용시키도록 하겠습니다.

테마마다 소스가 다르니 구성이 다를 수 있습니다.

 

저는 Homepage가서 소스 파일을 다운로드 하겠습니다.

Chirpy hithub > code > download ZIP 

Zip파일을 다운로드하고 압축 해제를 합니다.

 

5. chirpy 초기화

압축 해제한 폴더 경로에서 초기화를 위해 아래 명령어를 입력합니다. (git bash)

$ bash tools.init.sh

chirpy의 ".github" 폴더안의 파일들을 초기화 시키기 위해 명령어를 실행합니다.

".github" 폴더에는 workflow도 같이 있는데 repository에 배포할 경우 나의 workflows에 cd, ci가 적용됩니다.

초기화를 하게 되면 "pages-deploy.yml" 파일만 남게 됩니다.

 

 

6. chirpy 파일 수정

 

 (1) chirpy 파일 이동

 ..\[user name].github.io 폴더에 압축 해제 후 초기화한 파일들을 붙여넣습니다.

중복되는 파일은 덮어쓰기하면 됩니다. (README.md 파일만 중복됩니다.)

 

(2) pages-deploy.yml 수정

github repository로 push할 때 사용되는 branches를 설정하는 내용이 있는 파일입니다.

main, master가 설정되어 있는데, 자신이 설정해 놓은 branch name으로 수정하면 됩니다.

저는 "main" branch를 사용하고 있어 main남기고 master는 삭제했습니다.

 

(3) _Config.yml 수정

 

이제 github에 보내기 전, static 정보들을 수정합니다.

_Config.yml 수정

항목	값	설명
lang	en	언어 설정
timezone	Asia/Seoul	서울 표준시로 설정
title	사용자 지정	블로그 제목
tagline	사용자 지정	부연 설명
description	사용자 지정	SEO를 위한 키워드들을 입력 사용자들을 내 블로그로 유입시키기 위한 검색 키워드 지정(구글)
url	https://codenee.github.io/	블로그 url 입력
github	github id	본인의 github 아이디를 입력
twitter.username	twitter id	트위터를 사용한다면 아이디 입력
social.name	이름	포스트 등에 표시할 나의 이름을 입력
social.email	이메일	나의 이메일 계정 입력
social.links	소셜 링크들	트위터, 페이스등 내가 사용하고 있는 소셜 서비스의 나의 홈 url 입력
theme_mode	light or dark	원하는 테마 스킨 선택
avatar	이미지 경로	블로그 왼쪽 상단에 표시될 나의 아바타 이미지 설정
toc	true	포스팅된 글의 오른쪽에 목차 표시
paginate	10	한 목록에 몇개의 글을 표시해 줄 것인지 선택

chirpy 테마를 커스터마이징하는 내용은 아래 포스팅을 참고해 주세요~

 

 

 

7. Github repository 생성

    (1) repository생성

        저장소 이름은 " [gitname].github.io " 로 지정합니다.

         통상 git name으로 지정한다고 합니다.

       "Add a README file"도 선택합니다.

 

  (2) repository 주소 복사

git repository 가 생성되면 code > HTTPS 주소를 복사합니다.

 

 (3) 로컬 저장소와 Github repository 원격 연결

..\[user name].github.io 디렉토리 경로에서 아래 명령어를 실행합니다.

$ git clone [git repository 주소]

..\[user name].github.io\ 폴더안에 ..\[user name].github.io 폴더가 하나더 생성 된 것을 확인 할 수 있습니다.

(원래는 이렇게 안하고 clone을 먼저해서 ..\[user name],github.io 폴더를 생성시키는 것이 정석이지만 페이지에서 css등 파일들이 제대로 동작이 안되서 되는 방법을 찾아 알려드리는 겁니다.)

위의 사진처럼 ..\[user name].github.io\[user name].github.io\ 가 생성된 것을 확인할 수 있습니다.

 

(4) 파일 이동

..\[user name].github.io\[user name].github.io\ 폴더안에 있는 ".git", "README.md" 두개의 파일을 상위 폴더로 이동시킵니다. 

이동시키게 되면 github repository와 로컬 저장소가 상위 폴더와 연결되는 것입니다.

 

파일을 모두 이동시켰다면, 해당 폴더는 삭제합니다.

 

..\[user name].github.io\ 폴더에 ".git" 파일을 확인 할 수 있습니다.

 

 

8. 로컬 서버 실행

로컬에서  jekyll을 실행해서 수정된 내용이 반영되는지 확인하겠습니다.

$ bundle exec jekyll serve

위 명령어를 입력하면  ... Server address: http://127.0.0.1:4000/  내용이 나옵니다.

브라우저 주소에 http://127.0.0.1:4000 를 입력하여 화면이 정상 작동하는지 확인합니다.

 

9. 파일 정리

github에 올리기 전, 제외시킬 파일들을 정리합니다.

 

(1) .gitignore 수정

.gitignore 파일에 아래 내용을 추가합니다.

Gemfile.lock

이 파일이 git에 올라가면 빌드/배포가 에러 나는 경우가 많다고 하여 올라가지 않도록 수정합니다.

 

(2) _posts 폴더 안에 있는 파일 삭제

md형식의 게시물 파일입니다. 테스트 파일임으로 삭제합니다.

 

 

 

10. 배포

$ git add -A

$ git commit -m "message"

$ git push

 

 

이제 초기 설정 부터 배포까지 완료 되었습니다~

 

블로그를 확인합니다.

정상 작동!!

 

---

문제

Chirpy 테마 적용에 관한 글들을 많이 참고하였는데, 설정이 달랐습니다. (최근 업데이트된거 같습니다.) 

 

1. 예전에 포스팅된 블로그들은 master branch로 사용중

    but, 나는 main branch 생성되어 사용중

  ( Github의 default branch가 master→main 으로 이름이 바뀌어서 그런거 같습니다.)

 

2. Chirpy theme를 처음 배포할 때에 mater branch를 사용하면 gh-pages라는 branch가 자동 생성된다.

    관련 세팅이 Chirpy theme에 모두 들어있다.

    but, 초기에 master로 branch 명명하고 배포했지만 gh-pages 이름의 branch 자동 생성 안됨.

          index.html만 계속 화면 출력됨 (환장)

 

문제 해결

여러번 조금씩 다르게 해서 페이지 생성을 해보니 문제를 해결할 수 있었습니다.

1. 사용할 bracn를 pages-deploy.yml 파일에서 지정. 이외의 branch는 삭제

    (관련 글 이동)

    

2. (1) Chirpy의 ".github" 파일 초기화 작업   (관련 글 이동)

    (2) Jekyll 초기화 작업   (관련 글 이동)

    둘다 초기화 작업을 먼저 한 뒤, 로컬 저장소에 원격지 설정을 해야합니다.

   

  Chirpy를 초기화하는 이유는 빌드가 가능한 상태로 만들어야 하기 때문입니다.

  다운받은 zip파일은 개발자가 본인에 맞게 작성해 놓은 코드라 github에서 빌드가 안된다고 합니다.

  Readme.md에도 초기화해서 사용하라고 합니다.

 

여러 삽질을 통해 두가지 문제라는 것을 추리게 되었습니다. 

 

설정하고자 하는 테마 및 환경마다 적용되는 사항이 다를 수 있습니다~