用 Hugo + Github Action 打造自動更新的個人靜態網站

前言：從一篇文章開始的靈感¶

感謝 kucw 的教學文，讓我認識了 Hugo 和 GitHub Pages。

先前我已經透過 Streamlit 打造自己的動態網站，雖然可以即時執行程式，但因需要額外運算資源且定期需重啟，於是我希望能有一個常駐、穩定且支援自動更新的靜態網站。

這篇文章紀錄我如何一步一步用 Cursor、Hugo、GitHub Actions 建立個人網站。
👉 網站連結：dan-blog.com

一、技術架構概覽¶

本專案使用到的工具與技術如下：

二、實作流程詳解¶

1. 使用 Cursor + Hugo 開發網站內容¶

• 使用 Cursor 提高開發效率，藉由 AI 輔助修改文章與程式碼。
• 利用 prompt 搜尋、下載合適的 Hugo 主題（theme），並進行客製化。
• 完成內容撰寫與版面調整後，在本地端測試網站。

2. 利用 GitHub Pages 架站¶

• 使用 Hugo 產生 public/ 靜態網頁資料夾。
• 將 public/ 部署至 GitHub，透過 username.github.io 模式建立公開網站。

3. 加入動態更新：GitHub Actions + Python¶

• 因為 Hugo 為靜態網站，無法即時更新資料，例如：RSS 訂閱、外部統計等。
• 在私有儲存庫撰寫 Python 腳本，定期抓取資料或產生更新內容（Markdown / JSON）。
• 使用 GitHub Actions 設定排程任務（cron job）：
• 執行 Python 腳本
• 將更新內容 Commit 並 Push 至公開 Hugo 網站 repo
• GitHub Pages 自動重新部署新內容。

🙏 特別感謝 zhgchg 的 GitHub Actions 教學文，提供完整 CI/CD 教學範例。

三、什麼是 Cursor、GitHub Pages、GitHub Actions？¶

🔧 Cursor 是什麼？¶

• 類似 Visual Studio Code 的編輯器
• 內建 AI 助手功能
• 支援 Chat 介面、解釋程式碼、快速重構等

🌍 GitHub Pages 是什麼？¶

• GitHub 提供的免費靜態網站托管服務
• 適合用於部落格、個人頁面或技術文件網站

⚙️ GitHub Actions 是什麼？¶

• GitHub 的 CI/CD 工具
• 支援：
• Push 時自動部署
• 設定定時排程（cron）
• 自訂觸發流程執行任務

四、後記與下一步¶

雖然這個專案概念簡單，但實作過程整合了：

• 前後端開發流程
• CI/CD 自動化部署
• 定時排程與資料更新

✅ 下一步規劃¶

• 增加留言系統（如 Disqus 或 Giscus）
• 監控 GitHub Actions 任務結果與 Log
• 加入資料視覺化與 API 查詢功能

📬 歡迎交流¶

如果你也對 Hugo + GitHub Actions 有興趣，歡迎 Fork 本專案、留言交流或分享你的應用案例！

• GitHub: @1daniel3333
• Medium: @p123456dan.mse99