Jekyll을 이용한 깃허브 블로그 정석대로 만들기

오늘은 깃허브 블로그를 시작하려는 분들을 위해 깃허브 블로그를 정법대로 만드는 방법을 소개하려고 합니다.

사실 예전에 가장 쉽게 깃허브 블로그 만들기라는 주제로 이미 만들어진 지킬 나우를 포크 시켜서 만드는 방법을 소개했던 적이 있죠.

해당 글은 아래 링크를 참고해주시면 될 것 같고 약간의 깃허브에 대한 이해가 있고 좀 더 지킬을 이용한 깃허브 커스터마이징을 해보고 싶다 하시는 분들은 이 글을 순서대로 따라와 주시면 될 것 같습니다.

 

참고로 이 글은 쓰면서 직접 만들어본 글로 여러 시행착오와 중간중간 겪은 에러들도 포함되어있는 글입니다.

 

2023.07.14 - [IT기타/코딩 블로그 운영] - 깃허브 블로그 설치 없이 가장 쉽게 만들기

깃허브 블로그 설치 없이 가장 쉽게 만들기

깃허브 블로그를 위한 Repository 생성하기

 

먼저 깃허브 사이트로 들어가서 깃허브 블로그 사이트를 만들 Repository를 생성해줍니다.

참고로 이 글을 보는 대상을 아주 약간의 깃허브에 대한 이해도와 계정이 있다고 생각하고 깃허브 회원가입이나 로그인 등은 생략해 둘게요.

깃허브 메인화면 좌측 상단 캡처

Repository 생성은 간단하게 깃허브에 로그인해서 좌측 상단의 초록색 New 버튼을 눌러주면 됩니다.

생성 페이지로 들어가면 깃허브에서는 "계정명. github.io"로 생성하기를 권고하지만 그냥 원하는 Repository 명으로 설정해도 문제없습니다.

깃허브 Repository 생성 화면

참고로 깃허브에서 권고하는 대로 "계정명.github.io"로 사이트를 생성할 경우 블로그 도메인이  "계정명.github.io"로 생성이 되지만 다른 명칭으로 작성할 경우  "계정명.github.io/repository 명"이 되기 때문에 기본 도메인을 사용한다면 권고대로  "계정명. github.io"으로 생성해 주는 걸 추천하고 외부 도메인을 구매해서 쓰겠다 하면 대충 새로운 Repository 명을 사용해도 아무 문제없습니다.

 

저는 이미 해당 명칭으로 만들어둔 게 있어서 대충 MyGithubBlog라는 이름으로 깃허브 Repository를 생성해 주겠습니다.

폼을 작성했다면 Create repository 버튼을 눌러서 Repository 생성을 완료해 주면 됩니다.

Git Bash에서 Jekyll을 이용한 사이트 생성하기

 

이제 깃허브 Repository는 생성이 완료되었고, Git Bash를 열어줍니다. Git Bash 설치는 간단히 깃 공식 홈페이지에서 다운로드하여서 설치해 주시면 됩니다.

https://git-scm.com/

Git

Git Bash 설치가 이 글의 메인은 아니기 때문에 다들 잘 설치하셨으리라 믿고 Git Bash를 열어줄게요.

아마 열면 바로 깃허브 로그인창이 뜰 거고 로그인해주시면 됩니다.

로그인까지 하고 나면 별로 안 보고 싶은 콘솔창이 반겨주죠.

먼저 로컬에 폴더를 하나 만들어줍니다.

저는 D 드라이브에 GitHubBlog라는 폴더를 만들어줄게요.

그리고 다시 Git Bash로 돌아와서 아래와 같이 명령을 입력해서 폴더로 이동해 줍니다.

cd D:\GitHubBlog

이렇게 만든 폴더로 이동시켜 주면 Git Bash에 해당 폴더로 이동한게 보이죠.

참고로 폴더 명에 띄어쓰기가 있다거나 한글로 돼있으면 cd "폴더명"으로 들어가 주면 되는데 가능하면 폴더 명 정도는 영어로 해줍시다.

 

