使用 Hugo + Cloudflare Pages 打造個人自動化部落格

想要建立一個速度極快、且每次寫完文章只要 git push 就能自動更新的網站嗎？這篇文章將帶你利用 Hugo 靜態網站產生器，搭配 Cloudflare Pages 的自動化部署服務，建構個人部落格。

🛠 為什麼選擇這個組合？

原本使用 github page 進行架設，但由於 repo 必須公開，因此決定改用 cloudflare pages 連接 github repo，設定上也比想像中簡單，並且在 每次git push 後會自動執行 gtihub actions 以及更新網站，確保網頁運作正常。

第一步：在本地端架設 Hugo 站點

首先，我們要在你的電腦上建立網站的雛型，並挑選一個主題。

1. 安裝 Hugo

請根據你的作業系統執行安裝指令：

• macOS (Homebrew): brew install hugo
• Windows (PowerShell): winget install Hugo.Hugo.Extended
• 驗證安裝: 開啟終端機輸入 hugo version，確認看到版本號。

2. 建立新專案

開啟終端機，輸入以下指令建立網站資料夾：

hugo new site my-blog
cd my-blog

3. 加入網站主題 (Theme)

前往 Hugo Themes 挑選主題。這裡以本站使用的 Clean White 為例：

git init
git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

提示：建議可以把 theme fork 到自己的 GitHub，add submodule 時加入自己 fork 的 repo，需要修改時改較方便。

此時的 my-blog 資料夾中應該有一個 themes 的資料夾，裡面有剛剛加入的 hugo-theme-cleanwhite 資料夾。

4. 基礎配置與預覽

這邊建議直接參考 /themes/hugo-theme-cleanwhite/exampleSite 裡面的 content 資料夾結構，以及複製 hugo.toml 覆蓋 /my-blog 中的檔案後在編輯內容。

輸入 hugo server -D，即可前往 http://localhost:1313 預覽網站。

第二步：將專案推送至 GitHub

1. 在 GitHub 上建立一個新的儲存庫 (Repository)。
2. 建立 .gitignore 檔案，內容填入 /public。
3. 執行 Git 指令將代碼推送到雲端：

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin [你的儲存庫網址]
git push -u origin main

第三步：串接 Cloudflare Pages 進行部署

1. 建立 Pages 專案：登入 Cloudflare，進入 Workers & Pages > Create application > Pages，選擇 Connect to Git。
2. 選取儲存庫：連結你的 GitHub 帳號並選取剛才建立的專案。
3. 構建設定 (Build Settings)：
   • Framework preset: 選擇 Hugo
   • Build command: hugo --gc --minify
   • Build output directory: public
4. 完成部署：點擊 Save and Deploy，網站即正式上線！部署完成後，可以透過預設的 domain 進行預覽。

💡 小結

現今已經建立好個人網站，未來購買網域後，只需在 Cloudflare Pages 的 Custom domains 標籤中新增你的網域，Cloudflare 就會自動幫你處理所有 DNS 與 SSL 設定。

• Next Post →