Hexo - 또 다른 정적 사이트 생성도구

언제 어디서 시작됐는지, 또 얼마나 지속될지 모르겠지만 정적 사이트 생성 방식의 CMS(?)가 대유행이다.

IFAIK, 이 방식의 원조는 21세기 초(!) 펄로 만들어진 blosxom이었고, 널리 쓰이기 시작한 것은 파이썬으로 만든 클론 pyblosxom이었다. 지금도 blosxom과 그 친구들은 여전히 명맥을 유지하고 있지만...

그로부터 십수년이 지나고... 유행은 돌고 돌아...

prologue

이 포스트에서 소개할 것은 Hexo라는 정적 사이트 생성도구다. 수많은 정적 사이트 생성도구들 중에서 굳이 Hexo를 선택한 이유는:

• nodejs로 만들어졌다. 내가 필요한게 있으면 뜯어고칠 수 있어야 하므로...
• github flavoured markdown, jade, less 를 지원한다. 기본 설정은 [ejs], [stylus]지만 설정이나 코딩없이 바꿀 수 있다.
• 외부 의존성이 적다. pygments 하나 때문에 파이썬 의존성을 갖는다거나... kramdown 하나 때문에 루비 의존성을 갖는다거나...
• 내 취향에 맞는... 단순한/이미지없는/반응형 테마가 있다.
• 소스 코드 문법 강조!

HEXO+: Your Autonomous Aerial Camera - Drone

출처: http://hexoplus.com 사진은 이 포스트와 아무~ 관계 없음.

hexo 설치

$ npm install hexo -g

사이트 초기화

$ hexo init mysite
$ cd mysite
$ tree
.
├── _config.yml
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   ├── photo.md
│   └── post.md
├── source
│   └── _posts
│       └── hello-world.md
└── themes
    └── landscape
        ...

미리보기용 서버 실행

$ hexo server
$ open http://localhost:4000

서버를 실행하는 동안 source 디렉토리에 파일을 변경/추가/삭제하면 알아서 처리된다. 말하자면 watch 하고 있다.

테마 변경

다른 정적사이트 생성기에서는 테마와 레이아웃의 개념이 오락가락하는 경우가 많은데... Hexo에서는 레이아웃은 테마의 일부다. 장단점이 있겠지만, 내 경우엔 백만배 편하다.

문서를 보고 직접 만들어도 되지만... I don't care~

기본 테마는 landscape인데, 공식 테마 목록에서 맘에 드는 테마를 골라보자.

내가 고른 테마는 light다. (대부분의 테마들과 마찬가지로) 이 테마는 github 프로젝트이므로 git명령으로 쉽게 설치할 수 있다.

$ git clone https://github.com/hexojs/hexo-theme-light.git themes/light

설정 파일의 theme: landscape 를 theme: light 로 바꾸자:

$ vi _config.yml

이제 안쓰는 landscape 테마는 지우자:

$ rm -rf themes/landscape

설정 변경

앞에서 테마를 변경하면서 봤던 \_config.yml 이 유일한 설정 파일이며, 익숙한(익숙하지 않다면 곤란하다!) yaml 형식이다.

매우 훌륭한 문서가 있으니 뻔한 설명은 생략.

내가 변경한 건 이런 정도다:

-title: 독거노인 개발자의 우울
-subtitle: 제주사는/마이너지향/입코딩전문/독거노인/개발자
-description: melancholy of old and sole programmer
-author: iolo
-email: iolothebard at gmail dot com
-language: ko-KR
-url: http://berry.iolo.kr
...
...
-new_post_name: :year-:month-:day-:title.md # 파일이름앞에 `년-월-일-`을 붙이도록 했다.
-filename_case: 1 # 파일이름은 소문자만 사용.
...
-date_format: YYYY-MM-DD # 난 한국사람. 내 사이트 볼 사람도 한국 사람~
-time_format: HH:mm:ss # 난 공돌이~ 24시간제가 좋아~
...
-disqus_shortname: melancholy-iolo # 댓글은 디스쿠스~
...
-theme: light # 테마는 light
...

새 포스트 만들기

$ hexo new 'Hello Hexo'
[info] File created at /Users/iolo/Documents/www/xxx/source/_posts/2014-10-05-hello-hexo.md
$ tree source
source/
└── _posts
    ├── 2014-10-05-hello-hexo.md
    └── hello-world.md
$ cat source/_posts/2014-10-05-hello-hexo.md
title: Hello Hexo
date: 2014-10-05 23:17:30
tags:
---

• 주의: 제목에 한글을 써봐야 무시되므로 파일이름이 될 문자열을 입력하고, 뒤에 파일을 편집해서 제목을 입력하는게 속편하다.

포스트 글쓰기

$ vi source/_posts/2014-10-05-hello-hexo.md

다른 정적 사이트 생성도구들과 마찬가지로 Hexo도 YAML Front-matter라는 걸 사용한다. 개인적으로는 맘에 안드는 부분이지만, 대세를 따르는 걸로...

• 주의: Jekyll을 비롯한 대부분의 정적 사이트 생성도구들과 달리 파일 첫줄에는 ---를 쓰지 않는 다는 것. 제사한 설명은 문서을 참조하시길...

title: 안녕 hexo
date: 2014-10-05 23:17:30
tags: [test,hello,hexo]
category: test
---
# 안녕 hexo
## hexo cool
### really?
- write
- content
- with
- markdown

미리보기용 서버로 확인해보자:

$ hexo server
$ open http://localhost:4000

이미지 첨부

이미지를 첨부하는 방법은 좀 더 실험을 해봐야 할 듯...

문서의 맨뒤에 나오는 post\_asset\_folder를 true로 설정하고 상대경로를 사용하는 방식은 문제가 좀 있고...

내가 사용한 쉬운 방법은:

$ mkdir source/uploads
$ cp path/to/image/file.jpg source/uploads/foo.jpg

본문에서는 이렇게 쓰면 된다:

![이미지](/uploads/foo.jpg)

글 지우기

자동으로 만들어준 hello-world.md 가 눈에 거슬린다 지워버리자!
글을 지우는 명령 따위는 없다. 그냥:

$ rm source/_posts/hello

배포

앞에서 변경했던 \_config.yml 이 다시 등장한다.

$ vi _config.yml

hexo는 github, heroku 외에 다양한 배포 방식을 지원하는데, 자세한 내용은 문서를 참조하시길...

나는 github 으로 배포했다:

deploy:
  type: github
  repo: git@github.com:iolo/iolo.github.com.git

이제 배포하고, 결과를 확인해보자:

$ hexo deploy
$ open http://iolo.github.io

eplilogue

어차피, 정적 사이트 생성도구라는게... 거기서 거기~ 결국은 개인의 취향이 중요한 듯...

정적 사이트 생성도구 목록을 보고 입맞에 맞는 녀석을 찾아서 시험해 보시길...

지금 당장은 hexo로 이것 저것 시험해보고 있지만... 결론은 안알랴줌.

이 포스트의 꼬라지를 iolo.github.io와 비교해보삼~ 내가 고민안하게 생겼나~ Orz

may the CLI be with you...