Hexo 설치하기

2019. 11. 18. 03:01 blog#Hexo#GitHub Pages#Blog

Jekyll을 사용하려다가 Hexo를 사용해보기로 했다. Jekyll Now를 쓰면 조금 덜 번거롭겠지만, post 형식이 지킬과 헥소가 서로 다르지 않아서 post 파일들만 마이그레이션 하면 될 듯.

Hexo는 Javascript로 작성된 블로그 프레임워크이고, 설치는 npm으로 간단히 할 수 있다. (node와 npm 설치는 생략)

$ npm install -g hexo-cli

Hexo 설치 후 hexo 명령으로 초기화하고, 파일을 생성, 테스트, 배포까지 할 수 있다.

Hexo 초기화

hexo init 명령으로 초기화할 수 있는데, 디렉토리 이름을 넘겨주면 해당 디렉토리에 초기화를 하며, 전달하지 않는 경우 현재 디렉토리에 초기화한다.

$ hexo init [directory_name]
$ cd directory_name # 디렉토리를 지정한 경우
$ npm install # node 모듈을 설치

Hexo 포스트 파일 만들기

Hexo의 레이아웃은 크게 page, post, draft로 구분이 되고, page는 독립된 페이지, post는 글, draft는 post의 드래프트 버전으로 노출되지 않고, publish 명령을 통해 source/_posts 폴더로 옮기게 된다. post는 source/_posts 폴더 하위에 위치하며, generate 시 정적 파일로 생성된다.

$ hexo new [layout] "제목" # scaffolds의 레이아웃을 활용하여 생성

직접 source/posts 폴더에 파일을 만들어도 무방하며, 아래 템플릿과 같이 입력하고, 제목과 파일명이 같도록 맞춰주면 된다.

---
title: 제목
date: yyyy-MM-dd HH:mm:ss
---
내용

로컬에서 확인하기

hexo server 명령을 통해 로컬 서버를 실행할 수 있으며, 기본적으로 4000번 포트를 통해 접속할 수 있다.

$ hexo server

위와 같이 실행한 후 브라우저를 실행하여 localhost:4000으로 접속하면 hexo로 생성된 블로그의 모습을 볼 수 있다. source/posts 폴더 내의 파일을 편집하면 파일의 상태를 실시간으로 추적하여 수정되는 내용을 브라우저에서 새로고침하여 바로 확인할 수 있다. (hexo server 명령을 재수행하지 않아도 된다.)