每個 App 開發者都需要一個開發者網站，用來放隱私政策、app-ads.txt、作品集頁面等等。我一開始考慮過 GitHub Pages，但後來選了 Cloudflare Pages，用了快兩年，完全免費而且非常穩定。這篇就來分享我的部署經驗。
為什麼選 Cloudflare Pages？
市面上免費的靜態網站託管服務不少，常見的有 GitHub Pages、Netlify、Vercel 和 Cloudflare Pages。我最後選 Cloudflare Pages 的原因：
- 完全免費：不限頻寬，每月 500 次建置，對個人開發者來說綽綽有餘
- 全球 CDN：Cloudflare 在全球有超過 300 個資料中心，包含台灣的節點，訪問速度很快
- 自動 HTTPS：不需要自己設定 SSL 憑證
- GitHub 整合：推上
main分支就自動部署，零設定 - 自訂網域：免費支援自訂網域，而且 Cloudflare 本身就是 DNS 服務商，設定超簡單
對比之下，GitHub Pages 雖然也免費，但不支援自訂建置指令（只能用 Jekyll），而且 CDN 節點在亞洲相對少。Netlify 免費方案有 100GB 頻寬限制。Cloudflare Pages 基本上沒有這些顧慮。
事前準備
你需要：
- 一個 GitHub 帳號
- 一個 Cloudflare 帳號（免費註冊）
- 你的靜態網站專案（純 HTML 或 Hugo 等靜態網站產生器都可以）
部署純靜態 HTML 網站
如果你的專案就是幾個 HTML 檔案，不需要任何建置步驟，部署非常簡單。
步驟一：將專案推到 GitHub
確保你的專案已經在 GitHub 上有一個 repository。基本的目錄結構像這樣：
├── index.html
├── app-ads.txt
├── privacy/
│ └── my-app.html
└── styles.css
步驟二：連結 Cloudflare Pages
- 登入 Cloudflare Dashboard
- 在左側選單找到「Workers & Pages」
- 點「Create」→「Pages」→「Connect to Git」
- 授權 Cloudflare 存取你的 GitHub，選擇你要部署的 repository
- 設定建置選項：
- Production branch：
main - Build command：留空（純靜態不需要建置）
- Build output directory：留空或填
/（根目錄就是輸出目錄）
- Production branch：
- 點「Save and Deploy」
就這樣！Cloudflare 會自動拉取你的程式碼並部署。部署完成後會給你一個 *.pages.dev 的網址，馬上就能存取。
部署 Hugo 部落格
如果你用 Hugo 作為靜態網站產生器（像我現在的部落格），設定稍微多一點點。
Hugo 專案結構
├── config/
│ └── _default/
│ └── hugo.toml
├── content/
│ └── zh-tw/
│ └── blog/
│ └── my-post.md
├── layouts/
├── static/
└── themes/
建置設定
在 Cloudflare Pages 的設定中：
- Build command：
hugo --minify - Build output directory：
public - Environment variables：
HUGO_VERSION=0.145.0（或你使用的版本）
Hugo 版本這個環境變數很重要。Cloudflare 預設的 Hugo 版本可能很舊，不設定的話建置很可能會失敗。我之前就因為這個卡了好一陣子。
設定方式
你也可以在專案根目錄建立一個 wrangler.toml 或直接在 Cloudflare Dashboard 設定環境變數。如果想讓設定跟著版本控制走，也可以用 .node-version 或 .hugo-version 檔案。
自訂網域設定
Cloudflare Pages 預設給你的 *.pages.dev 網址已經可以用了，但如果你想用自己的網域，設定也很簡單。
如果網域已經在 Cloudflare
如果你的網域本來就是在 Cloudflare 管理 DNS，那設定超級方便：
- 到你的 Pages 專案 →「Custom domains」
- 輸入你的網域，例如
www.yourdomain.com - Cloudflare 會自動幫你新增 CNAME 記錄
- SSL 憑證會自動產生，通常幾分鐘就搞定
如果網域在其他地方
如果你的網域是在其他註冊商（例如 GoDaddy、Namecheap），你可以：
方法一：把 DNS 轉移到 Cloudflare（推薦）
- 在 Cloudflare 新增你的網域
- 到你的網域註冊商，把 nameserver 改成 Cloudflare 提供的
- 等 DNS 生效（通常幾小時到一天）
- 然後就和上面一樣設定 Custom domain
方法二：在原本的 DNS 加 CNAME 記錄
指向你的 *.pages.dev 網址。但這樣就不能享受 Cloudflare 的完整功能。
我自己的經驗是直接把 DNS 搬到 Cloudflare 最省事。Cloudflare 的 DNS 服務本身就是免費的，速度也快，沒有理由不用。
自動部署流程
Cloudflare Pages 和 GitHub 連結後，每次你推程式碼到指定的分支，就會自動觸發部署。這是我日常的工作流程：
# 寫好內容後
git add .
git commit -m "feat: add new blog post"
git push origin main
推上去之後，Cloudflare 會自動開始建置和部署，通常在一分鐘內就完成了。你可以在 Cloudflare Dashboard 看到每次部署的狀態和日誌。
Preview Deployments
除了正式部署，Cloudflare Pages 也支援 Preview Deployments。當你推到非 main 的分支（例如開 PR 的分支），Cloudflare 會自動部署一個預覽版本，給你一個獨立的 URL 可以先確認效果。這在多人協作或是你想先預覽文章時很方便。
進階設定
重新導向規則
如果你需要設定重新導向（redirect），在專案根目錄建立一個 _redirects 檔案：
/old-page /new-page 301
/blog/* /zh-tw/blog/:splat 302
自訂 Headers
同樣在根目錄建立 _headers 檔案：
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
/app-ads.txt
Content-Type: text/plain
Cache-Control: public, max-age=86400
這對 app-ads.txt 特別有用。廣告平台的爬蟲需要能正確讀取這個檔案，設定正確的 Content-Type 和 Cache-Control 可以確保一切順利。
Cloudflare Web Analytics
Cloudflare 還提供免費的 Web Analytics，不需要在網頁中加任何 JavaScript（和 Google Analytics 不同）。在 Dashboard 的「Web Analytics」中啟用，就能看到基本的流量數據。對注重使用者隱私的開發者來說，這是一個很好的選擇。
常見問題排解
建置失敗
最常見的原因是 Hugo 版本不對。檢查環境變數 HUGO_VERSION 是否和你本地使用的版本一致：
hugo version
404 錯誤
確認 Build output directory 設定正確。Hugo 的輸出目錄是 public，純靜態網站可能是 / 或 dist。
自訂網域 SSL 錯誤
通常等幾分鐘就好了，Cloudflare 會自動產生和配置 SSL 憑證。如果超過一小時還有問題，到 SSL/TLS 設定確認模式是「Full」或「Full (strict)」。
費用比較
最後整理一下各平台的免費方案比較：
| 平台 | 頻寬 | 建置次數/月 | 自訂網域 | 建置指令 |
|---|---|---|---|---|
| Cloudflare Pages | 無限 | 500 | 免費 | 支援 |
| GitHub Pages | 100GB | 無限 | 免費 | 僅 Jekyll |
| Netlify | 100GB | 300 分鐘 | 免費 | 支援 |
| Vercel | 100GB | 6000 分鐘 | 免費 | 支援 |
對個人開發者和小型網站來說，Cloudflare Pages 的無限頻寬和全球 CDN 確實是最有吸引力的。
結語
Cloudflare Pages 是我目前最推薦的靜態網站託管方案。設定簡單、部署快速、完全免費，而且背後有 Cloudflare 的全球基礎設施支撐。不管你是要放一個簡單的開發者網站、App 的隱私政策頁面，還是一個完整的 Hugo 部落格，Cloudflare Pages 都能輕鬆勝任。
希望這篇教學對你有幫助。如果你也在用 Cloudflare Pages，歡迎分享你的使用經驗！