Shuyu Pixelart

Hugo + Cloudflare Pages 架站全紀錄

這篇文章是只會用 Windows 的架站小白第一次把 Hugo 靜態網站部署上線的過程。

前情提要

在上週的文章提到我開始做個人網站。後來發現如果不使用靜態網站生成器，每次版面變動都需要手動修改所有文章，考慮到未來網站擴展，並不是很實際的方案。所以繞了一大圈，還是回到了 Hugo（我在搬到Bear Blog 的第一篇文章曾說我的終極目標是學習用 Hugo 做一個個人網站，經過 4 個月總算伏筆回收）。

在 ChatGPT 把我的半成品改爆無數次後，我投靠了 Claude，終於做出一個可以在本機跑起來的 Hugo 專案。接下來，我要把這個專案部署到 Cloudflare Pages，然後連接我在 Cloudflare 的網域。

newsite

一、把 Hugo 專案推到 GitHub

在此之前，我還沒有 GitHub 帳號，所以得先註冊一個。（題外話，我覺得註冊帳號時的拼圖驗證很難，我試了 3 次才好不容易成功。到底誰才是機器人！）

1-1. 在 GitHub 建立新 repo

1-2. 推上 GitHub

在 Windows PowerShell 執行：

cd 我的路徑\專案資料夾
git init
git add .
git commit -m "init"
git branch -M main
git remote add origin https://github.com/我的帳號/repo名稱.git
git push -u origin main

結果執行後出現

fatal: unable to auto-detect email address

這是我第一個踩到的坑。原因是我還沒有設定 Git 身份，Git 不知道這個 commit 是誰做的，所以拒絕執行。

所以我要先執行這兩行：

git config --global user.email "我的email@gmail.com"　＃email 要跟 GitHub 帳號一致
git config --global user.name "我的名字"

設定身份後，再執行一次剛才「git init ...」那一整段，瀏覽器會跳出 GitHub 登入視窗，用帳號密碼登入後，會問要不要授權 Git Credential Manager，點 Authorize 確認。接著會收到一封 GitHub 寄來的安全通知 e-mail。授權完成後回到 PowerShell，就會看到執行完成了。

二、在 Cloudflare Pages 建立專案

登入 Cloudflare，在左側選單找到組建> 運算> Workers 和 Pages

在這裡我又踩了一個坑。點進「建立應用程式」，預設是建立 Workers，一開始我沒注意就點下去，結果後面的設定頁面選項都很奇怪，才發現選錯了。底下有一排很小的字「想要部署 Pages? 開始使用」，要點這個才會進入部署 Pages 的畫面。

start

2-1. 連接 GitHub

2-2. 填寫建置設定

settings

選好 repo 之後，填入以下設定：

欄位 值
Framework 預設 Hugo
組建命令 hugo --minify
組建輸出目錄 public

據 AI 說，Cloudflare Pages 預設的組建命令是 hugo，但建議改成 hugo --minify 讓輸出檔案更小、載入更快。改完之後介面會跳出「重設到推薦設定」的提示，但在這裡我保持 hugo --minify。

2-3. 加上 HUGO_VERSION 環境變數

接著在頁面下方找到環境變數（進階），新增一筆：

變數名稱 值
HUGO_VERSION 本機的 Hugo 版本號
（在 PowerShell 輸入 hugo version 查，如：v0.153.0）

據 AI 說，Cloudflare 預設使用的 Hugo 版本很舊，可能會導致建置失敗或樣式跑版。指定版本號可以確保雲端和本機的行為一致。

2-4. 部署

設定完畢後點部署，就會得到一個 xxx.pages.dev 的網址，網站就正式上線了！

三、設定自訂網域

我在 Cloudflare 有自己的網域，接下來我想把這個 xxx.pages.dev 的網址，換成我自己的子網域。

3-1. 進入 Pages 專案的自訂網域設定

回到 Pages 專案，點上方的「自訂網域」。

3-2. 輸入網域

輸入想要的網域，我把它取名為 icons.shuyuart.com，然後按確認。

接著會出現這樣的畫面：

確認新的 DNS 記錄 Cloudflare 會新增這些 DNS 記錄，以啟動專案網站的 icons.shuyuart.com

不需要修改任何東西，直接點「啟用網域」即可。

因為網域本身就在 Cloudflare 管理，DNS 設定和 SSL 憑證都是全自動的，大約等一兩分鐘就能用 icons.shuyuart.com 打開網站了。

四、之後如何更新網站

在 PowerShell 執行：

git add .
git commit -m "說明這次改了什麼"
git push

Cloudflare 會自動偵測到新的 commit 並重新部署。

五、新增 .gitignore

後來才學到，並不需要把 Hugo 所有的資料夾都推上 GitHub，所以接著我要來新增一個 .gitignore

在 Hugo 專案根目錄（也就是有 hugo.toml 的地方），新增一個檔案，取名為 .gitignore（開頭有一個點，不可以刪掉）。

把以下內容複製貼在.gitignore 裡面：

public/  ＃Hugo 預設產生的資料夾
resources/
hugo_stats.json
.DS_Store  ＃作業系統產生的雜物
Thumbs.db
.vscode/  ＃編輯器的設定檔（選配）
.idea/

但在這之前，我已經把 public/ 推上 GitHub，就算現在補加 .gitignore，Git 還是會繼續追蹤它。

所以我需要叫 Git「放手」，執行指令：

cd 我的路徑\專案資料夾
git rm -rf --cached public

執行完後，再重新推一次：

git add .
git commit -m "chore: 從 Git 中移除 public 並新增 gitignore"
git push

如此如此這般這般，我的狡兔三窟終於完工了！不過目前只有房子外觀蓋好了，屋裡還空蕩蕩的，之後會慢慢新增圖片上去。

現在我有：

主軸還是部落格，在個人首頁和圖庫我要當米菲兔，最高品質靜悄悄。
（我本來想說某無嘴 KT 貓，可是 KT 貓其實會講話，而且講話還滿毒舌的。）


← | →

留言

關於網站改進的建議，還請不吝賜教，讓我納入下次更新時的參考。

這個留言板需要手動審核，留言不會馬上顯示。過幾天再來看看它吧
你也可以寫信給我 blog@shuyulin1127.com

#thoughts