블로그를 옮긴 이유
기존에 나는 Gatsby 기반의 블로그를 Netlify로 배포해서 운영하고 있었다. 블로그를 옮겨야겠다고 마음 먹은 이유는 바로 테마였다. 정확히 말하자면 markdown 테마이다. 블로그 전체적인 테마는 심플해서 마음에 들었는데, markdown 형식으로 글을 쓸 경우 뭔가 밋밋했다. 또한 기존 블로그는 간단하게 TIL만 작성하는 등 최소한의 시간만 투자했었다. 하지만 기술 블로그의 의미를 조금 더 찾고자 새로운 블로그를 만들기로 결심했다.
Jekyll vs Hexo vs Hugo
정적 웹사이트 생성기는 굉장히 많다. 그 중 사람들이 가장 많이 사용하는 세 가지를 비교하여 결정했다.
Jekyll
Jekyll은 현재 가장 인기 좋은 정적 웹사이트 생성기이다. 한글 레퍼런스도 잘 되어있으나 Ruby 기반이며 윈도우를 공식으로 지원하지 않는다.
Hexo
Hexo는 node.js를 기반으로 한다. 대만 출신 개발자가 만들어서 그런지 구글링을 하다보면 대부분의 자료가 중국어로 되어있다. 굉장히 마음에 드는 테마를 찾았었는데, 포스팅들을 카테고리별로 구분해주지 않아 등을 돌렸다. 원래는 다음의 테마를 쓰려고 했다. (Hexo terminal theme)
Hugo
Golang 기반의 Hugo는 빌드가 굉장히 빠르다는 장점이 있다. 영어로 된 레퍼런스가 굉장히 많고 github 별 수가 Hexo를 따라잡았다. 빌드가 빠르다는 점에 매료되어 바로 마음에 드는 테마를 찾기 시작했다.
Hugo + Github Page
내가 사용한 기존 블로그는 Netlify에서 배포하게끔 했다. 하지만 몇 달 동안 github를 사용한 사람인만큼 github pages를 이용하여 배포하는 방식을 선택했다.
hugo 설치
설치 후 cmd 창에서 아래의 명령어를 입력하면 된다.
$ hugo new site <PROJECT>
Github repository 2개 생성
<PROJECT> 저장소: hugo의 컨텐츠와 소스 파일 포함<USERNAME>.github.io저장소 : 배포될 hugo 웹사이트
hugo theme 다운로드
필자의 경우 LeaveIt 테마를 이용했다. 선택한 테마를 PROJECT\themes에 clone하면 된다.
$ git clone https://github.com/<THEME>.git
root 디렉토리(위의 PROJECT 폴더)에 있는 config.toml파일을 수정하면 되는데 보통 선택한 테마를 만든 사람의 github에 잘 설명되어 있다.
Submodule 설정
github에 생성한 <PROJECT> repository를 root 디렉토리에 remote로 등록해준다.
$ git init
$ git remote add origin https://github.com/<USERNAME>/<PROJECT>.git
<USER>.github.io repository는 submodule로 등록해준다.
$ git submodule add -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public
이렇게 하면 public 폴더가 하나 생성되는데, 이는 실질적으로 웹페이지에 보여지는 내용이라고 생각하면 된다.
컨텐츠 업로드
$ hugo server 명령어를 이용하면 웹서버가 실행되고, http://localhost:1313에 접속해서 웹페이지를 확인할 수 있다.
vscode 등으로 markdown 포스팅을 작성한 뒤 컨텐츠는 다음과 같이 업로드한다.
$ hugo -t <THEME_NAME> // LeaveIt
$ cd public
$ git add .
$ git commit -m "COMMIT_MESSAGE"
$ git push origin master
$ cd ../
$ git add .
$ git commit -m "COMMIT_MESSAGE"
$ git push origin master
추가 사항
이렇게 간단하게 hugo 기반의 블로그를 만들어서 github page로 배포했다. 댓글 기능을 위해 disqus를 추가할 예정이다. 그리고 포스팅을 검색 엔진에 노출시킬 방법도 찾아봐야겠다.