Linux

도커로 Hexo 블로그 만들고 github.io 주소로 접속하기

도커로 Hexo 블로그를 만들고 github.io 주소로 접속하도록 해 보았다.

개인적으로 사용하고 있는 텍큐 블로그가 있는데 기술관련 내용을 쓰기는 너무 불편하고 오래되기도 해서 마크다운으로 사용할 수 있는 블로그 툴을 찾아봤다.

처음엔 입출력 속도만 개선해보려고 PHP 버전을 5.6에서 7.3으로 올려봤는데 텍큐가 너무 오래되다보니 패치를 해도 잘 안돌아가고 해서 v7로 올리는 건 포기.

그 다음으로는 업뎃 잘되는 워드프레스에 텍스트큐브의 블로그 내용을 다 옮기고 기술내용도 거기서 다 같이 쓸려고 했다. 그래서 TTXML Importer로 데이터를 옮겨봤는데 글만 옮겨지고 그외 카운터 정보같은건 옮길 수가 없었다.

어차피 블로그를 깔끔하게 옮길 수 없다면 기술블로그 전용 툴을 쓰자 해서 찾은게 Ghost인데 얘는 카테고리나 사이드바 기능이 부족해서 탈락시켰다.

그 다음으로 찾은 선택지는 정적 사이트 생성기를 이용하는 거였다. 마크다운 쓰기도 좋고, github.io 주소도 사용할 수 있으니 괜찮아보였다. 그래서 찾아보니 Jekyll에는 맘에 드는 스킨이 없어서 Hexo에 Icarus라는 테마를 붙여 써보기로 했다.

근데 정적 사이트 생성기는 소스를 로컬에 보관하고 github.io로 퍼블리시하는 구조라, 모든 컴퓨터에 Hexo 소스를 보관할 필요가 있다. 이건 너무 바보같아서 Hexo 소스는 도커로 웹에 띄우고 이놈으로부터 github.io에 퍼블리싱하는 방법을 쓰기로 했다. 굳이 따지면 웹에 띄운 시점에서 바로 접속이 가능하니 굳이 퍼블리시를 할 필요는 없는거긴 한데 사이트를 매번 변환하는것보다는 당연히 변환된 저장소에 접속하는 편이 빠르고 무엇보다 github.io 주소를 쓰는 편이 더 geek하기 때문에 사용하기로 했다.

그래서 이 포스트에서는 리눅스 서버에 도커로 Hexo를 띄우고, Hexo-admin 플러그인으로 퍼블리시한 파일을 github.io에 deploy하여 최종적으로는 유저명.github.io로 정적 블로그를 구축하는 법을 설명한다.

github repository 생성

도커 이미지 선정

icarus 테마 셋업 

1
2
3
4
5
6
7
8

# ssh로 접속
sudo su -
docker ps  # 현재 실행중인 컨테이너 확인
docker exec -it xxxxxxxxxxxx /bin/bash  # 컨테이너에 접속
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
# 테마 의존성 패키지 일괄설치
npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3 hexo-component-inferno@^0.10.1 inferno@^7.3.3 inferno-create-element@^7.3.3
# _config.yml의 theme가 landscape인데 icarus로 수정

hexo-admin에 패스워드 설정

  • Settings > Setup authentification에서 YAML을 생성
  • _config.yml의 admin: 밑에 붙여넣는다

hexo-admin에서 deploy 설정 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

npm install --save hexo-deployer-git  # git 배포용 플러그인 설치
touch hexo-deploy.sh; chmod a+x hexo-deploy.sh
#!/usr/bin/env sh
hexo clean
hexo deploy

# _config.yml을 수정
deploy:
 type: git
 repo: https://계정:패스워드@github.com/저장소.git
admin:
 deployCommand: './hexo-deploy.sh'

유용한 플러그인

hexo-deployer-git

  • git으로 배포하기 위한 플러그인
1
2

# 설치
npm install hexo-deployer-git --save

hexo-generator-feed

  • atom(url/atom.xml ) 혹은 rss2.0(url/rss2.xml)으로 피드 생성해 줌
1
2
3
4
5
6
7
8
9

# 설치
npm install hexo-generator-feed --save

# _config.yml 파일 끝에 다음 행 추가
feed:
  enable: true
  type: rss2
  path: rss2.xml
  limit: 20

hexo-generator-sitemap

  • sitemap.xml 파일을 자동생성
1
2
3
4
5
6

# 설치
npm install hexo-generator-sitemap --save

# _config.yml 파일 맨 끝에 다음 행 추가
sitemap:
  path: sitemap.xml

hexo-math

  • KaTeX and MathJax를 활성화 시켜주는 플러그인
  • 플러그인 설치
1
2

# 설치
npm install hexo-math --save
  • 사용예
1
2
3

{% mathjax %}
\frac{1}{x^2-1}
{% endmathjax %}
© 2020 - 2024 냉동코더의 기술블로그
Built with Hugo
Theme Stack designed by Jimmy