지킬로 깃허브 페이지에 블로그 제작
워드프레스는 이제 기능이 너무 많아져서 내 맘대로 간단히 스킨 디자인을 고치는 건 거의 불가능해졌습니다. 스킨 업데이트를 하면 예전에 수정했던 부분들을 다시 수정해야 하는 경우도 종종 있고요. 마크다운 지원이 미흡한 것도 불만입니다. 플러그인을 사용해서 마크다운으로 글을 쓴다 할지라도 워드프레스단에서 HTML로 저장을 해 버리니 추후 수정할 때 매우 불편합니다. 무엇보다 사용하지 않는 기능들이 덕지덕지 붙어서 복잡하고 느립니다. 그래서 상대적으로 커스터마이제이션이 편한 마크다운 기반 정적 사이트 생성기를 이것저것 기웃거린 게 몇 년이 되었는데, 아무래도 기존의 블로그 글들을 모두 담기에는 부족한 점이 없지 않아 미적거리고 있었습니다.
그러다 2015년 크리스마스 연휴 마크다운에 대해 구글질을 하다 존 그루버의 사이트에 들렀습니다. 그리고 생각했죠. 죽는다면, 인터넷 도메인과 호스팅은 언젠간 기간 만료가 되어 없어질 것 아닌가. 물론 내가 엄청난 글을 써대는 것도 아니고, 죽을 때면 이 글들은 별 의미가 없어질 가능성도 높겠지만, 그래도 남들 보라고 열심히 쓴 글인데 좀 아깝지 않은가. 그래서 깃허브 위에 올라가는 블로그를 하나 더 만들기로 했습니다. 남길 만한 글들을 저장할 목적으로요.
지킬과 깃허브 페이지의 조합은 개인 호스팅 서비스에서 운영하는 워드프레스에 비해 다음과 같은 이점이 있습니다.
- 지킬은 가볍고 간단합니다.
- 지킬은 개인 호스팅이 아니더라도 디자인 수정이나 블로그 기능 추가가 가능합니다.
- 지킬은 글의 원본이 DB 안에 들어가 있지 않아 원문에 접근이 용이합니다.
- 지킬은 글을 마크다운으로 보관합니다.
- 깃허브에 올라가기 때문에 개인 호스팅을 따로 운영할 필요가 없습니다.
- 깃허브에 올라가기 때문에 글의 수정 내역이 고스란히 남겨집니다.
다음과 같은 단점이 있습니다.
- 지킬은 정적 페이지 생성이기 때문에 기본적으로 댓글을 다는 것이 불가능합니다. (물론 이를 보완하기 위한 여러가지 방법이 있습니다. 뒤에서 설명하겠습니다.)
- 깃허브에 올라가기 때문에 글의 비공개 여부를 설정할 수 없습니다.
- 깃허브에서 호스팅을 해 주기 때문에 지킬 플러그인이 극소수만 지원됩니다.
제작 방법은 여기저기 많이 있으니 굳이 쓰진 않겠습니다. 저는 다음 사이트들을 참고했습니다.
- GitHub, Using Jekll with Pages
- Joshua Lande, How I Created a Beautiful and Minimal Blog Using Jekyll, Github Pages, and poole
- Nolboo’s Blog, 지킬로 깃허브에 무료 블로그 만들기
Disqus 댓글 장착
지킬이 정적 웹페이지를 지원하기 위해 만들어졌기에 댓글 기능이 없습니다. 그래도 아무래도 블로그다보니 댓글 피드백은 받고 싶습니다.
- Disqus라는 댓글 전용을 위한 플랫폼이 있습니다. 많은 댓글 기능을 지원하는 지킬 사이트들은 이것을 쓰는데, 장단점이 있습니다. 여러가지 로그인(트위터, 페이스북 등)을 지원해주고 스팸 필터링이나 알림 등 복잡한 시스템을 무료로 지원해 주는 건 건 장점이지만, 댓글이 내 소유가 아니고 디자인을 맘대로 변경할 수 없는 점은 단점입니다.
- ‘static comments Jekyll’ 이라고 구글링을 하면 댓글을 깃허브에 보관할 수 있게 하는 방법이 있습니다. 하지만 어딘가에서 댓글 푸시를 하면 이것을 갈무리해서 깃허브에 올리는 프로세스가 돌고 있어야 합니다. 별도 호스팅이 필요하게 됩니다. 스팸 문제도 직접 해결해야 하는데 보통 Akismet을 사용하는 것 같더군요.
개인적으로 많은 고민을 했는데, 호스팅을 사용하지 않고 반영구적으로 놔 둘 수 있는 블로그가 이 프로젝트의 목표이기에 Disqus를 사용하기로 했습니다. 자세한 부분은 역시 여기저기 많이 있으니 굳이 쓰진 않겠습니다. 위의 Josha Lande의 블로그나 Nolboo의 블로그 링크에도 설명이 되어 있으니 참고하시면 되겠습니다.
다만 CSS를 제가 건드릴 수 없어서 디자인이 망가져버린다는 부분이 가장 거슬렸는데, 슬라이더를 하나 추가해서 “Show the discussion” 버튼을 누르면 Disqus 댓글창이 올라오도록 만들었습니다. 자세한 코드는 gist를 참조해 주세요. 너무 길어서 본문에 포함하지는 않겠습니다. jQuery를 사용하지 않고 CSS 애니메이션만으로 구현을 하려고 했는데 스크롤링을 부드럽게 하는 부분에서 결국 사용하게 되었습니다.