난 10년된 워드프레스에서 Jekyll로 마이그레이션

Wordpress 를 사용한지 10년이다. 제로보드4 기반의 조그 블로깅을 시작으로 테터툴즈, 이글루스를 거쳐 워드프레스에 정착하게 된 이유는 앞의 Tool 들 보다 더 자유스러운 스킨/테마 편집과 단순 미려한 글 입력란이었다. 물론 워드프레스가 이렇게 오래간 성장할 것을 예상한건 아니었다. 기타 블로깅 툴과는 달리 코어부분을 더욱 탄탄하게 하며 플러그인과 테마들에게 높은 자유도를 준 것이 큰 장점으로 발전하지 않았나 싶다.

워드프레스의 이면

하지만 이러한 장점들을 누리기 위해서는 지불해야 하는 값이 따랐다.

설치형 블로그인 만큼 호스팅의 제약이 따른다.
설치형인 만큼 개인이 보안에 신경을 써야한다.
생각보다 플러그인 의존도가 높다.
위의 보안과 플러그인 때문에 주기적인 백업과 업데이트를 요한다.

또한 워드프레스가 꾸준한 성장과 발전을 해 나아가며 따라오는 장점과 단점이 확연히 갈렸다.

모든 유저가 성가시게 여겼던 업데이트나 보안의 자동화는 개선 되어가고 있지만 사용자 층이 넓어지고 인기를 얻다보니 스펨과 보안을 위협하는 것들이 많아졌다. 그 어느때 보다도 불안해졌다.
플러그인으로 해결해야 했던 기능들이 워드프레스 기본 기능으로 대체될 때의 호환성과 충돌을 고려해야 한다.
업데이트의 주기도 짧아서 몇개월 방치했다 돌아오면 기다리고 있는 많은 업데이트들이 테마/플러그인들의 수정이나 제작을 망설이게 한다.
전문적인 CMS 툴로 발전해가면서 점점 더 무거워지고 있다.
뿐만아니라 중요한 기능들을 담은 플러그인들이 유료화 되어가고 있다. 테마 또한 마찬가지 이다.

위의 모든것들이 개인이 단순히 블로그를 돌리기 위해서 신경 써야 하는 부분들이다. 상업적으로 사용되는 워드프레스로는 더욱이 그러하다. 순수히 글을 쓰도록 돕는 툴이 점점 글 이상으로 신경써야 할 것들이 많아지는 툴로 변화되고 있었다.

Github Pages 와의 만남

최근 몇년간 클라우드 키워드와 함께 드랍박스가 폭팔적으로 성장하면서 클라이언트 들에게 드랍박스를 이용한 무료 사이트를 구현해 주다가 또 다른 무료 서비스인 GitHub Pages 를 활용하는 법을 알게 되었다. Github Pages 서비스는 단순 html 지원 이상으로 Jekyll을 기반으로 하는 사이트를 무료로 돌릴 수 있었고 Liquid 을 사용한 테마가 가능한 블로깅이 된다는 뜻이었다.

Github Pages 서비스를 사용하여 Jekyll 블로깅이 가능하다는건 설치형 블로그를 사용하는 이들에게 제시할수 없었던 매력들을 선사했다.

보안에 신경을 꺼도된다. 단순한 static pages 만을 제공하니 매번 감행되는 패치나 업데이트가 사이트에 필요가 없다.
플러그인 의존도가 없거나 아주 적다. 기존에 사용하던 워드프레스의 기능들을 정확하게 구현하려면 플러그인을 사용할 수 있지만 없이도 왠만한 블로깅에 필요한 것들은 기본적으로 사용할 수 있다.
무료다. 생각보다 큰 장점인데 단순 매달/년 나가는 유지비 개념 이상으로 내가 더이상 호스팅이나 서비스를 이용하지 않으면 사라지게 되는 블로그가 이제는 외부의 영향 없이 반 영구적 유지 된다는 의미이다.

이 장점들을 통틀어서 표현하자면 내가 3년뒤에 찾아와 다시 글을 쓴다해도 보안/업데이트/플러그인/계정을 신경쓰지 않고 바로 이어서 글을 발행할 수 있다는 것이다. 컨텐츠를 생산해 내는 많은 블로거와 언론인들에게 이 보다 더 큰 매력이 있겠나 싶다. 이 외에도

