Hexo를 활용한 블로그 만들기

필자의 초기 블로그는 단독 서버호스팅에 Wordpress로 구현한 후 Github Pages / Jeykyll 로 리뉴얼 한 후 3년 정도 유지했다. 새로운 마음가짐(?)을 위해 블로그를 전면 리뉴얼 하기 위해 다른 정적 사이트 생성기(Static Site Generator)를 찾기 시작했다. 여러 선택지 중에 Node.js 기반의 Hexo를 알게 되었으며 사용법이 Jeykyll보다 편리하고 다양한 플러그인과 테마를 보고 선택했다.

Hexo 관련한 국내 사이트가 많지 않지만 정보를 얻기에 부족함은 없었다. 특히 현섭님의 블로그에서 많은 도움을 받을 수 있었다.

설치 및 설정 중 만나게 된 이슈

  • NodeJS 최신 버전과의 충돌
    NodeJS v14.x 버전의 경우 아직 Hexo의 버그로 인해 빌드(Generate)와 배포(Deploy) 단계에서 실패를 반복했다(삽질ㅠㅠ). 따라서, NodeJS Stable 버전인 v12.x를 설치하고 진행해야 한다.
  • 커스텀 도메인 연결
    자신의 도메인 주소를 연결하기 위한 Custom Domain 연결 중에도 새로운 문제가 있었다. Github Pages 서비스하는 DNS IP 주소가 다음과 변경되어 다시 설정해야 했다.

    변경 전 DNS IP 변경 후 DNS IP
    192.30.252.153 185.199.108.153
    192.30.252.154 185.199.109.153
    - 185.199.110.153
    - 185.199.111.153
  • source 폴더에 CNAME 파일 생성
    hexo의 source 폴더에 CNAME 파일이 없다면 Deploy 할 때마다 Github Pages의 Custom domain 명이 초기화(삭제)된다. 따라서 빈 텍스트 파일을 생성해 자신의 도메인 주소(도메인주소.com, 도메인주소.co.kr 등)를 저장하고 확장자 없이 파일명을 CNAME으로 저장해야 한다.

Node.js 및 npm 설치

  • Hexo를 설치하기 위해서 먼저 Node.js를 설치한다. 이때 npm(Node.js 패키지 관리자)도 같이 설치된다. Homebrew를 사용해 설치할 경우 $ brew install node.js 하면 최신 버전(v14.x)으로 설치되기 때문에 다음과 같이 v12.x 버전을 설치하겠다고 명시해야 한다.

    1
    $ brew install node@12
  • 설치 후 다음과 같이 각각의 버전을 확인한다.

    1
    2
    3
    4
    $ node -v
    v12.16.3
    $ npm -v
    6.14.4

Hexo 설치

  • npm 명령어를 통해 Hexo를 설치한다.

    1
    2
    3
    4
    $ npm install -g hexo-cli
    /usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
    + hexo-cli@3.1.0
    added 82 packages from 326 contributors in 4.662s
  • 설치후 환경정보 조회

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $ hexo -v
    hexo-cli: 3.1.0
    os: Darwin 19.4.0 darwin x64
    node: 12.16.3
    v8: 8.1.307.31-node.32
    uv: 1.37.0
    zlib: 1.2.11
    brotli: 1.0.7
    ares: 1.16.0
    modules: 83
    nghttp2: 1.40.0
    napi: 6
    llhttp: 2.0.4
    openssl: 1.1.1g
    cldr: 36.1
    icu: 66.1
    tz: 2019c
    unicode: 13.0

블로그 초기화 및 가동

  • Hexo 초기화 작업

    1
    $ hexo init <디렉토리명>
    1
    2
    $ mkdir HexoBlog
    $ hexo init HexoBlog/
  • Hexo Server 명령어

    로컬 환경에서 서버를 가동할 수 있다. 터미널에서 블로그 디렉토리로 이동한 후 다음 명령어를 실행한 후
    웹브라우저에서 http://localhost:4000을 입력하면 초기 테마로 설정된 블로그를 확인할 수 있다.

    1
    2
    3
    4
    5
    $ hexo server

    또는

    $ hexo s
  • 테마 적용

    Hexo는 다양한 테마를 제공하고 있기에 본인이 원하는 테마를 Hexo 테마 페이지에서 선택한 후 git clone 명령어를 통해 다운로드한다. 필자는 icarus 테마를 선택했다.

    1
    $ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
  • 배포할 때 사용하는 Deployer 플러그인 설치

    1
    $ npm install --save hexo-deployer-git
  • 새로운 포스트 생성

    1
    $ hexo new [post] "포스팅명"
  • 새로운 페이지 생성

    1
    $ hexo new page "페이지명"

생성(Generater) 및 배포(Deploy)

  • 초기화(정적 데이터 삭제)

    1
    $ hexo clean
  • 생성(Generater)

    1
    2
    3
    $ hexo generate
    또는
    $ hexo g
  • 배포(Deploy)

    1
    2
    3
    $ hexo deploy
    또는
    $ hexo d
  • 클린 후 배포

    1
    $ hexo clean; hexo g -d

플러그인 설치

  • Deployer

    • 설치
      1
      npm install --save hexo-deployer-git
  • Asciinema

    • 설치

      1
      $ npm install --save hexo-tag-asciinema
    • 사용법

      1
      {% asciinema video_id %}

참고 블로그

댓글