GitHub Pages와 Jekyll로 블로그 이전하기

 

어렸을 때부터 지금까지 블로그를 다양한 곳에서 운영했었다. 처음에는 네이버에서, 이후에는 http://zetablog.tistory.com의 티스토리 블로그로 다양한 글을 연재했다. 물론 지금도 대부분의 글은 티스토리에 남아있고, 틈틈히 하나씩 여기로 이전할 생각이다. 이전에 Moon 테마(GitHub 저장소: https://github.com/TaylanTatli/Moon, 블로그 적용 예시: https://taylantatli.github.io/Moon/)를 사용한 Jekyll 블로그를 방치해두다가, 이번에 새로 블로그를 시작하려고 Chalk 테마(GitHub 저장소: https://github.com/nielsenramon/chalk, 블로그 적용 예시: http://chalk.nielsenramon.com)를 사용해보기로 했다. 그 과정에 있었던 삽질을 여기에 기록하도록 한다.

사실, GitHub Pages로 블로그를 시작하는 것이 그리 어려운 작업은 아니지만, 내가 사용하기로 한 Chalk 테마는 GitHub Pages에서 공식으로 지원하지 않는 패키지를 사용해 이런 부가적인 과정이 필요하다고 한다. Chalk 테마를 사용하시려는 방문객이시라면 이 포스트가 부디 도움이 되길 바란다.

GitHub 저장소 설정

GitHub Pages로 블로그를 만들기 위해서는 블로그를 만들 저장소를 만들어야 한다. 일반적으로는 계정명.github.io(내 경우 Zeta611.github.io)로 만들면 되는데, 나는 블로그 URL인 zetablog.ml로 저장소를 만들고 싶었다. 또한, 전자의 경우에는 블로그를 master branch에서만 만들 수 있다. 우리가 사용한 Chalk 테마는 master branch에 직접 블로그를 올릴 수 없기 때문에, 일이 복잡해진다. Chalk 테마의 경우, local에서 특정 branch(나의 경우 master branch)에서 블로그를 만든 후, 해당 경로에서

npm run publish

를 실행하면 자동으로 gh-pages branch를 만들어 블로그를 만든 후 다시 원래 branch로 checkout한다. 이 때, remote의 origin/gh-pages로 직접 push까지 해준다. 즉, 우리가 만들 Chalk 테마는 origin/gh-pages로 블로그를 만들어주기 때문에, origin/master의 내용만을 블로그로 만들 수 있는 계정명.github.io로 저장소 이름을 설정하면 번거로울 수 있는 것이다. 저장소를 다른 이름으로 설정한다면 gh-pages를 포함해 원하는 branch에서 블로그를 publish할 수 있다. GitHub 저장소의 Settings tab으로 가면 아래의 GitHub Pages 설정을 볼 수 있는데, 여기의 Source에서 gh-pages branch를 선택하면 된다. 계정명.github.io의 경우에는 master branch밖에 선택이 불가하다.

Figure 1

사실 https://github.com/nielsenramon/chalk에서 시키는대로 하면 다 된다! 그런데 이 테마에서는 기본적으로 \(\LaTeX\) 지원이 되지를 않아, 이를 설정해주기 위해…

LaTeX 수식 입력 지원하기

시행착오 1

여러 시행착오를 겪게 되었다. 해결법만이 필요하시다면, 바로 시행착오 2로 건너뛰시길 바란다. (만약 jekyll-latex을 사용하고 싶으시다면, 아래에 필자가 겪은 내용을 참고하셔도 좋다. 하지만 필자는 실패하였으니 혹시 해결법을 아신다면 댓글로 해결하신 방법을 부탁한다.)

모든 포스트의 확장자를 markdown(.md)에서 \(\LaTeX\)(.tex)으로 바꾼 후

gem install jekyll-latex