워드프레스 만큼이나 디자인을 마음대로 주무를 수 있다. Liquid 을 사용하기에 배우기도 상당히 쉽다.
제작이 힘들다면 매력적인 테마들이 많다. http://jekyllthemes.org
단순 정적인 페이지를 출력하므로 로딩속도가 엄청나게 빠르다. 모바일에서 엄청난 위력을 발휘한다.
로딩속도 외에도 Static Page 의 매력은 개인적인 취향일 수 있지만 내가 처음 html을 배우던 1998년 처럼 순수 html 마크업만이 출력되는 사이트를 주무르는 카타르시스. 섹시하다.

내가 3년뒤에 찾아와 다시 글을 쓴다해도 보안/업데이트/플러그인/계정을 신경쓰지 않고 바로 이어서 글을 발행할 수 있다는 것이다.

Jekyll 입문

수개월이 지나고 호스팅 서비스가 끝나고서야 Github 서비스를 사용하기로 결심 했는데 미룬만큼 좋은점은 준비기간을 오래간 갖을수 있었다는 것이다. 이하의 팁들은 설치 자체를 자세히 나열하기 보다는 설치시 발생하는 실수와 직접 찾아야 했던 많은 정보들을 적으려 한다.

시작전 알아야 할 몇가지는

쉬운 입문의 서비스는 아니다. 진입장벽은 사람마다 차이가 있을 수 있지만 간단한 가입+블로깅 정도의 배움이 아니다. 개발자가 아니라면 하루나 이틀 정도의 공부가 필요하다고 본다. 개발자를 겨냥하여 쓴 글은 아니니 헛갈리는 부분은 질문과 함께 최대한 답변토록 하겠다. 배움 후에는 큰 만족을 줄꺼라 확신한다.
Github Pages 서비스를 사용하는 방법은 단순히 Jekyll 뿐만은 아니다. 이미 아시는 분들은 아시는 하루프레스와 Jekyll 의 프레임워크로 잘 알려진 문어프레스가 있다.
- 하루프레스는 Jekyll 과 컨셉은 비슷하지만 node 기반이다. 하루프레스를 통해 생성된 파일들이 Github Pages 로 deploy 되며 Jekyll은 파일들이 Github 안에서 자동으로 변환되므로 순서만 보자면 Jekyll 이 한 스탭 적은 샘이다. 2012년 개발이 멈추어져 있다.
- 문어 Octopus + Press Octopress 는 Jekyll 에 살을 붙인 프레임워크로 볼수 있다. 좀 더 쉬운 입문이 되겠지만 그만큼 불필요한 것들이 많이 딸려온다.
간단한 Github과 Git 사용법 그리고 Markdown 표기법을 알아야 한다.
- Git 명령어들을 사용하여 컴퓨터에 깔린 Jekyll 파일들을 자신의 github.com 으로 보내야 한다. Github 사이트의 사용법은 가입하며 금방 배울 수 있고 Git 은 Github 저장소로 내 보내는 명령어를 중심으로 몇가지만 배워도 블로깅에는 문제가 없을 정도로 쉽다. 워낙 유명하고 시간적으로도 많이 지나서 배울수 있는 곳이 많다. 꼭 알아야 할 기본중의 하나가 아닐까 싶다.¹
- Markdown 은 html 엘리먼트들을 직접 쓰지 않고 간단한 규칙들로 그것들을 표현할수 있게돕는 기법이다. 워낙 배움의 장벽이 낮아서 기본 html 마크업을 해본사람이면 10분이면 감을 잡을 수 있다. Markdown을 해석하는 여러 종류가 있으니 시작전에 잘 고르는것도 좋다.²
Static Page 특성상 자체내 댓글 기능을 제공할 수 없다. 다만 이를 보안해주는 Disqus 나 IntenseDebate 같은 서비스들을 활용하면 오히려 예전보다 더 좋은 댓글 시스탬을 갖출 수 있다. 디자인이 너무 일괄적이라는 것을 빼면.. 워드프레스의 댓글을 고스란히 옮길 수 있으므로 안심해도 된다. ³
이하의 설치 방법은 마이그레이션에 큰 도움이 될 local 컴퓨터에 설치해서 사용하는 방법이다. 아무 설치 없이 온라인에서 모든걸 적용 하는 방법 또한 가능하다. Git 명령어를 배우기는 담으로 미루고 바로 사이트를 시작하고 글을 쓰겠다고 한다면 곧바로 Jekyll Now 를 살펴볼 수 있다.⁴
- Github Pages는 사용해 보고 싶지만 터미널이나 명령어와는 친해지고 싶지 않을경우,
- Ruby나 Ruby Gem과 친해지기는 먼 훗날로 미루고 싶으며
- 윈도우를 사용하니 복잡한 설치과정을 거치기 싫다면 Jekyll Now 방법을 추천한다.
- (2015.1.28 수정) Jekyll, Git 을 몰라도 무료 Github Pages 즐기기 를 따라하시면 웹에서 바로 블로깅을 시작하실 수 있다.

