VCA

部署到 Cloudflare Pages

把做好的網站上線到 Cloudflare Pages：連 Git 自動部署、build 設定、自訂網域，新手一次搞懂。

發布於 更新於 審閱於 閱讀約 1 分鐘編輯方針#實作指南#部署#Cloudflare
屬於路線作品集路線

一句話解釋

Cloudflare Pages 連上你的 Git，之後每次 push 就自動 build 並上線——上線不該是一件難事。

你會做出什麼

一個連上 Git、每次 push 自動部署的網站，並掛上你自己的網域，全程在免費額度內。

上線不該很難

很多新手卡在「做好了，但不知道怎麼讓別人看到」。Cloudflare Pages 把這件事變得很簡單：把程式碼連上 Git，之後每次 push，它就自動幫你 build 並上線到全球。

三種上線方式

  1. 連 Git（最推薦）：連上 GitHub / GitLab，push 即自動部署，還會自動產生「預覽版」網址。
  2. 直接上傳：把 build 好的輸出資料夾拖進 Dashboard，適合一次性的靜態站。
  3. Wrangler CLI：用指令 wrangler pages deploy 部署，適合想寫進腳本自動化的人。

連 Git 的步驟（白話版）

  1. 把專案推上 GitHub。
  2. Cloudflare Dashboard → Workers & Pages → 建立 Pages 專案 → 連你的 repo。
  3. 設定 build 指令（例如 npm run build）和輸出目錄（例如 out 或 dist）。
  4. 按部署，等它跑完，你會拿到一個 你的專案.pages.dev 網址。上線了。

push 之後發生什麼

掛上自己的網域

*.pages.dev 可以直接用，但要更專業就掛自己的網域：在 Pages 專案的「自訂網域」加入你的網域，照指示設定 DNS。如果網域本來就放在 Cloudflare，這一步幾乎是一鍵完成。

新手最常踩的坑

  • build 指令或輸出目錄填錯：部署成功但畫面空白，多半是輸出目錄指錯資料夾。
  • 環境變數 / Secret 沒設：本機能跑、線上壞掉，常常是少了環境變數。在 Pages 設定裡補上。
  • 把 Secret commit 進 Git：金鑰絕對不要進版控。用平台的 Secret 設定，別寫死在程式裡。

下一步

常見問題

部署成功但畫面一片空白，怎麼辦？

最常見的原因是「輸出目錄」設錯——Pages 拿去發佈的資料夾不是你真正 build 出來的那個（例如該填 out 卻填了根目錄）。其次是 build 指令錯或環境變數沒設。先檢查這三項，多半就能解決。

用免費方案部署，會有什麼限制？

免費方案對個人專案通常很夠，但要留意每月的 build 次數、頻寬與（若用 Functions）執行次數等額度。靜態網站幾乎不會踩到；若加了很多動態功能或流量很大，再評估升級。實際數字以官方 pricing 頁為準。

參考來源

  1. Cloudflare Pages docs — Cloudflare
  2. Cloudflare Plans & Pricing — Cloudflare

作品集路線 的下一步: Cloudflare →