利用「Hexo」架設個人部落格
本文最後更新於：2024年10月18日 11:30
自從進入職場、學習不同的程式語言或工具以來，發現累積的說明文件愈來愈多，但卻又沒有一套系統性的整理，遇到問題一時要找就開始有點麻煩了😓另外，很久也沒藉由寫點東西，來反思自己的生活了。希望可以經營一個可以累積過往的程式經驗，又可順便記錄生活種種點點滴滴的部落格，而且重點是要方便記錄跟找尋！於是找到了Hexo。「Hexo」是一個讓你很容易上手部署自己個人部落格，以及發佈程式類說明文章的套件工具。而且主題及外掛超多任你選擇，只需要懂得一些語法架構，即可做出美美的、與眾不同的網頁！
安裝及設定 Hexo
利用 npm 安裝 Hexo
在安裝Hexo之前，須先安裝Node.js，以利用npm來安裝Hexo。
另外也須安裝Git。
1 | |
建立並複製公開儲存庫（repository；repo）至本地端
在欲放置儲存庫的專案目錄下，複製GitHub上的公開儲存庫至此。
1 | |
設定 Hexo
從Hexo的GitHub上下載所需設定文件：
1
2hexo init blog # 在當前目錄建立blog資料夾（可自訂名稱）
cp blog/* <本地儲存庫> # 範例：D:\xxx.github.io根據複製檔案中的「package.json」自動安裝需要的套件：
1
2cd <本地儲存庫>
npm install # 依據當前目錄package.json安裝hexo-deployer-git，以一鍵部署：
1
npm install hexo-deployer-git --save # 無此套件後續deploy可能出錯修改設定檔_config.yml：
主要設定網站內容的檔案。
設定網站標題、作者、以及網站的URL等基本設定。
加入以下程式碼，以自動部署到GitHub Pages：
1
2
3
4
5deploy:
type: git
repo: <儲存庫URL>
branch: [branch]
message: [message]
部署網頁
將目前資料夾中所有靜態網頁清除：
1
hexo clean按照當前設定檔，產生對應的靜態網頁：（可省略）
1
hexo generate # hexo g在本地端產生網頁，確認當前設計（預設127.0.0.1:4000）：（可省略）
1
hexo server # hexo s將目前本地端靜態網頁自動部署至GitHub Pages：
1
hexo deploy # hexo d
Hexo 目錄架構
node_module：
這個專案所需要的套件（剛剛透過npm install所安裝）。
public：
存放網頁中的文章、圖片、標籤等資料。
scaffolds：
存放網站的內容模板。
themes：
存放網站的主題。