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

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

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

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

先前已經透過streamlit 打造屬於自己的網站，有點是動態可以當下執行程式，但也因為會需要額外運算資源，定期需要重開網站，因此希望有個常駐的網站，還能整合自動更新功能。

這篇文章紀錄我如何一步一步用 Cursor、Hugo、GitHub Actions 建立自己的個人網站。 網站連結: https://1daniel3333.github.io/about/

一、技術架構概覽¶

• 本專案使用到的技術：
• Cursor：AI 友善的開發環境，類似 VSCode，但內建 AI 協作功能。
• Hugo：輕量級靜態網站產生器，適合技術人快速打造部落格或文件站。
• GitHub Pages：用 GitHub 免費托管靜態網頁。
• GitHub Actions：CI/CD 自動化工具，可設定類似 crontab 的排程任務。

二、實作流程詳解¶

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

• 透過 Cursor 提高開發效率，AI 輔助修改文章或程式碼。
• 用 prompt 搜尋與下載合適的 themes 並客製化內容。

2. 利用 GitHub Pages 架站¶

• 將 Hugo 產生的 public/ 資料夾部署到 GitHub Pages。
• 選擇用 username.github.io 的方式建立個人網站。

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

• 因為 Hugo 是靜態網站，資料需要定時更新（例如訂閱服務）。
• 我在私有 repo 中撰寫 Python 腳本爬取或更新內容。
• 使用 GitHub Actions 設定定時任務，自動：執行 Python 腳本以及Commit & Push 結果到 public 網頁的 repo
• 感謝 zhgchg 的 GitHub Actions 教學文 提供完整範例。

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

🔧 Cursor 是什麼？¶

• 類似 Visual Studio Code，但內建 AI 輔助功能。
• 支援 chat-style 編輯、解釋程式碼、快速重構。

🌍 GitHub Pages 是什麼？¶

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

⚙️ GitHub Actions 是什麼？¶

• GitHub 提供的 CI/CD 工具。
• 可以設定 push 時自動部署、定時執行腳本、觸發工作流程等。

四、後記與下一步¶

專案雖然簡單，卻整合了前後端、CI/CD、自動排程的概念。

未來可以再擴充：

• 增加留言系統（如 Disqus）
• 監控 GitHub Action 的結果
• 加入 API 查詢與資料視覺化