설치

설치 방법의 큰 단계를 살펴보면 일단 git 명령어를 사용할 수 있다는 가정아래 크게는 3가지+마이그레이션 단계로 보면 편리하다.

첫번째 단계: 웹에서 실제로 보여질 공간을 만들고 유저의 컴퓨터가 그 공간과 연결이 잘 되어 있는가 확인하는 것.
두번째 단계: Jekyll 을 유저 컴퓨터에 설치하여 기본 파일들을 수정하고 그것들을 github 에 push 하는 것.
세번째 단계: 테마를 수정하고 글을 올려보는 것.
네번째 단계: 필요하다면 워드프레스에서 글을 옮겨오는 마이그레이션 migration 작업을 하는 것.

실제로 1번의 방법만 통과해도 단순 html, css, js 파일들을 손수 작업해서 올리면 인터넷에 자신만의 사이트를 무료로 돌릴 수 있다. 하지만 이 글의 목적은 블로그 글을 markdown 형식으로 적어서 github repository 에 push 하기만 하면 블로그가 스킨과 모든것을 입혀 업데이트 하도록 하는 것이다. 그러므로 나머지 두 단계가 아주 중요하다.

첫번째 단계

github 에 repository를 만들고 자신의 컴터와 연결하는 첫번째 단계는 pages.github.com 에 가면 아주 잘 설명이 되어 있는데, 주의 할 점은

User or organization site 을 선택하고 따라하되 새 repository를 만들때 repository 이름을 자신의 유저네임.github.io 라고 지어야 한다. 예를들어 ilmol.github.io 라고 지정해 놓아야 나중에 웹에서 접속시 http://ilmol.github.io 로 접속을 할 수 있다. 지시대로 잘 따라했다면 자신의 github pages 주소로 접속시 자신이 방금 만든 index.html 파일을 라이브로 볼수 있을 것이다.
Github 에 처음 가입했다면 이메일 인증을 꼭 해야한다. 이메일 인증없이 Page 를 사용할 수 없다.
단, 첫 push 후 웹에서 보이기까지는 몇분의 시간이 소요 될 수 있다.

두번째 단계

자신의 컴퓨터에 Jekyll 설치와 함께 기본 설정 파일들을 수정 한 후 github 과 연결 하는 것이다.

OS X 맥이라면 기본적으로 Ruby가 설치 되어 있으므로 상당히 쉬운 단계이다. 터미널 창에 ruby --version 명령어를 넣어서 Ruby 버전을 확인 한 후 bundler 가 설치되어 있지 않다면 gem install bundler 라고 명령 한 후 설치가 끝났다면 gem install github-pages 를 명령하여 설치하면 끝난다.
Jekyll 을 설치하는 것은 윈도우 환경에서는 공식 지원은 않지만 가능 하다. 복잡하니 링크 문서를 꼭 참고하기 바란다.
- 윈도우 버전의 Ruby를 다운로드 & 설치 하고,
- Ruby 버전에 맞는 DevKit 을 다운로드 & 설치한다.
- gem install jekyll 커멘드를 사용하여 Jekyll을 설치. Jekyll v1.4.3 버전은 설치불가하다.
- Syntax Highlighter 를 설치한다. gem install rouge
- 하지만 Jekyll 의 기본 highlighter 인 Pygments 를 설치하려면 Python 설치후 Pip을 설치, 그리고 Pygments 를 설치한다.
- Jekyll은 로컬에 서버를 가동하여 로컬에서도 라이브를 확인할 수 있다. Jekyll serve –watch 명령어 인데 이 부분을 가능케 하려면 wdm 을 설치해야한다. gem install wdm
- 윈도우에선 encoding 세팅을 잘 설정해주어야 한다.

