快速摘要
Cloudflare Pages 提供免費的全球 CDN、自動 SSL 和簡單的 Git 整合。這篇教你把 AI 生成的網站安全地部署上去，包括 CSP、安全 headers 和自訂網域設定。
為什麼選 Cloudflare Pages
部署 AI 生成的靜態網站，Cloudflare Pages 是目前最好的免費選擇：
| 特性 | Cloudflare Pages | GitHub Pages | Vercel |
|---|---|---|---|
| CDN | 全球 300+ 節點 | 有限節點 | 全球 |
| 頻寬 | 無限 | 100GB/月 | 100GB/月 |
| Build 次數 | 500/月 | 無限 | 6000/月 |
| SSL | 自動 | 自動 | 自動 |
| 安全 Headers | 可自訂 | 有限 | 可自訂 |
| DDoS 防護 | 內建 | 無 | 有限 |
Cloudflare 的最大優勢是內建 DDoS 防護和 WAF（Web Application Firewall），這在其他免費方案中找不到。
設定步驟
- 建立 Cloudflare 帳號：到 dash.cloudflare.com 註冊
- 連接 Git 儲存庫：在 Pages 頁面點「Create a project」，連接 GitHub
- 選擇儲存庫和分支：選擇你的專案 repo 和要部署的分支（通常是 main）
- 設定 Build：如果是純 HTML，Build command 留空即可。如果是 Next.js 等框架，設定相應的 build 指令
- 部署：點 Deploy，等幾分鐘就完成了
安全 Headers 設定
這是最重要的步驟，也是多數教學忽略的部分。在專案根目錄建立 _headers 檔案：
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src fonts.gstatic.com每個 header 的作用：
- X-Frame-Options: DENY：防止你的網站被嵌入 iframe（防 Clickjacking）
- X-Content-Type-Options: nosniff：防止瀏覽器猜測 MIME 類型
- Referrer-Policy：控制 referer 資訊的傳遞
- Permissions-Policy：禁用不需要的瀏覽器 API
- CSP：限制可執行的腳本和資源來源
自訂網域
- 在 Cloudflare Pages 的設定中點「Custom domains」
- 輸入你的網域（例如 ai.feifei.tw）
- 如果網域的 DNS 已經在 Cloudflare 管理，會自動設定。否則需要手動新增 CNAME 記錄
- 等待 SSL 憑證生效（通常幾分鐘）
提示：把網域的 DNS 移到 Cloudflare 管理，可以獲得額外的安全功能，例如 DDoS 防護和 Bot 管理。
監控與分析
部署後建議設定：
- Web Analytics：Cloudflare 提供免費的隱私友善分析（不需要 cookie）
- Security Events：在 Cloudflare Dashboard 的 Security 頁面查看被擋下的攻擊
- Speed 測試：用 PageSpeed Insights 確認網站效能
- Uptime 監控：可以用 Cloudflare 的健康檢查或第三方工具（如 UptimeRobot）
常見問題
Cloudflare Pages 免費方案有什麼限制？
免費方案提供：無限網站、無限頻寬、每月 500 次 build、100 個自訂網域。對個人和小型專案完全足夠。
可以部署 Next.js 或 React 應用嗎？
可以。Cloudflare Pages 支援 SSR（透過 Workers）和 SSG。但純 SSR 應用建議用 Vercel，整合度更好。
怎麼設定自訂網域的 SSL？
Cloudflare Pages 會自動為自訂網域配置 SSL 憑證，不需要手動設定。通常在加入網域後幾分鐘內就會生效。