部署 Hexo 部落格至 Github Pages

Posted on Edited on In
Hexo Github Pages
Hexo Github Pages
Hexo Github Pages
．．．

建置 Hexo 部落格已經兩年多，如今更換 Ｍ ac 之後建制的新環境 Node 版本已經不相容，peer packages 貼心的設計也種下了難以收拾的坑 （難解的 sass loader），舊的部落格所選用的 Minos 框架在少數的使用量與停止維護下造就了相容性衝突也是在所難免，如今只能硬著頭皮重新學習建置一包 Hexo 了。

踩過的坑我們懂得避免，這次選用最多人使用與維護的 Ｎ exT 模板作為新部落格的皮膚。

建立 Ｎ exT 主題專案包

NexT 建置了貼心的官網提供完整的說明，點我。
再建置好 Hexo 專案包後，執行以下命令取得 Ｎ exT theme。

1
2
$ cd hexo-site
$ npm install hexo-theme-next

更換 __config.yml 主題

將 Hexo 專案根目錄下的 __config.yml 配置更改為：

1
$ theme: next

新增部落格文章

cd 至專案目錄後，透過以下指令建立文章：

1
$ hexo new post your-post-name

如何搭配 Github pages 部署網站

先說我個人的案例，去年第一個部落格我的做法是去建立新的 Github 帳號，將專案直接部署在 .github.io 的 repository 上，原因是個人帳號的 github.io 已經被舊專案所佔據了，這個做法不是很好，白白浪費了舊帳號的 pages 空間。於是乎在新部落格建置後決定好好利用舊帳號的 Github pages。
原先在 google 搜尋引擎上查不太到好的解法，所以就求救了 ChatGpt 老師～，沒想到各種問題都能一一擊破，真的是太厲害了！

建立新的 Git repository

去想要使用的 Account 建立一個新的倉庫，並且隨意命名，我使用 blog 這個名稱當作主網站的 router。

專案包中安裝自動部署工具

cd 至專案包路徑後，執行以下的命令安裝 Hexo 自動部署工具。

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

連結 Github repository 至部落格

cd 開啟專案中的 __config.yml 檔案改寫以下內容：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/your-username/blog.git
  branch: gh-pages
  tkn: your-pat-tkn

直得注意的是分支 gh-pages 會為 github 部屬時自動辨別為子專案使用，待下一個步驟設定完成並建立後將子專案推至此分支。

事前作業

為了讓 url 可以指向正確的路徑，需要調整 __config.yml 中的幾個設定：

url
1
2
3
# URL
    url: https://user-name.github.io/blog
    root: /

public dir

調整發布的資料夾名稱為 docs，在部署後會自動建立一個資料夾名稱為 docs。

1
2
3
# Directory
    source_dir: source
    public_dir: docs

執行命令建立該資料夾：

1
$ hexo generate
錯誤處理

在部署後有發生錯誤訊息：

1
$ github-pages 228 | Error: No such file or directory @ dir_chdir - /github/workspace/docs

ChatGpt 的回覆：

1
You can also update the url setting in your Hexo project's _config.yml file to match your new deployment environment. For example, if your site is deployed to https://your-username.github.io/blog, you can update your url setting like this:

原因是我忘了將上一個步驟中的 url 指向調整到 /blog，導致網站開啟後 css 與 javascript 直接掛掉找不到路徑。
將這一段調整後重新操作部署指令：

1
$ hexo clean && hexo generate && hexo deploy

就可以在子路由中看到 Hexo 部落格搭建好囉！完美的與舊專案並存在 github.io domain 下啦！

參考網站

從零開始 用 github pages 上傳靜態網站
ChatGpt