설치를 마쳤다면 첫번째 단계에서 만들어 놓았던 유저이름.github.io 폴더에 터미널로 들어가서 Jekyll 을 실행한다.

jekyll build

여러 폴더가 기본적으로 설치 되는데 현 단계에서 확인해야 할 것들은

.gitignore 파일 - 숨겨진 파일 이므로 포든 파일이 보이도록 해야 보이는 파일이다. git 이 업데이트와 push 시에 무시하는 파일들 리스트이다. _site 와 .sass-cache 가 써져있는지 확인한다.
_config.yml 파일 - 기본 설정 파일이다.
- title: 은 사이트 제목.
- description: 사이트 설명
- baseurl: 프로젝트로 repository 이름을 다르게 해서 시험해 볼 사이트를 사용할 때에 경로를 적지만 바로 사이트를 라이브로 띄울 것이기 때문에 쓰지 않아도 된다.
- url: 기본 주소. 지금은 http://유저이름.github.io 가 되겠다. 후에 자신의 도메인을 쓴다면 도메인 주소가 들어가겠다.
- markdown: 기본세팅인 kramdown 을 유지해도 된다. ²
- permalink: 워드프레스를 쓰신다면 익숙한 주소형식이다. pretty 로 세팅하는걸 추천한다. 참고로 이곳은 permalink 주소 수정후 마지막에 .html을 붙였다. 더 자세히 수정을 원한다면 Jekyll 사이트를 꼭 둘러보길 권한다.
- yml 파일에 어떤 이름으로 값을 설정하면 global 값으로 설정되어 어디든 {{ site.정한이름 }} 으로 부르면 출력된다.⁵
css 폴더안의 main.scss 와 _sass 폴더 안의 파일들의 관계.
- sass 를 사용해 보신 분이라면 쉽게 이해하실 수 있다. 다만 css 폴더 안의 main.scss 에서 특별한 경로없이 _sass 폴더안의 파일을 부를 수 있다. 예: @import "base";
- sass 를 전혀 모른다 하더래도 괜찮다. main.scss 에 평범한 css 를 삽입해도 전혀 문제가 되지 않는다.
- sass 프리프로세서를 모른다 하더래도 한가지 시도해보면 좋은 것은 css 를 몇가지로 나눠서 _sass 폴더에 담아보길 권한다.
Jekyll 은 라이브로 테스팅 가능하도록 기능을 제공한다. 터미널에서 jekyll serve 를 실행하면 자동적으로 파일들을 _site 폴더에 변환해서 임시 서버에 돌려준다. 브라우저 주소창에 http://0.0.0.0:4000 을 치게되면 사이트가 돌아가는것을 확인 할 수 있다.

세번째 단계 - 테마및 글쓰고 올리기

테마수정은 생각보다 쉽다. 물론 세부적인 기능을 구현하려면 몇가지 Liquid 명령어를 알아야 하지만 지금은 간단한 부분만 다루겠다.

중심파일들은 _layouts 와 _includes 에 들어있다. _includes 에는 html의 특정 부분을 나눠놓은 곳이고 _layouts 에는 html 파일들을 특정 형식대로 묶어 놓은 곳이다.

default.html 이 가장 기본적인 html 이다. 그 외의 html 파일에는 — 를 위 아래로 적고 중간에 불러야 하는 파일 이름을 적으면 된다.
```
  ---

  layout: default

  ---
```
liquid 문법에서는 {{ page.comments }} Output markup, 결과물을 나타내며 {% if site.정한이름 %} 는 Tag markup 나타낸다.