이제 git init 명령어로 해당 폴더를 깃으로 바꿔줍시다.

git init MyGithubBlog

git init 명령어 사용

이렇게 하면 해당 폴더에 Repository 명칭의 폴더가 생기고 우리의 Repository랑 폴더가 연결이 됩니다.

생성된 걸 확인했다면 cd 명령어로 해당 폴더로 들어가 주세요.

cd MyGithubBlog

cd 명령어로 폴더 이동

안에는 숨겨진 폴더로. git이라는 게 있는데 이건 손대지 않기로 약속합시다.

이제 mkdir 명령어로 우리의 블로그 게시물이 들어갈 폴더를 하나 만들어주고 cd 명령어로 해당 폴더로 들어가 줍니다.

mkdir docs
cd docs

docs 폴더 생성

이제 jekyll new 명령어를 이용해서 Jekyll을 이용한 github 블로그를 생성해 줄 겁니다.

명령어는 아래와 같은데 아마도 대부분 따라 하고 있는 분들은 Jekyll 커맨드를 사용할 수 없다는 에러가 나올 거예요.

jekyll new --skip-bundle

에러 문구는 "jekyll: command not found"일 텐데요. 루비와 Jekyll을 설치해 줄 차례입니다. Jekyll은 기본적으로 루비라는 언어로 작성된 프로젝트로 루비를 먼저 설치해줘야 합니다.

루비와 Jekyll 설치하기

일단 맥은 제가 아직 안 써봐서 써보고 싶고, 윈도 버전으로 설치 방법 알려드릴게요.

https://rubyinstaller.org/

RubyInstaller for Windows

이게 루비 공식 설치 사이트인데요. 여기서 다운로드를 눌러서 맨 위에 있는 devkit 포함된 루비를 다운로드하고 설치해 줍니다. 저는 64비트 윈도라 x64 버전을 설치했습니다.

윈도우에 루비 설치 화면

사실 dev kit은 필요 없을 것 같긴 한데 혹시나 엄한 데서 발목 잡히기 싫어서 한 번에 설치해 봤습니다.

설치가 완료됐다면 창을 닫고 윈도 커맨드 창을 하나 열어줍니다.(참고로 Git Bash에서 그대로 쓸려면 Git Bash를 한번 껐다가 켜줘야 합니다.)

커맨드 창이 열리면 아래 명령어로 jekyll을 설치해 줍니다.

gem install jekyll bundler

gem은 루비에서 사용하는 명령어고 jekyll 번들을 설치해 준다는 뜻이겠죠.

jekyll 설치 화면

Building native extensions라는 부분에서 시간이 좀 오래 걸리는 것 같은데 그냥 기다리면 되네요.

 

자 Jekyll 설치가 끝나면 이제 Git Bash를 껐다가 다시 켜서  에러가 났던 명령어를 다시 사용해 봅시다.

jekyll new --skip-bundle

이번엔 또 다른 장엄한 에러가 납니다...

Error: You must specify a path라고 에러가 나는데요.

아무래도 new 뒤에 폴더 명을 적어줘야 되는 것 같네요.

cd.. 명령어로 MyGithubBlog 폴더로 돌아가주시고 

jekyll new docs --skip-bundle

 

이런 식으로 명령어를 써줍시다.

Jekyll new 성공 화면

자 에러 정리가 여기까지로 끝난 것 같네요.

여기까지 되었다면 이제 docs라는 폴더가 생성되었을 거고 그 안에 뭐 여러 가지 파일이 보일 겁니다.

이 중에서 Gemfile이라고 되어있는 파일을 메모장으로 열어주면 뭐가 많이 나오는데요.

 

Happy Jekylling!이라고 되어있는 부분 밑에 gem "jekyll" 어쩌고 되어있는 부분이 있습니다.

이 줄의 맨 앞에 샵을 하나 넣어서 주석처리 해줍니다.

 

