예전부터 블로그를 해보고 싶었다. 취준이 끝난 후 여유가 생겨서 블로그를 시작했다. 여러 옵션 중 나는 깃헙을 선택했다. 이유는 단 하나, 개발자 간지가 나기 때문이다. 조금 찾아보니 깃헙에서는 jekyll이라는 것을 사용해 블로그를 빌드한다고 한다. 사용법도 간단하고 다른 유저들이 만들어놓은 커스텀 테마도 많다고 한다. 오 그럼 금방 만들겠네? Oh my zsh처럼 깔으라는 거 깔고 설정 한줄만 바꿔주면 테마 적용되는 거겠지? 하고 생각했다. 그리고 구글링을 해서 찾은 블로그에서 하라는 대로 따라하기 시작했다.
그런데 생각보다 쉽지 않았다. 단순히 테마만 적용하는 건 어렵지 않은 것 같았는데, 로컬 테스트 환경을 갖추는 것이랑 레이아웃을 아주 약간 수정하는 것이 생각보다 오래 걸렸다. 몇 시간이 지난 뒤에야 내가 원하는 모든 것을 갖춘 블로그를 만들 수 있었다. 이건 단순히 코드를 따라 치면 되는 일이 아니었다. 내가 다루는 도구를 제대로 알아야 하는 일이었다.
이 글과 이어지는 몇 개의 글에서는 내가 깃헙 블로그를 만들며 공부했던 것들에 대해 쓰려고 한다. 특히 나는 원래 파이썬과 django에만 익숙했기 때문에, django 개발자의 관점에서 jekyll을 어떻게 이해했는지 설명할 것이다. 아주 기초적인 내용들, 예를 들어 {사용자 ID}.github.io로 레포지토리를 생성해야 된다는 내용 같은 것은 다루지 않을 것이다. 중요한 것은 Jekyll이 무엇이고 어떻게 동작하는지이다.
Jekyll이란?
먼저 루비, gem, bundler에 대해 짚고 넘어가보자. 잘 알려저 있겠지만 루비는 jekyll의 기반이 되는 프로그래밍 언어이다. 그리고 gem은 루비의 패키지 매니저로, 파이썬의 pip와 비슷한 역할을 한다. 또한 gem으로 설치할 수 있는 루비 패키지를 gem이라고 하기도 한다. 마지막으로 bundler는 루비 프로젝트의 의존성을 관리해주는 gem이다. 파이썬에서 가상환경을 통해 의존성을 관리하는 것과 비슷하다. 이 세 도구는 jekyll 블로그를 빌드하는 데 반드시 필요하다.
Jekyll은 gem의 일종으로, 정적 사이트를 쉽게 빌드할 수 있게 도와준다. Jekyll을 설치하고 미리 준비된 명령어들을 입력하면 jekyll 프로젝트를 만들 수 있다. 프로젝트 안에서 각 파일들이 올바른 위치에 올바른 이름으로 올바른 내용을 담고 있다면, 나머지는 jekyll이 다 알아서 해준다. 이렇듯 정해진 파일 구조를 요구한다는 점에서는 django와 유사한 점이 있다. 다만 django를 하기 위해선 파이썬을 알아야 하지만, jekyll을 하기 위해서 루비를 알 필요는 없다 (그래도 liquid랑 html, css, js는 알아두어야 편하다).
Jekyll의 파일 구조
만약 루비가 설치되어 있다면 아래 명령어를 통해 bundler와 jekyll을 설치할 수 있다. 이미 두 gem이 설치되어 있다면 다시 명령어를 입력할 필요는 없다.
gem install bundler jekyll
설치가 되었다면 새로운 jekyll 프로젝트를 만들자.
jekyll new test-blog
저 test-blog 자리에 뭐가 들어가도 상관없다. 그냥 프로젝트 이름이 들어가는 자리이다. 이제 생성된 프로젝트에 어떤 파일들이 있는지 살펴보자.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts/
├── about.markdown
├── index.markdown
└── vendor/
각 파일 및 디렉토리의 역할은 다음과 같다.
404.html: 이름이 암시하듯 404 페이지의 html이다.Gemfile: gem 의존성을 정의하는 파일이다. 파이썬의requirements.txt와 비슷해 보이지만,Gemfile은 의존성 관리를 위해 작성이 강제된다는 점에서 다르다.Gemfile.lock: bundler가 이 머신에 설치한 gem들을 기록하는 파일이다. 우리가 건드릴 필요 없다._config.yml: 프로젝트의 설정을 정의하는 파일이다. 저자, 설명, permalink 형식, 폰트 등을 정의할 수 있다._posts/: 블로그 문서들이 담길 디렉토리이다.about.markdown: About 페이지의 마크다운 파일이다. 당연히 블로그에 about 페이지가 없으면 아무 의미 없는 파일이 된다.index.markdown: 일반적으로 블로그에 들어갔을 때 처음 마주하는 페이지의 마크다운 파일이다.vendor/: bundler가 gem을 설치하는 디렉토리이다. 우리가 건드릴 필요 없다.
이 밖에도 보통의 jekyll 프로젝트는 다음 파일 및 디렉토리들도 가진다.
_includes/: Header나 footer 같이 페이지에서 지속적으로 재사용되는 html element를 담는 파일들이 있는 디렉토리이다._layouts/: 페이지 레이아웃을 정의하는 html 파일들이 있는 디렉토리이다._data/: 페이지에 사용할 데이터를 담은 파일들 (보통 yaml 파일들)이 있는 디렉토리이다._sass/: sass나 scss 파일들이 있는 디렉토리이다. sass랑 scss는 css의 확장된 버전이라고 생각하면 된다._site/: jekyll이 페이지를 서빙할 때 우리가 만든 html, scss, js 파일들을 가공하여 서빙에 실제로 쓰일 html, css, js 파일들을 만들어 저장하는 디렉토리이다. 우리가 건드릴 필요 없다.assets/: sass/scss, js, 이미지 같은 정적 파일들이 있는 디렉토리이다. sass/scss 파일의 경우 보통main.scss라는 이름의 파일 하나만 존재하며, 이 파일에서_sass/디렉토리에 있는 스타일들을 import한다.
하나의 jekyll 블로그를 만들기 위해 해야 할 것은 이 파일 구조 안에 포함된 파일들에 내용을 추가해주는 것뿐이다. 페이지 레이아웃을 html로 정의해 _includes/와 _layouts/ 디렉토리에 넣어주고, 스타일을 sass나 scss로 정의해 _sass/ 디렉토리에 넣어주고, 설정을 _config.yml에서 정의하고, 필요에 따라 js 파일을 만들고 about.md와 index.md 파일을 만들어주면 나만의 블로그가 하나 만들어진다. 인터넷에서 찾을 수 있는 jekyll 테마들 각각이 바로 이러한 규칙으로 만들어진 jekyll 프로젝트이다.