Cloudflare Pages 免費建站教學 2026：5 分鐘部署靜態網站
Cloudflare Pages 提供無限免費靜態網站部署，支援 Next.js、Astro、Hugo，全球 CDN 速度超快。本文手把手教學 5 分鐘上線，並比較何時應升級到 Zeabur 跑後端服務。
Cloudflare Pages 免費計劃提供無限靜態網站部署、每月 500 次 build、全球 CDN，並支援自定義域名。連接 GitHub 後 5 分鐘內可以上線，零月費。Next.js、Astro、Hugo 等主流框架開箱即用，香港用家延遲低至 20-50ms，係 2026 年性價比最高的靜態建站選擇。
唔少人以為建網站一定要付 server 月費。靜態網站其實可以完全免費，而且速度比一般共享主機更快。Cloudflare Pages 係目前最完善的免費靜態建站平台，憑藉 Cloudflare 全球 300+ 節點網絡，任何地方訪問都極速。呢篇文章教你 5 分鐘部署，並講清楚免費計劃嘅實際限制。
Cloudflare Pages 係咩？點解適合香港用家？
Cloudflare Pages 係 Cloudflare 推出嘅靜態網站部署服務。「靜態」意思係網站內容係預先生成嘅 HTML/CSS/JS 文件，唔需要即時查詢資料庫，因此可以直接放喺 CDN 上全球分發。
點解特別適合香港用家？
延遲極低。 Cloudflare 喺香港有多個 PoP（Point of Presence）節點，本地用家訪問時延遲低至 20-50ms，比一般美國 server（150-200ms）快 3-4 倍。
無限請求。 免費計劃唔限制流量或帶寬，唔會因為訪問量增加而收費，對剛起步嘅個人網站或 side project 係大優點。
自定義域名免費。 連接自己的域名完全免費，包括自動 SSL 憑證，其他平台可能要付費才有呢個功能。
DDoS 防護內置。 作為世界最大 CDN 供應商之一，Cloudflare Pages 天然繼承 DDoS 防護，唔需要額外付費。
5 步部署靜態網站
Step 1：連接 GitHub
登入 Cloudflare Dashboard（dash.cloudflare.com），左側選單揀「Pages」，點擊「Create a project」。
選擇「Connect to Git」，授權連接你的 GitHub 帳號。選好你想部署的 repository，點擊「Begin setup」。
Step 2：選擇框架預設
Cloudflare Pages 自動偵測大部分框架。如果偵測唔到，手動揀：
- Next.js：選「Next.js」
- Astro：選「Astro」
- Hugo：選「Hugo」
- 純 HTML：選「None」（唔需要 build）
Step 3：配置 Build Settings
系統會預填 build 指令，一般唔需要修改：
- Build command： 例如
npm run build（Next.js）、astro build（Astro）、hugo（Hugo） - Build output directory： 例如
out或.next（Next.js）、dist（Astro）、public（Hugo） - Root directory： 通常留空（即 repo 根目錄）
如果用 Next.js 靜態導出，記得喺 next.config.js 設置 output: 'export'，否則 Pages 唔支援 Server Components。
Step 4：Deploy
點擊「Save and Deploy」。Cloudflare 會自動：
- Clone 你的 repo
- 安裝依賴（npm install / yarn）
- 執行 build 指令
- 將 output 推上全球 CDN
首次 deploy 約需 1-3 分鐘。之後每次 push 到 GitHub，Cloudflare Pages 自動重新部署。
Step 5：設置自定義域名
部署完成後，你會有一個 *.pages.dev 的免費域名。如需用自己嘅域名：
- Pages 項目頁面點擊「Custom domains」
- 輸入你的域名（例如
yoursite.com） - 如果域名喺 Cloudflare 管理，自動配置；如在其他 registrar，按提示加 CNAME record
- SSL 憑證自動配置，幾分鐘生效
支援框架列表
| 框架 | Build 指令 | Output 目錄 | 備註 |
|---|---|---|---|
| Next.js（靜態） | next build | out | 需設 output: 'export' |
| Astro | astro build | dist | 完全支援 |
| Hugo | hugo | public | 支援 extended 版本 |
| Gatsby | gatsby build | public | 支援 |
| Nuxt（靜態） | nuxt generate | .output/public | 需靜態模式 |
| SvelteKit（靜態） | vite build | build | 需 adapter-static |
| VitePress | vitepress build docs | docs/.vitepress/dist | 適合文檔站 |
| 純 HTML | 無需 build | /（根目錄） | 直接部署 |
免費 Plan 限制是什麼？
了解限制係避免踩坑嘅關鍵。 免費計劃唔係無限，有幾個重要上限：
每月 500 次 Build： 每次 push 到 GitHub 觸發一次 build。對個人網站通常綽綽有餘，但如果係 CI/CD 頻繁部署嘅項目需要留意。超出後需升級到 $20/月嘅 Pro Plan（無限 builds）。
Pages Functions 調用： 如果你用 Cloudflare Pages Functions（相當於簡單 serverless 函數），免費計劃每日 100,000 次調用。超出後需購買 Workers Paid Plan（$5/月起）。
Concurrent Builds： 免費計劃同一時間只能跑 1 個 build 任務，如果你有多個項目同時 push，會排隊。Pro Plan 支援 5 個並行。
Branches： 支援無限 preview branches，每個 branch push 都會有獨立 preview URL，方便 staging 測試。免費計劃同樣支援。
Cloudflare Pages vs Vercel vs Zeabur
| 功能 | Cloudflare Pages | Vercel | Zeabur |
|---|---|---|---|
| 靜態網站 | 免費，無限帶寬 | 免費（有流量上限） | 支援（按資源收費） |
| 後端 API | Pages Functions（有限） | Serverless Functions | 完整後端支援 |
| 資料庫 | D1（SQLite，beta） | 需整合外部 | PostgreSQL/MySQL 一鍵建立 |
| 香港節點 | 香港 PoP（CDN） | 香港 Edge（CDN） | 香港 Region（真實 server） |
| 月費 | 免費起步 | 免費起步（$20 Pro） | $5 起 |
| Next.js 支援 | 靜態模式（限制） | 完整支援（官方合作） | 完整支援 |
| 適合 | 純靜態網站、Hugo、Astro | Next.js 全棧 | 後端服務、bot、API |
選擇邏輯：
- 靜態內容展示站：Cloudflare Pages
- Next.js 全棧（需要 SSR/Server Actions）：Vercel
- 後端 API、資料庫、長期運行服務：Zeabur
何時需要從 Pages 升級到 Zeabur？
Cloudflare Pages 功能強，但係靜態優先平台。以下情況需要轉用後端服務平台：
需要持續運行的後端 API
Pages Functions 係 Serverless，每次請求啟動，冇狀態、冇持久連接。如果你的應用需要 WebSocket、長時間任務、定時排程，Pages Functions 唔適合。
需要資料庫
D1（Cloudflare 的 SQLite 資料庫）仍係 beta 狀態，功能有限制。如果需要 PostgreSQL、MySQL、Redis，需要另外連接外部資料庫服務，增加複雜度。
Telegram Bot 或排程任務
Bot 需要持續運行監聽 webhook，排程任務（cron job）需要 server 環境。Cloudflare Workers 可以做到部分，但複雜邏輯管理起來費事。
跑 Python / Django / FastAPI 後端
Pages 唔支援 Python。Python 後端需要真實 server 環境。
呢類場景，Zeabur 係最直接嘅升級路徑。 HK 節點、支援所有語言、一鍵連 DB、Git 自動部署，同 Cloudflare Pages 嘅工作流一脈相承，切換成本低。
一個典型架構係：靜態前端繼續放 Cloudflare Pages（免費、全球極速），後端 API 和資料庫放 Zeabur（HK 節點、低延遲），兩者各司其職，成本最優。
常見問題
Q：Cloudflare Pages 支援 Next.js App Router 嗎？
A：部分支援。Next.js 靜態導出（output: 'export'）完全支援；但 Server Components、Server Actions、App Router 嘅動態功能唔支援，因為 Pages 係靜態平台。需要完整 Next.js 功能建議用 Vercel 或 Zeabur。
Q：免費計劃可以用幾多個網站？ A：Cloudflare Pages 免費計劃唔限制項目數量，可以建立多個獨立嘅 Pages 項目。但同一時間 Concurrent Build 只有 1 個。
Q：Cloudflare Pages 的 SSL 憑證需要付費嗎？ A：完全免費。包括自定義域名的 SSL 憑證，自動續期，唔需要任何操作。
Q：Pages 適合做電商嗎？ A：靜態電商（例如 Shopify Hydrogen 靜態模式、或者前端靜態 + 第三方支付 API）可以用 Pages。但如果需要自建後台、管理庫存、處理訂單邏輯，需要後端服務配合。純展示型目錄電商係合適的。
💡 讀者限時優惠
輸入優惠碼
zeabur10結帳即享 10% 折扣。Starter Plan 另有每月 $5 免費 credits，輕量 side project 零成本試用。優惠碼長期有效，但隨時可能更改。