글쓰기는 _posts 폴더안의 첫번째 글, welcome-to-jekyll.markdown 을 수정하며 해 보겠다.

글은 언제나 년-월-일-글제목.markdown 으로 저장한다. .md .html도 가능하다.
Front-matter 라고 부르는 글은 상단의 — 안의 내용은 메타데이터로 Jekyll에게 알려줄 글의 기본 설정부분이다.
- layout: 은 알다시피 _layouts 안의 html 형식을 불러오는 것이다. 이 부분을 활용하면 수많은 스타일의 글을 작성해 낼 수 있다.
- title: 글 제목
- date: 글 작성 날짜 시간
- 이 외에도 categories, tag, author 등을 지정해 줄 수 있으며 이 값들은 테마 제작때 사용가능하다. 예: {{ page.정한이름 }}
markdown 문법으로 글을 써보자.⁶
이미지 삽입은 쉬운 방식은 아니다. 폴더를 만들어서 그곳에 이미지를 넣고 글 안에 makrdown 문법으로 주소를 적어주어야 하는데 상당한 불편함일 수 있다. 상대경로를 적을경우 이미지가 깨진다면 경로에 / 를 앞에 적었는지 확인하자. 예: ![대체텍스트](/폴더/이미지 주소)

글을 올리는 것은 단순히 github 의 repository 로 push 하는 것이다. 물론 jekyll 은 라이브 테스팅이 가능하니 push 전에 jekyll serve 를 돌려서 확인해보자.

git add .
git commit -m "설명"
git push origin master

네번째 단계 - 워드프레스에서 마이그레이션

마이그레이션 만으로도 글 한개가 족히 넘게 나오지만 어떻게든 넣어 보겠다. 마이그레이션의 3 단계를 살펴보자.

워드프레스에서 백업 다운로드.
마이그레이션에 필요한 Ruby Gem 설치.
설치한 Gem 을 이용하여 명령어를 실행. 글과 이미지들이 자동으로 폴더안에 저장된다.

참고로 댓글의 마이그레이션은 따로 진행해야 한다. 모든 글의 마이그레이션을 마친 후에 진행해도 문제가 되지 않는다. 단, 도메인 이전 전에 댓글 마이그레이션의 첫 부분인 Disqus 가입과 댓글 연결작업은 마쳐야 한다.

워드프레스에서 백업 다운로드는 쉽다. Admin 에 접속하면 왼쪽에 Tools -> Export 를 고른후 post 나 page 를 골라서 다운로드 받으면 된다.
마이그레이션에 필요한 Ruby Gem은 jekyll-import 라는 페키지 이다. 터미널에서 불러준다.
```
 gem install jekyll-import
```
터미널에서 블로그 폴더로 가서 이하의 명령어를 돌려준다. 단, 마지막 부분에 백업한 파일 경로와 이름이 동일한지 확인해야한다. 길지만 한줄의 명령어이다.
```
 ruby -rubygems -e 'require "jekyll-import"; JekyllImport::Importers::WordpressDotCom.run({ "source" => "wordpress.2015-01-25.xml" })'
```

제대로 돌아간다면 각 글들과 이미지를 블로그 폴더안에 삽입할 것이다. 혹시나 에러가 난다면 첫번째 단계인 워드프레스에서의 백업시 post 와 page 를 나누어서 백업 받은 후 명령어를 돌려보기를 권한다.

엑스트라 댓글 Comment 마이그레이션

댓글 마이그레이션은 가장 많이 쓰이는 Disqus 를 선택하여 진행 하였다. 위에서 언급 하였지만 댓글 마이그레이션은 기존에 사용하고 있는 주소, 도메인 이전 전에 진행되어야 한다.

