為什麼選擇 Hugo？#
相信有在使用 Github 的各位，應該知道 Github Page 這個功能，它可以讓我們免費架設靜態網頁，不過因為是靜態網頁的關係，所以不支援像是登入、資料庫等動態功能，那麼要如何快速建立一個好看又實用的個人部落格呢？這時候 Hugo 這個強大的靜態網站生成器就派上用場了。Hugo 生成 HTML 的速度非常快，幾秒內就能把 Markdown 跟你使用的 Hugo 主題結合在一起，變成 HTML 網頁，雖然使 Markdown 語法可能要稍微熟悉一下，剛從 Medium 的筆者可能會有些陣痛期，但是如果本身已有網頁開發經驗，相信上手是非常快的。
快速建立 Hugo#
1. 安裝 Hugo#
依照各作業系統 進行下載
MacOS：
brew install hugo安裝完成後輸入：
hugo --version並且有出現版本訊息，代表安裝成功。
2. 建立 Hugo 網站#
到 Hugo主題頁 挑選自己喜歡的主題下載下來。
# 建立新網站
hugo new site my-blog
cd my-blog
# 安裝主題（以 Blowfish 為例）
git init
git submodule add https://github.com/nunocoracao/blowfish.git themes/blowfish3. 寫第一篇文章#
hugo new posts/hello-world.md編輯 content/posts/hello-world.md：
---
title: "Hello World"
date: 2024-06-01
draft: false
---
這是我的第一篇文章！4. 本地預覽#
hugo server打開 http://localhost 就能看到你的網站了！
頁面應該會是套用所安裝 Hugo 主題的文章內容。
5. 常用指令#
# 文章與頁面相關
hugo new posts/文章標題.md # 建立新文章
hugo new about.md # 建立新頁面
hugo new posts/資料夾/文章.md # 建立子資料夾下的新文章
# 本地開發與預覽
hugo server # 啟動本地伺服器（不含草稿）
hugo server -D # 啟動本地伺服器（包含草稿）
hugo server --port 1314 # 指定埠號啟動本地伺服器
hugo server --disableFastRender # 停用快取，適合除錯
# 文章發佈與草稿管理
hugo list drafts # 列出所有草稿
hugo undraft content/posts/xxx.md # 取消草稿狀態
# 網站建置
hugo # 建置網站（預設輸出到 public 資料夾）
hugo --minify # 建置並壓縮 HTML/CSS/JS
hugo -d ./dist # 指定輸出資料夾
# 其他常用指令
hugo version # 查看 Hugo 版本
hugo help # 查看所有指令說明部署到 Github Pages#
1. 到個人的 Github 主頁，並且在右上角點選「New Repository」#
2. Repository Name 填寫「使用者名稱.github.io」#
因為已經有建立過了，所以不允許重複。
記得要設定為 Public
3. 回推上傳至 Github#
先前在本地端 hugo server 後所需要的靜態檔案會生成到 public/ 的目錄。
將剛才建立好的 Github Repository Clone 下來 :
git clone https://github.com/使用者名稱/使用者名稱.github.io此時 git 會建立一個資料夾，把 public/ 下的檔案都放到該資料夾內。
將檔案透過 git指令 回推到 Github 上。
git add . && git commit -m "auto build" && git push稍微等待一段時間後，打開
https://使用者名稱.github.io/
有看到自己的網站就代表成功囉！
建立自動部署流程#
每次要更新文章到網站上都需要執行上述步驟，透過 Crontab + Script 可以把上面手動的工作流程自動化。
1.首先建立一支 deploy.sh 的檔案:#
點擊展開 deploy.sh 腳本內容
#!/usr/bin/env bash
# 自動建置 Hugo 靜態站，輸出到目標資料夾，並自動 git commit & push。
# 使用：在專案根目錄執行 `./deploy.sh`
# -------------------------------------------
# 設定錯誤處理：遇到錯誤時立即停止執行
set -euo pipefail
# 1. 變數設定
# 檢查參數數量
if [ $# -ne 2 ]; then
echo "[ERROR] 參數數量錯誤"
echo "[ERROR] 使用方式: $0 [專案根目錄] [目標路徑]"
echo "[ERROR] 範例: $0 /path/to/blog /path/to/target"
exit 1
fi
# 兩個參數：提供專案根目錄和目標路徑
BLOG_ROOT="$1" # 從第一個參數取得專案根目錄
TARGET_DIR="$2" # 從第二個參數取得目標路徑
echo "[INFO] 開始時間: $(date '+%Y-%m-%d %H:%M:%S')"
echo "[INFO] 專案根目錄: $BLOG_ROOT"
echo "[INFO] 目標路徑: $TARGET_DIR"
# 2. 產生靜態檔
cd "$BLOG_ROOT"
echo "[INFO] Building site with Hugo..."
/opt/homebrew/bin/hugo --cleanDestinationDir --minify -d "$TARGET_DIR"
echo "[INFO] Build finished. Files generated at $TARGET_DIR"
# 3. Push 到 GitHub Pages 倉庫
if [ -d "$TARGET_DIR/.git" ]; then
cd "$TARGET_DIR"
git add -A
if git diff --cached --quiet; then
echo "[INFO] No changes to commit."
else
echo "[INFO] Committing and pushing changes..."
git commit -m "auto build"
git push
fi
else
echo "[ERROR] $TARGET_DIR 不是一個 Git 倉庫，請先手動初始化 (git init) 並設定遠端。"
exit 1
fi
echo "[SUCCESS] Deployment completed at $(date '+%Y-%m-%d %H:%M:%S')!" 2.接著測試 deploy.sh 是否能正確執行#
帶入二個路徑的參數，分別為：
hugo的專案路徑本地端 Github 的目錄(上面提到public/產生靜態檔放置的地方)
deploy.sh "hugo的專案路徑" "本地端 Github 的目錄"3.設定 crontab#
crontab 的詳細設定方式請參考這篇教學。
打開終端機並輸入
crontab -e將 crontab 設定每天晚上 12 點自動執行 deploy.sh
＃編輯 crontab -e
0 0 * * * /bin/bash deploy.sh "hugo的專案路徑" "本地端 Github 的目錄" >> deploy.log 2>&1結語#
利用 Hugo + Github Pages 是建立個人部落格，只要幾分鐘就能架好網站，熟悉Hugo 語法後，也有很高的彈性能再額外擴展自己想要的 UI 設計 / 擴充功能。
而且還是免費的！也不用額外再租用主機與購買網域，省去很多時間，剩下的時間可以專注在內容創作上。