前言

2020 年的新年新希望之一就是重拾紀錄文字的習慣，不論是知識筆記或是個人心得
之前是用 Jekyll + GitHubPage 來 build 我的部落格

最近 survey 發現 Hexo 似乎更多人推薦，除了中文的討論較多很方便之外，他的 deploy cli 也包得很完善，所以就打算試試看 (另個重點大概是我一直覺得 Jekyll 很難拼哈哈)

這篇紀錄一下如何建立 Hexo + GitHubPage & 搬移 Jekyll 到 Hexo

前置環境

官方文件：https://hexo.io/docs/

這篇我假設你的電腦已經有 git & node 環境

需要注意的是你的 node 版本，盡量在 10 以上，否則會有問題

如果有多個 node 版本給不同的 packages，推薦使用 nvm 來安裝與管理不同的 node 版本

Install Hexo

利用強大的 npm 來安裝 Hexo

1
npm install -g hexo-cli

檢查一下

1
2
hexo --help
hexo -v

localhost

本地建制你的 blog

先用 hexo cli 建立一個簡單的 demo folder

1
2
3
hexo init <your-folder>
cd <your-folder>
npm install

運行在 localhost:4000

1
hexo server

這時應該會成功看到 hexo 的 demo page

GitHubPage

官方文件說要建立一個以自己帳號名稱命名的 repo，例如 <username>.github.io
但其實不一定這樣做，比如我是取名為 blog

建立好你的 repo 後，將他 clone 到本地端，把剛剛做的 hexo demo 內的檔案複製放到你的 repo folder 內

這時候可以改一下 global _config.yml

1
2
3
4
5
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://<username>.github.io/<your-repo-name>/
root: /<your-repo-name>/
...

push 到 master branch

這時去看你的 repo 設定裡面有個欄位就是 GitHub Pages
他會註明

Your site is published in https://<username>.github.io/<your-repo-name>/

記得如果不是付費會員要設成 Public repo

需要注意的是這裡還沒有成功 publish，所以你打開會看到 404
hexo 跟 jekyll 不同的是，要用另外一個機制作 deployment，將檔案與資料夾再進行一次轉換

Hexo deploy to GitHub

同個 repo

我之前的做法是用 master branch 放 hexo source
再開一個 branch 取名為 gh-pages 放 deploy 後的 hexo blog

這樣是方便我分開管理 source/deploy，要都丟在 master 也不是不行，但用 hexo cli deploy 後的檔案都會覆蓋掉你的 source files，所以還是建議分支管理比較好

如果選擇使用 gh-pages branch 來 host，記得在 GitHub Pages 的設定內把 Source 欄位改成 gh-pages branch

用不同的 repo

可以用一個 private repo 來放 source

public repo 來放 deploy 後的檔案

hexo deploy

先下載 hexo deploy 需要的套件

1
npm install hexo-deployer-git --save

打開你的 global _config.yml 修改正確的 repo 路徑與 branch

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/<username>/<your-repo-name>
  branch: gh-pages

可以先用 watch 看一下 hexo deploy 後的檔案樣子

1
hexo generate --watch

這時候你會發現多了很多東西，這些東西就是之後 hexo deploy 會丟上去的

在 deploy 之前先作 clean

1
2
hexo clean
hexo deploy

這時候應該可以看到你的 Github repo 內有剛剛 hexo deploy 的一堆檔案

再打開 https://<username>.github.io/<your-repo-name>/ 就成功囉

記得每次 deploy 完要 push source 之前都要作 hexo clean，才不會把那些轉換後的檔案也 push 上去了

從 Jekyll 搬家到 Hexo

搬家的步驟滿簡單的，把 _post 資料夾內的 .md 檔案都搬到 hexo 的 _post， 然後執行 hexo server 看看

有錯誤的話是你的 hexo config 裡面沒有支援一些設定，移除掉或是自己重新加入設定就可以了

沒有錯誤的話就成功搬家囉，Happy Blogging!