Disqus 에 가입한다.
Disqus 의 형식을 따라 워드프레스 블로그를 지정해준다.
워드프레스에 Disqus 플러그인을 설치한다.
설치 후 Comments 메뉴 안의 Disqus 를 선택하여 로그인 한다.
로그인 시 댓글은 Disqus 로 바뀌었지만 기존의 댓글은 아직 적용이 안되어 있다.
Disqus 사이트로 돌아와서 Admin -> Discussions -> Import -> Wordpress 에서 이전에 워드프레스 글을 export 했던 파일을 올린다.
모든 업로드와 변환이 자동으로 마치면 Disqus 에서 알려준다.
optional (도메인을 이전한다.) 이하는 블로그 도메인을 github으로 이전한 후에 작업하는 순서이다.
Disqus 에서 각 글의 주소를 변경하는 방법이 몇가지가 있다.
- Discussions 클릭시 나오는 각각의 댓글 주소를 직접 수정하는 방법
- Discussion -> Edit 클릭 후 나오는 Domain Migration Wizard 클릭
- 혹은 Upload a URL map 을 선택하여 파일을 직접 수정해주는 방법.

Jekyll 에 Disqus 를 적용한다. _layouts 를 열어 post.html 에 삽입한다.

{% if page.comments %}
<section id="comments" role="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
//var disqus_developer = 1; // github 에 올리기 전 확인하고 싶다면 //를 지우고 명령어로 수정
var disqus_shortname = 'disqus 유저아이디'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
{% endif %}

그리고 각 글을 발행 할 시에 Front-Matter 에 comment: true 를 첨부한다.

Jekyll 을 사용해야 하는가

Jekyll 입문에서 언급했듯이 이 작업은 평범한 블로거에게는 벅찬 과정일수 있다. 하지만 워드프레스를 직접 설치하고 이용하는 사용자라면 충분히 하루 이틀이면 Jekyll 사용에 적응할수 있으리라 생각한다. 그만큼의 가치를 하는 것인가 묻는다면 난 충분하다고 생각한다. 그리고 마이그레이션을 단행했던 많은 유저들도 그러하다.⁷ 단 개개인의 필요와 역량및 우선순위가 다르니 사전에 충분한 검색 후에 마이그래이션 작업에 들어가기 바란다. 마이그레이션이 아니라면 모든 작업을 온라인에서 클릭과 타이핑 몇번으로도 가능하다.⁴

Jekyll 로 넘어오며 ilmol.com은 javascript 조차도 없는 html, css 로 사이트를 유지하겠다고 생각했다.⁸ 순수하게 찍혀 나오는 사이트가 좋기도 하지만 이 긴 글도 느린 컴퓨터에서, 구형 스마트폰에서도 빠르게 로딩이 되는 사실 자체가 좋다. 메뉴는 css 선택자를 이용해서 슬라이드 하도록 구현해 놓았고 google analytics 도 제외했다. 이제 documentation 발행에만 집중할 수 있다. 누구든지 이곳에 들리면 자질구래한것 없이 글 읽고 의견을 남기시도록 해 놓았다. 어느 누구에게도 어느 곳에도 구애받지 않고 글을 쓸수 있는 그것이 다다. 그리고 그걸 가장 이상적으로 가능한 곳이 2015년엔 아직 Jekyll의 Github 이라고 생각한다.

기타 참고 글

writtenby ilmol

깃에 대해 배울수 있는 여러곳. Git-scm.com, git-간편안내서, Outsider ↩
기본적으로 kramdown 으로 설정되어있는데 GMS extension을 사용하기를 추천한다. 개인적으로 redcarpet 을 사용하고 있다. ↩ ↩²
Disqus 홈페이지에서 댓글 마이그래이션 서비스를 제공하니 적극 활용하는 것도 한 방법이다. 플러그인을 설치하면 된다. ↩
Jekyll, Git 을 몰라도 무료 Github Pages 즐기기 를 참고. ↩ ↩²
twitter, facebook 같은 값을 정해놓으면 어디서든지 출력 가능하다. ↩
참고할만한 글들. kalkin7, nolboo ↩
이전, 새 설치 모음글들. nolboo, Pueue, Yeoyou, Suminb, Jinolog, Si.mpli.st, alphafactory.co.kr ↩
이부분이 100% 가능할까 고민을 많이 하고 결정했다. 물론 Disqus 는 예외로… 사실 이러한 이유에서 댓글을 지우는 것도 고려했지만 SNS 로 대화 할수 있는 한계가 있다고 생각한다. ↩