Hexo 시작하기


HexoNode.js 기반 정적 사이트 생성기(Static site generator)의 일종이다. 모 아이돌의 16진수 버전이 아니다 혹시 정적 사이트 생성기가 무엇인지 모른다면 이 링크에 잘 설명되어 있다. 이 블로그는 원래 Jekyll로 만들어졌었는데, Jekyll은 (내가 까막눈에 가까운) Ruby로 만들어졌기 때문에 커스터마이징, 플러그인/테마 제작에 어려움이 있을 거라 예상되어 Hexo로 옮겼다. 굳이 Hexo를 선택한 이유는 Hexo의 GitHub 레포지토리 Star 수가 많기 때문이다. 이 글을 쓰는 지금 약 8,600개의 Star가 박혀있는데, 이 숫자는 모든 정적 사이트 생성기 중에 3위에 해당하는 Star 갯수이다. 당연히 JavaScript 기반의 정적 사이트 생성기 중에서는 1위. 나는 오픈 소스 생태계는 무조건 인구 수 많은 게 장땡이라고 생각하기 때문에 망설임 없이 1위를 골랐다. 문서화가 정말 잘 되어있는 것도 한 몫했고.

설치

먼저 Hexo를 사용하기 위해서는 Node.js와 Git이 필요하다. 해당 소프트웨어는 아마 다 깔려있겠지만, 설치에 대해서는 링크로 대체한다.
Node.js 다운로드 페이지
Git 다운로드 페이지

Node.js가 설치되었다면 터미널을 열어 다음 명령어를 입력해서 Hexo를 설치한다.

1
$ npm install -g hexo-cli

참고로 내 환경은 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
$ hexo -v
hexo: 3.1.1
os: Darwin 15.3.0 darwin x64
http_parser: 2.5.0
node: 4.2.4
v8: 4.5.103.35
uv: 1.7.5
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2e

Hexo 설치에 성공했다면 다음과 같이 명령어를 입력해서 Hexo 디렉토리를 스캐폴딩한다. (디렉토리명은 GitHub 레포지토리 이름과 달라도 상관없다.)

1
$ hexo init <디렉토리명>

스캐폴딩 이후에는 다음과 같은 디렉토리 구조를 확인할 수 있다.

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

아마 hexo init명령어 안에 Node 모듈 설치 과정이 포함되어 있는 것 같다. 설치가 안 되어있으면 별도의 npm install 명령어를 사용해서 Node 모듈을 설치하면 된다.
모두 설치가 잘 되었다면 다음 명령어를 입력해서 내장 서버를 돌려보자.
1
$ hexo server

브라우저를 열어 http://0.0.0.0:4000/으로 접속해서 블로그를 확인할 수 있다.

글쓰기

글쓰기도 터미널에서 명령어를 입력해서 시작한다.

1
$ hexo new <포스트명>

혹은 발행되지 않는 형태의 초안(draft) 문서를 작성하고 싶은 경우 다음과 같은 명령어를 입력한다.

1
$ hexo new draft <포스트명>

명령어를 사용하면 알아서 /source/_posts/ 혹은 초안 문서의 경우엔 /source/_drafts/ 경로에 <포스트명>.md 파일을 스캐폴딩한다.
/scaffolds/post.md에서 스캐폴딩할 내용을 추가하거나 변경할 수 있다.
물론 스캐폴딩이 별 거 없기 때문에 이렇게 안하고 직접 파일 만들어서 해도 딱히 상관없다.

Hexo는 기본적으로 마크다운 문법을 지원하고, 추가적으로 여러가지 Tag Plugin들을 지원한다.
Jekyll에서 많이 쓰는 highlight 블록도 codeblock이라는 이름으로 지원한다. 그 외에도 jsfiddle, raw 블록 등도 있다. 모든 Tag Plugin 리스트를 보고 싶으면 링크 참조.

문서의 최상단 헤더 영역에는 yaml 포맷으로 다음과 같이 메타 데이터를 설정할 수 있다.

start-hexo.md
1
2
3
4
5
6
7
title: Hexo 시작하기
tags:
- Blog
- Tool
- Hexo
date: 2016-02-23 23:15:53
---

yaml에서 사용하는 기호(e.g. [, : ..)들이 제목같은 곳에 들어가게 되면 파싱 오류가 나기 때문에 큰 따옴표로 감싸줘야 한다.
다른 데이터는 이 링크에서 확인할 수 있다. 그리고 사용하는 테마에 따라서 특별히 추가해서 사용할 수 있는 요소도 있다. 썸네일이라던가..

마크다운으로 적당한 문서를 작성한 뒤 저장하면 watch하고 있는 hexo 서버가 알아서 html 문서로 만들어 주기 때문에 바로 확인할 수 있다.
포스트 작성이 끝나면 다음과 같은 명령어를 입력해 Draft 문서를 발행한다.

1
$ hexo publish <포스트명>

사실 발행이라고 해봤자 _drafts 디렉토리에서 _posts 디렉토리로 이동하면서 그냥 날짜/시간 넣어주는 게 끝이긴한데 솔직히 직접하는 것보다 명령어가 편하다.

디플로이

아마도 가장 많이 사용할 것 같은 GitHub 기준으로 설명한다. 내가 써서 그런 거 아님
먼저 _config.yml에 자신의 GitHub 정보를 입력해야한다.

_config.yml
1
2
3
4
deploy:
type: git
repo: https://github.com/HyunSeob/hyunseob.github.io.git
branch: master

Amazon S3 혹은 heroku 같은 다른 플랫폼도 플러그인을 설치하면 디플로이가 지원되기 때문에 아마 GitHub와 큰 차이는 없을 것이다. 이 링크를 참조하면 지원하는 플랫폼을 확인할 수 있다.

그리고 정적 파일들을 생성한다.

1
$ hexo generate

변경점을 알아서 잘 잡아내기 때문에 보통은 그냥 hexo generate를 사용해도 문제는 없지만, 변경점을 잡아내지 못할까 우려가 된다면 hexo clean을 먼저 사용해서 public 디렉토리를 비워준 후 hexo generate를 사용하면 잘 된다.

추가: 기본적으로 디플로이를 하기 위해서는 hexo-deployer-git 플러그인이 필요하다. 아래의 명령어를 사용해서 설치하면 된다. 다른 플랫폼에서 사용하기 위해서는 다른 플랫폼을 지원하는 플러그인을 설치하면 된다.

1
$ npm install --save hexo-deployer-git

생성이 잘 되었다면 디플로이 명령어를 사용한다.

1
$ hexo deploy

디플로이가 되었으면 자신의 레포지토리와 GitHub Page에서 확인할 수 있을 것이다. 커밋 메시지는 커스터마이징할 수 있지만 디폴트로 Site updated: <변경일시>로 들어간다.

미미한 단점

  • Hexo의 크리에이터가 대만인이라 그런지 전반적으로 중국쪽에서 유명한 툴인 것 같다. 이게 그냥 쓸 때는 별로 상관 없는데 뭔가 문제가 있어서 GitHub Issue에 들어가면 중국어가 절반이라 못 읽는 이슈가 너무 많다. 지금 생각해보니 중국 계열이라 Star가 많은 것 같다
  • 블로그 레포지토리에는 빌드가 끝난 public 디렉토리의 정적 파일만 올라가기 때문에 코드/원문 관리는 별도의 레포지토리에서 해야한다.

참고링크