前言

當你用 AI 輔助完成了一個 React 專案，下一步就是把它放到網路上讓別人看到。這時候你需要一個「部署平台」。

Cloudflare Pages 是目前最受歡迎的靜態網站部署平台之一。這篇文章會帶你認識它，並教你完成帳號註冊。

Cloudflare Pages 是什麼？

Cloudflare Pages 是 Cloudflare 公司提供的靜態網站託管服務。簡單來說，它幫你把網站檔案放到全球各地的伺服器上，讓訪客可以快速載入你的網站。

核心概念

靜態網站 vs 動態網站

• 靜態網站：每個人看到的內容都一樣，像是公司介紹頁、作品集
• 動態網站：根據使用者不同顯示不同內容，像是 Facebook、Gmail

React 專案經過打包（build）後，就會變成靜態檔案，非常適合用 Cloudflare Pages 部署。

CDN（內容傳遞網路）

Cloudflare 在全球有超過 300 個資料中心。當你部署網站後，檔案會自動複製到這些地點。訪客會從最近的資料中心載入網站，速度超快。

[你的網站檔案]
      |
      v
[Cloudflare 全球 CDN]
   /    |    \
  v     v     v
[台北] [東京] [洛杉磯] ... (300+ 地點)
      |
      v
[訪客從最近的點載入]

Cloudflare Pages 的三大優勢

1. 慷慨的免費額度

對於個人專案或小型團隊來說，免費版完全夠用。

2. 自動 HTTPS

HTTPS 是網站安全的基本要求，很多瀏覽器會對沒有 HTTPS 的網站顯示「不安全」警告。

Cloudflare Pages 會自動幫你：

• 申請 SSL 憑證
• 設定 HTTPS
• 自動更新憑證

你不需要做任何設定，部署完就直接有 HTTPS。

3. 簡單的 Git 整合

連接 GitHub 或 GitLab 後：

[推送程式碼到 GitHub]
         |
         v
[Cloudflare 自動偵測]
         |
         v
[自動執行 build]
         |
         v
[自動部署到全球 CDN]

每次 git push 就會自動更新網站，完全不需要手動操作。

與其他平台比較

Cloudflare Pages vs Vercel vs Netlify

什麼時候選 Cloudflare Pages？

適合使用的情境：

• 靜態網站、SPA（Single Page Application）
• 需要高流量但預算有限
• 已經在用 Cloudflare 其他服務（DNS、防護）
• 希望全球載入速度都快

可能需要考慮其他選項的情境：

• 需要複雜的伺服器端運算（可考慮 Vercel + Next.js）
• 團隊已經熟悉其他平台
• 需要更多進階功能的免費版

簡單建議

帳號註冊流程

步驟 1：前往註冊頁面

開啟瀏覽器，前往：https://dash.cloudflare.com/sign-up

步驟 2：填寫註冊資訊

• Email：輸入你的電子郵件
• Password：設定密碼（至少 8 個字元）
• 勾選同意服務條款
• 點擊「Sign up」

步驟 3：驗證電子郵件

Cloudflare 會寄一封驗證信到你的信箱，點擊信中的連結完成驗證。

步驟 4：選擇方案

出現方案選擇畫面時，選擇「Free」免費方案即可。

Dashboard 介面導覽

註冊完成後，你會看到 Cloudflare Dashboard。找到左側選單的「Workers & Pages」：

Cloudflare Dashboard
├── Home
├── Websites（網域管理）
├── Workers & Pages  <-- 這裡！
│   └── Overview
│   └── Create（建立新專案）
├── ...

點進「Workers & Pages」後：

• Overview：查看所有已部署的專案
• Create：建立新的 Pages 專案

建立專案的兩種方式

1. 連接 Git：連接 GitHub/GitLab，自動部署
2. 直接上傳：手動上傳打包好的檔案

下一篇文章會教你用第一種方式部署 React 專案。

什麼樣的專案適合 Cloudflare Pages？

非常適合

• React、Vue、Angular 等 SPA
• 靜態網站生成器（Gatsby、Hugo、Astro）
• 純 HTML/CSS/JavaScript 網站
• 作品集、部落格、文件網站

需要搭配其他服務

• 需要資料庫：搭配 Cloudflare D1 或其他雲端資料庫
• 需要後端 API：搭配 Cloudflare Workers
• 需要用戶認證：搭配 Auth0、Clerk 等服務

不適合

• 需要傳統伺服器的應用（如 WordPress）
• 需要長時間運算的任務

重點整理

• Cloudflare Pages 是免費的靜態網站託管服務
• 主要優勢：無限頻寬、全球 CDN、自動 HTTPS
• 與 Vercel/Netlify 相比，免費額度最慷慨
• 適合部署 React 等前端專案
• 支援 Git 自動部署，推送即上線

下一步

完成帳號註冊後，下一篇文章會教你：

• 連接 GitHub 帳號
• 設定 React 專案的建置指令
• 完成第一次部署

系列文章

• #01 Cloudflare Pages 是什麼？為什麼選它？（本篇）
• #02 連接 GitHub 並部署 React 專案
• #03 設定自訂網域
• #04 進階設定與常見問題