으로 jekyll-latex를 설치하고, Gemfile에도 추가하였는데 블로그에 변함이 없다. 이후 _config.yml에도 추가해봤지만, 여전히 변함이 없다. 이후 만지작거리다가 Dependency Error가 생겨, Google에 검색을 하니 https://stackoverflow.com/questions/35401566/dont-have-jekyll-paginate-or-one-of-its-dependencies-installed의 내용을 발견했다. 나도 마찬가지로 두 버전의 jekyll이 설치돼 있어서 최신 버전만 남겨 두었다. 그 과정에서 오타가 생겼는지,

[!] There was an error parsing `Gemfile`: Undefined local variable or method `wsource' for Gemfile. Bundler cannot continue.

 #  from /Users/jay/zetablog.ml/Gemfile:1
 #  -------------------------------------------
 >  wsource "https://rubygems.org"
 #
 #  -------------------------------------------

의 error가 생겨 다시 Gemfile을 수정하였다. 처음에는 wsource가 원래 명령어인줄로 알고

gem update --system

를 해보기도 했다. 그런데 저 error를 고치고 나니 새로운 error가 생긴다. 산 넘어 산이다.

Bundler could not find compatible versions for gem "kramdown":
  In snapshot (Gemfile.lock):
    kramdown (= 1.17.0)

  In Gemfile:
    jekyll was resolved to 3.8.3, which depends on
      kramdown (~> 1.14)

    jekyll-latex was resolved to 1.0.0, which depends on
      polytexnic (~> 1.5) was resolved to 1.5.6, which depends on
        kramdown (~> 1.14.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
npm ERR! code ELIFECYCLE
npm ERR! errno 6
npm ERR! chalk@ publish: `bin/deploy`
npm ERR! Exit status 6
npm ERR!
npm ERR! Failed at the chalk@ publish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

시키는대로 bundle update를 해본 후, npm run publish를 하지만 블로그는 그대로이다. 앗차, bundle을 다시 안했다. 그러고 나니, \(\LaTeX\) 원문 그대로 블로그에 올라간다. 그래서 Gemfile이랑 _config.yml의 jekyll-latex을 지웠다. 아래의 시행착오 2를 시도한다.

시행착오 2

https://helloworldpark.github.io/jekyll/update/2016/12/18/Github-and-Latex.html를 참고하였다.

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

를 _layouts/post.html의 <article> 태그 다음에 넣어주었다. 다시

npm run publish

을 하니 error message는 뜨지 않는다. 이렇게 문제가 바로 해결되는가 싶더니… 해결되었다! 결국 답은 가까운 MathJax에 있었다.

CNAME으로 Custom Domain 지정하기

그런데, 매번 블로그의 custom domain이 재설정되는 문제가 있었다. 위의 시행착오를 시도할 때마다 매번 GitHub 저장소의 Settings tab에 가서 custom domain을 zetablog.ml로 설정하는 것은 여간 귀찮은 일이 아니었다. 나아가 새로운 포스트를 옮길 때마다 이 작업을 반복하는 것은 말도 안되는 고역이지 않는가.

간단한 Googling을 통해 https://github.community/t5/GitHub-Pages/Github-forgets-about-my-custom-domain-every-time-I-update-the/td-p/470를 찾았다.

npm run publish

을 할 때마다 매번 CNAME이 덮어씌워진다는 것 같다. 잘 모르겠는데, 일단 _config.yml의 URL에 zetablog.ml을 추가해본다. 역시나 문제는 그대로다.

master branch의 root directory의 CNAME이 빈 file인데, 여기에 zetablog.ml을 추가하니, 문제가 해결되었다.

마지막으로

마지막으로, tag별로 모아보는 기능이 작동되지 않아 _my_tags의 markdown file들의 제목과 내용을 모두 tag 이름으로 바꿔서 넣어주면 된다. Tag당 markdown file 하나다.

Disqus 댓글 지원은 https://xho95.github.io/blog/jekyll/disqus/migration/2017/01/20/Add-Disqus-to-Jekyll.html을 참고했다.