Hexo 기술블로그 시작하기, 내가 Hexo를 선택한 이유

멀쩡한 블로그를 이사한 이유

기존에 나는 blogspot 블로그을 사용했다. 처음엔 명색이 개발자의 기술 블로그인데 github pages나 netlify에 jekyll을 사용한 블로그를 만들어보고 싶었지만, 굳이 블로그 플랫폼에 큰 신경을 쓸 필요가 있을까 싶어 blogspot을 계속 사용했다. 사용할 수록 불편함이 드러났다. 우선 코드 삽입을 지원하지 않아서 따로 Colorscripter를 사용하는 것, 테마 자체가 불안정하고 커스텀도 완벽하지 않아서 “내가 쓰고 싶은 블로그”를 완성하지 못했다. 이사를 결심했다.

Jekyll이냐 Hexo냐

가장 많이 사용하는 Jekyll, 열심히 따라오고 있는 Hexo중 고민을 많이 했다. Jekyll이 Ruby 기반, Hexo가 Node.js 기반이라고 한다. 그래서 Hexo보다 Jekyll이 속도면에서 뒤쳐진다. 그리고 일단 나는 Ruby를 몰라서 문제 해결이나 번들 충돌을 해결할 자신이 없었다. Node는 플젝도 몇번 해보고 어느정도 안다고 생각해서 보다 나에게 친숙한 Hexo를 선택하게 되었다.

Hexo 설치하기

Node.js와 Git을 먼저 설치하자.

1	$ npm install -g hexo-cli

-g 옵션은 global로, 특정 폴더(프로젝트)가 아닌 글로벌 폴더에 저장하여 어디서든 사용할 수 있게 해준다.

Hexo 시작하기

블로그 폴더를 하나 만들 것이다. 이름은 blog가 아니라도 상관없다.

1
2
3

$ hexo init blog
$ cd blog
$ npm i

이 상태에서 로컬 서버로 블로그를 확인할 수 있다!

$ hexo s

localhost:4000에 접속하여 확인해보자.

Github Pages로 배포하기

Github Pages, Netlify, Heroku 등의 많은 서비스가 있지만 대부분의 개발자가 사용하는 깃헙으로 블로그를 배포하기로 했다.

Github Repository 만들기

사용자이름.github.io라는 이름으로 프로젝트를 생성한다. 이렇게 짓는 이유는 블로그를 프로젝트 페이지가 아닌 사용자 페이지로 만들 것이기 때문이다. .gitignore, licence등 기타 설정을 안 건드려도 된다.

Github에 Deploy하기 위해서는 플러그인 설치가 필요하다.

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

이제 거의 끝났다. 블로그의 전반적인 설정만 하면 된다.
블로그의 소스 폴더에서 _config.yml 파일을 열어보자.

# Site
title: 지니의 기술 블로그
subtitle: Hexo 기반의 기술 블로그
description: 기술 블로그입니다.
author: zini # 저자 이름
timezone: Asia/Seoul

# URL
url: https://사용자이름.github.io/
permalink: :year/:month/:day/:title/ # 새로운 글에 붙을 고정 URL 포맷
permalink_defaults:

# Deployment
deploy:
  type: git
  repo: https://github.com/사용자이름/사용자이름.github.io.git

배포해보자

Github, 블로그 설정이 모두 끝났다. 이제 정말 간단하게 배포하면 된다.

1	$ hexo g -d

g: generate, d: deploy - 빌드/배포를 한번에 할 수 있다. (물론 따로도 할 수 있다)

이제 사용자이름.gitgub.io에 접속해서 확인해보자!

Theme 설치, 설정까지

기본 테마도 괜찮지만 이걸 그대로 사용할 것이라면 Hexo를 사용하지도 않았다. Hexo Themes에서 300개가 넘는 테마를 고를 수 있다. 고심끝에 고른 테마는 Siricee의 Chic 테마이다. 테마 설정도 어렵지 않다.

테마마다 설치, 설정 과정이 다를 수도 있다, 꼭 확인해보자

1 2	$ cd blog/themes $ git clone https://github.com/Siricee/hexo-theme-Chic.git Chic

처음 init시 정한 폴더명이 blog가 아니라면 이름을 바꿔서 들어가자.

이제 themes에 테마 구조가 설치되었을 것이고, 이전에 수정했던 _config.yml를 다시 열어 Theme 설정을 바꿔준다.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Chic # 설치한 테마 이름으로 설정

테마 설치, 설정까지 끝났다. 이제 설치한 테마의 종류에 따라 themes 폴더의 _config.yml을 입맛에 맡게 수정해주면 된다.
(대부분의 테마마다 github의 readme에 상세히 설명되어 있다)

진작에 쓸 걸

Colorscripter의 복사 늪에서 벗어나고, css 꼬임과 기타 문제에서도 벗어났다. Jekyll이나 Hexo나 웹 코드를 해석할 줄 아는 개발자라면 크게 어렵지 않게 사용할 수 있고, 고생한 만큼 자유도는 커진다.

블로그 이사를 결심한 지 한달이 넘어, 마침내 이루었다.