上一篇聊到網域、DNS 和部署的分工：店名有了、路標也設好了，店總得真的開起來吧？這篇就來聊「店面放哪裡」。

我自己的 Pocketool 就放在 Cloudflare 上。打開網址看到的是網站，背後則有 Cloudflare 的服務在幫忙把網頁送到訪客面前。

Cloudflare 不只會管 DNS

講到 Cloudflare，很多人第一個想到的是「網域設定」或「橘色雲朵」。但它也能放網站檔案、執行程式，還有存放檔案和資料的服務。名字突然變多，不用急著背，先用開店來看分工：

DNS 像路標，幫訪客找到網站；Static Assets 放 HTML、CSS、JavaScript 和圖片，好比店面裡已經擺好的東西。Worker 則像店員：有些請求不能只拿現成檔案，得先判斷、計算或查資料，就交給它處理。要存很多音檔，可以用 R2 這座倉庫；要記一筆筆使用者資料，則可以用 D1 這本帳本。（參考：Cloudflare Developers，Workers Static Assets、R2、D1）

重點是：這不是開店必買的全套設備。 如果你只是做一個作品集，可能只要把網頁檔案部署好就夠了，不需要一開始就碰 R2 或 D1。

那跟 GitHub Pages 有什麼不同？

前面示範過用 GitHub Pages 架網站。它很適合把 HTML、CSS、JavaScript 這類靜態檔案放上網。Cloudflare 也能做這件事；如果以後想讓網站處理 API、登入後的資料或其他需要在伺服器執行的邏輯，還能接著使用 Workers。（參考：Cloudflare Developers，Workers Static Assets、R2、D1）

Cloudflare 後台會看到「Workers 和 Pages」。Pages 仍然可以使用；目前 Cloudflare 的新專案文件則以 Workers 的靜態資源模式作為主要教學路線。對新手來說，先抓住一件事就好：不論選哪個入口，都要搞清楚「我要上傳哪個資料夾」，以及「部署完的網址在哪裡」。（參考：Cloudflare Developers，Static Assets: Get Started、Workers Git integration、Cloudflare Pages）

像 Vite 專案，平常的 npm run dev 只是本機預覽；要上線，通常得先執行建置，再把產生的 dist 資料夾交給部署平台。不是把整個專案資料夾隨手拖進去就好。

到後台走一遍：網站從哪裡放上去？

下面是我在 Cloudflare 後台實際看到的入口。我把重點框起來了；畫面只保留教學需要的區域，沒有放帳號資料。這裡是在看部署流程，沒有建立新網站，也沒有改動現有的正式站。

如果程式碼本來就放在 GitHub，我通常會先考慮連接儲存庫：選對專案、設定建置指令和輸出資料夾，之後推送更新，就能走自動部署流程。若只是想先試一個做好的靜態網站，也能選上傳靜態檔案，把建置後的內容交上去。這兩種方式的設定畫面和限制不完全一樣，請照你實際選的入口填。（參考：Cloudflare Developers，Static Assets: Get Started、Workers Git integration、Cloudflare Pages）

上傳後，先打開平台給的測試網址：首頁打得開嗎？圖片有沒有出來？內頁直接貼網址會不會變 404？這幾關過了，再去接自己的網域。平台網址都還沒通，就先不用急著改 DNS。

上面的 Pocketool 專案畫面，顯示網站已經對應到 pocketool.app。這是現有網站的例子，不是說剛才按了「建立應用程式」就會自動得到這個網域。自訂網域還需要在專案裡設定，並確認 DNS 指到正確的位置。

如果讓 AI 幫忙，部署可以怎麼做？

這一段其實很適合讓 AI 幫忙，但不要只丟一句「幫我放到 Cloudflare」。它還不知道你要部署哪個資料夾、網站怎麼建置，也不知道你現在是想先看做法，還是真的要動到正式網站。

如果是一般的 AI 對話，你可以貼上專案設定或錯誤訊息，請它幫忙解釋；如果使用能讀取專案的 AI Coding 工具，就可以請它檢查檔案、調整設定、跑建置。至於能不能操作 Cloudflare 後台，還是要看你有沒有授權給它。這幾種「幫忙」不是同一件事，就像前面聊過的 AI Chat 與 Agent一樣。

我會先請 AI 做盤點，還不要急著部署：

我想把目前這個網站放到 Cloudflare。
請先看專案，告訴我建置指令、輸出資料夾，以及目前有沒有 Cloudflare 相關設定。
再比較「連接 GitHub」和「上傳靜態檔案」，建議我這個專案先走哪一條路。
請列出會改哪些檔案、需要我提供什麼；先不要推送程式、部署網站或修改 DNS。

等我確認它找對專案、選對做法，再請它完成設定，執行建置和本機預覽。若畫面出錯，就把錯誤訊息交給它一起查；但建置成功不等於網站已經上線，這句話還是要自己記著。

真正要發布時，我會請它明確回報三件事：部署了哪個專案與輸出資料夾、可以打開的預覽或公開網址、這次有沒有碰到網域與正式環境設定。 如果專案連著 GitHub 自動部署，推送程式也可能讓新版上線，所以確認前不要把「幫我 Push」當成無害的最後一步。（參考：Cloudflare Developers，Static Assets: Get Started、Workers Git integration、Cloudflare Pages）

拿到網址後，我還是會自己用瀏覽器開一次：首頁、圖片、內頁都看過，手機也試一下。這跟前一篇的開店比喻一樣：店員說「門開了」，你也要真的走到門口看一下。😆 密碼或 API Key 也不要寫進要公開的前端檔案；有需要時，再用平台提供的秘密變數設定。

下一篇，我們就走進店裡看看：Pocketool 的「口袋單字王」有語音、有測驗紀錄，為什麼不能把這些東西通通塞進同一個網頁檔案？那就輪到 Worker、R2、D1 出場了。

文章同步發表於 https://book.casper.tw/it2026/cloudflare-deploy-website