1.4 註冊帳號與第一個網站：三分鐘上線 HelloWorld#

本節目標#

完成 Cloudflare 帳號註冊，認識 Dashboard 的關鍵分區。
用兩條路徑（Git 整合、wrangler CLI）部署第一個靜態網站到全球邊緣。
驗證部署結果，理解每次部署背後發生了什麼。

註冊帳號#

前往 dash.cloudflare.com/sign-up，以 Email 註冊（免了信用卡，Free 方案即可完成本書全部練習）。
登入後的 Dashboard 側欄，重點四大分區：

分區	本章用到	之後章節
Websites（加入網站）	自訂網域時	第 2 章
Workers & Pages	本章主舞台	所有章節
Zero Trust	—	第 5 章
Account / API Tokens	CLI 權限	PDT 上線時

提醒：不需要立即「Add a site」把自己的網域加進來。Workers 與 Pages 專案會自動拿到 *.pages.dev、*.workers.dev 免費子網域，本章全程用不到自訂網域。

路徑 A：直接在 Dashboard 建立靜態頁#

對純 HTML 學習者最快：

Dashboard → Workers & Pages → Create → Pages → Upload assets。
專案名 hello-world，上傳一個資料夾，內含 index.html：

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <title>Hello Cloudflare</title>
  <style>
    body { font-family: system-ui; display: grid; place-items: center;
           height: 100vh; margin: 0; }
    h1   { font-size: 3rem; }
  </style>
</head>
<body>
  <h1>Hello, Cloudflare 邊緣網路!</h1>
  <p>部署時間：<span id="t"></span></p>
  <script>document.getElementById('t').textContent = new Date().toLocaleString();</script>
</body>
</html>

按 Deploy，數秒後得到 https://hello-world.pages.dev —— 這個網站此時已在 300+ 個城市可被就近訪問。

路徑 B：wrangler CLI（本書主路徑）#

真實專案需要可重現的建置流程，本書採 CLI 為主、Git 整合為輔。wrangler 是 Cloudflare 的官方 CLI（相當於 Vercel 的 vercel、Heroku 的 heroku CLI）。

# 1. 安裝 wrangler（建議用 pnpm/npm 皆可）
npm install -g wrangler

# 2. 登入（會開瀏覽器授權）
wrangler login

# 3. 確認登入狀態
wrangler whoami

建立本地專案並部署：

mkdir hello-cf && cd hello-cf
# 放一個 index.html（同上）進來

# 部署為 Pages 專案（首次會問專案名）
wrangler pages deploy . --project-name=hello-cf

輸出：

✨ Deployment complete! Take a peek over at
   https://abc1234.hello-cf.pages.dev

路徑 B 補充：搭配 Git（推薦長期使用）#

在 GitHub 推上 repo，把 Pages 專案連到該 repo（Dashboard 的 Pages → Create → Connect to Git），之後每個 push 到 main 就自動重建部署。這是標準 CI/CD 起點，本地 wrangler 反而只是預覽用的補充工具。

驗證部署#

# 看回應 header，確認是被邊緣網路服務的
curl -I https://hello-cf.pages.dev

# 應該看到（節錄）：
#   cf-ray: 8xxxxxx...TPE    <-- 落地的 PoP（台北）
#   server: cloudflare
#   alt-svc: h3=":443"       <-- HTTP/3 支援

cf-ray 結尾的 TPE 表示你這條請求被台北 PoP 服務；用 VPN 切到美國再 curl，結尾會變成其他機場代碼 —— 這就是 1.2 節 Anycast 與 PoP 概念的實證。

這三分鐘發生了什麼？#

你 (本機 hello-cf/)
   │ wrangler pages deploy
   ▼
Cloudflare 全球邊緣網路                     .pages.dev
   ├─ 上傳 build 產物 (檔案 → 邊緣分佈)  ──→  全球 300+ PoP 各自可讀取
   ├─ 發簽 TLS 憑證 (萬用子網域 *.pages.dev) ──→  HTTPS 開箱即用
   └─ 產生 preview URL (每次部署唯一)    ──→  abc1234.hello-cf.pages.dev

三件你不用做的事：租機器、申請 TLS 憑證、設定 CDN —— 這正是 1.3 節所說的「VPS 賣機器、Cloudflare 賣部署結果」。

常見坑#

wrangler pages deploy 中途取消會留下殘缺的 deployment；到 Dashboard 的 Pages 專案刪掉失敗版本即可。
上傳中文檔名的靜態資源會遭遇 URL encoding 問題，統一用 ASCII 檔名。
*.pages.dev 在部分網路環境被 DNS 污染（中國、部分校園網路），會「打不開」，不是部署失敗 —— 用 VPN 驗證、或之後章節綁定自訂網域解決。

小結與練習#

重點回顧

註冊完全不需要信用卡，Free 方案足以涵蓋本書全部練習。
兩條部署路徑：Dashboard 上傳（最快）/ wrangler CLI（可重現）；長期正式專案走 Git 整合。
cf-ray 機場代碼是驗證 Anycast 就近服務最直接的證據。

練習

用 curl -I 分別觀察 cf-ray 在 (a) 本機直連 (b) VPN 切換後的差異，記錄三次不同 PoP 代碼。
把 index.html 改造成一個倒數到 2027-01-01 的計時頁，重新 deploy，觀察 preview URL 與 production URL 的差別。
比較 wrangler pages deploy（純上傳）與「Git 連 repo 自動部署」的工作流程差異，列出各自最適用的三種場景。