그리고 gem "github-pages", group: :jekyll_plugins 라고 되어있는 부분도 바꿔줘야 하는데요.

아래 사이트로 들어가서 깃허브 페이지에서 참조하는 깃허브 페이지 버전을 확인해 주세요.

https://pages.github.com/versions/

Dependency versions

현재는 깃허브 페이지 버전이 228이네요.

그렇다면 아래와 같이 바꿔주면 되겠네요.

gem "github-pages", "~> 228", group: :jekyll_plugins

jekyll Gemfile 수정

그렇게 상단 이미지와 같이 Gemfile을 수정하고 저장하고 닫아주면 됩니다.

그리고 아래 명령어 두 개를 Git Bash에 입력해 줍니다.

$ git checkout --orphan gh-pages
$ git rm -rf .

깃허브 페이지를 통해 퍼블리쉬할 거면 입력하라고 하는데 깃허브 블로그가 목적이니 해주는 겁니다.

 

그러고 나서 Git Bash에 아래 명령어를 입력해서 Jekyll 번들 설치를 완료해 줍시다.

bundle install

이렇게 하면 또 뭐가 많이 나올 겁니다.

이제 깃허브에 커밋을 해주겠습니다.

 

깃허브에 Jekyll 블로그 올리기

이제 블로그를 깃허브에 올리기만 하면 깃허브 블로그 생성이 완료되겠죠.

아래 명령어를 순차적으로 입력해 줍시다.

git add .
git commit -m 'Initial GitHub pages site with Jekyll'

커밋했으면 이제 푸시해 줘야죠.

git remote add origin https://github.com/계정명/REPOSITORY명.git
git push -u origin 'gh-pages'

두 개 명령어를 차례로 입력해 주는데, 첫 번째 명령어에서 계정 명과 REPOSITORY 명을 제대로 입력해 줍니다.

git remote add 명령어

이런 식으로 말이죠.

이제 잘 만들어졌는지 확인을 해봅시다.

깃허브 Page 세팅 화면

깃허브 사이트로 돌아가서 세팅의 페이지로 들어가 줍니다.

Branch를 gh-pages로 바꿔주고 root라고 되어있는 부분을 docs로 바꿔줍니다.

그리고 기다려주면 상단의 Your site is live at 어쩌고 저쩌고 된 부분이 1분으로 바뀔 겁니다.

그럼 우측의 visit 버튼을 눌러서 방문해 주면 됩니다.

깃허브 블로그 생성 에러 화면

아마 계정명.io로 생성한 분들은 이렇게 안 나오고 정상적으로 나올 것 같은데 저 같은 경우 두 번째 생성이라 뭔가 꼬인 것 같습니다.

다시 아까 docs 폴더로 돌아와서 _config.yml 파일을 열어줍니다.

중간쯤 보면 baseurl이랑 url이 있죠?

baseurl: /MyGithubBlog/ # the subpath of your site, e.g. /blog
url: https://jkandrea.github.io # the base hostname & protocol for your site, e.g. http://example.com

이렇게 계정명.github.io로 url을 바꾸고 baseurl에 /Repository 명/으로 바꿔줍니다.

그리고 git bash로 돌아와서 아래 명령어를 순차로 입력해서 push 해줍시다.

git add _config.yml
git commit -m 'Initial GitHub pages site with Jekyll'
git push -u origin 'gh-pages'

Jekyll로 생성한 Github 블로그

자 드디어 뭐가 정상적으로 작동합니다.

일단 Github에서 알려주는 대로 차근차근 진행해서 Jekyll을 이용한 블로그 생성을 완료했습니다.

근데 root 폴더가 아닌 docs 폴더에서 실행되는 등 뭔가 거슬리는 점이 좀 있는 상태인데요.

일단 참고한 깃허브 문서 사이트 링크 남기면서 좀 더 편리한 방식으로 깃허브 블로그 만드는 방법을 다시 들고 오는 게 좋을 것 같습니다.