怎樣把頁面發布到 Cloudflare Workers

資料夾裡有做好的頁面，就是沒有連結。我們把它發布到 Cloudflare Workers 上，把整個流程交給 Claude Code：建立一個 skill，讓發布和更新都變成一句簡短的請求。

1. 靜態站台用的 Cloudflare Workers 是什麼

Workers 這個詞聽起來像"跑在伺服器上的程式"，這話沒錯，但不是全部：您可以幫 Worker 掛上一個檔案資料夾，伺服器就會像一般主機那樣把它們原樣送出，一行程式碼都不用寫。

對於一個由 HTML、CSS 和圖片組成的頁面，這種模式就夠用了。文件裡把這個資料夾叫 static assets，靜態資源，在專案設定裡它只占一個欄位，就是那個填路徑的欄位。

Cloudflare 透過自己的伺服器網路分發檔案，並把它們快取到離訪客更近的地方。

2. 要花多少錢

對靜態檔案的請求是免費的，數量也不受限制。這是方案的條款，不代表沒人統計造訪量。

那大家常說的那個數字 - 每天 10 萬次請求，是從哪來的？那是對 Worker 腳本呼叫次數的限制，腳本就是伺服器上的那個程式。只掛了資料夾的頁面沒有腳本，自然不會計入這個額度。

圖中上方那條路徑就是我們頁面走的路：檔案不呼叫伺服端程式就直接送出。下方那條要等以後加上 Worker 腳本才會用到。

免費方案還是有限制的，只是限制的是別的東西 - 您發布的內容大小：

對於帶著十來張圖片的頁面，這些限制通常綽綽有餘。開始大型專案前，請查看Cloudflare 目前的條款：限制可能會變動。順帶一提，每個檔案 25 MB 聽起來很寬裕，但碰到第一支影片就不夠用了。

3. 帳戶

在 cloudflare.com 註冊很普通：email 和密碼，接著一封確認信。免費方案不需要信用卡。您也不需要加自己的網域 - 服務會建議您加，但那屬於產品的另一半，是保護和加速既有網站的功能。

登入後，您要找的區塊叫 "Workers & Pages"，而且不在顯眼的地方：左側選單先進 Build 群組，裡面是 Compute，再進去才是 "Workers & Pages"。面板時不時會重新編排，如果照這條路徑找不到，就用名稱搜尋：左上角的搜尋框可以按 Ctrl + K 開啟。名稱裡的兩個詞是 Cloudflare 的兩個產品；您要的是前半段，Workers，不用特別選什麼，自然就會進到那裡。

第一次部署時還會冒出另一件事：Cloudflare 會請您幫帳戶選一個子網域名稱。您所有的專案都會住在這個子網域上，網址由兩部分組成 - 專案名稱加上您的子網域：

my-landing.example-account.workers.dev
|          |               |
|          |               Cloudflare 的共用網域
|          您帳戶的子網域
專案名稱

這個名稱之後很難改，所以最好別把第一個想到的詞填進去。

4. 第一次部署

先簡單看一下發布在面板裡是什麼樣子。這段只是順帶認識一下服務，不看也可以：如果您想直接設定用代理部署並保留同一個網址，可以跳到下面的準備工作。

landing/          <- 我們交出這個資料夾
  index.html      <- 主頁面，一定要叫這個名字
  wrangler.jsonc  <- 代理會在第一次部署前建立
  style.css
  img/
    hero.png

發布之前，先檢查選定資料夾裡的內容：裡面的檔案都會變成公開的。把不打算公開的私人檔案和草稿清出去。

手動透過面板

專案區塊裡有個按鈕，可以建立新專案。接著會請您交出檔案：可以選單一檔案，也可以整個資料夾。上傳、確認 - Cloudflare 就會部署好並給您一個連結。按鈕名稱和畫面順序這裡改得比文章出刊還勤，所以請抓住意思而不是按鈕上的字：建立專案、交出檔案、拿到網址。

打開拿到的網址 https://…workers.dev，檢查頁面和圖片。這一步在同一台電腦上就能做。手機則適合再確認一次能不能連上、手機版好不好看。

透過面板發布不會留下本機設定檔。範例裡的 skill 不會自己把資料夾和這樣建立的專案綁在一起：沒有設定檔，它就會自己取個新名字，多出第二個網址。Cloudflare 是允許透過 Wrangler 更新既有 Worker 的，但那得另外把設定檔配上該 Worker 的名稱才行。

要讓代理來做，需要什麼

之後的發布，我們交給一個 skill 來處理。準備工作只需要在您的電腦上做一次。

要裝的軟體不多。帳戶您已經有了，還需要 Node.js - 用指令 node -v 檢查，如果找不到指令，就得先安裝它。wrangler 本身不用另外裝：npx 到時候會自己下載最新版。

圖上第二步是登入，最好現在就先處理掉，別留到最後：

npx wrangler login    # 會打開瀏覽器，裡面有個確認按鈕

請在終端機執行這個指令。少了這一步，整個流程會在第一次執行時就卡住，看起來像是 skill 壞了，其實跟 skill 一點關係都沒有。要確認是否成功，可以用指令 npx wrangler whoami - 它會顯示您是用哪個帳號登入的。

這條路線只要透過瀏覽器登入就夠了。API token 留到最後的選讀部分再介紹。

圖上第三步 npx wrangler deploy，會由代理在頁面資料夾裡執行。我們先給它定好規則：怎麼準備設定檔、怎麼發布。

5. 自己的部署 skill

只有一個頁面時，在聊天裡提出請求就夠了。但一旦多了第二個、第三個、第十個 - 每次都得跟代理重新解釋同樣的事：要拿哪個資料夾、專案怎麼命名、設定檔要怎麼處理。到第三次就開始煩了。

skill 要能做到什麼

五個步驟，每一步都在解決一個具體問題，不是為了湊數而加的：

1. 拿到指定的資料夾，確認 index.html 就在根目錄。這是個成本很低的檢查，能在部署之前就抓到最常見的錯誤，而不是之後才發現。
2. 決定專案名稱 - 從資料夾名稱推導出來，而不是每次都問一遍。
3. 檢查資料夾裡、index.html 旁邊，是不是有 wrangler.jsonc 檔案。沒有 - 就建立；有 - 就從裡面取名稱，什麼都不改寫。
4. 從這個資料夾執行部署，執行前先顯示指令。
5. 回傳公開網址，並提醒您到那裡檢查頁面和圖片。

專案名稱從資料夾推導

這是整個流程裡最重要的決定，也正是不能留給代理自由發揮的地方。如果沒有規則規定名稱，代理就會自己編一個 - 下一次又會編出另一個。結果就是多出第二個網址不同的專案，第一個還晾在那裡。

規則很簡單：資料夾名稱就是專案名稱。Worker 名稱裡只能有小寫拉丁字母、數字和連字號，所以其他字元 - 句點、空格、底線 - 都換成連字號，最後再加上一個由四個隨機字元組成的短後綴：

landing/                 ->  landing-42c2
my.first.page/           ->  my-first-page-8e10
portfolio-2026/          ->  portfolio-2026-b7a3

加後綴是為了讓不同專案裡同名的兩個資料夾不會搶到同一個網址。它只在建立設定檔時產生一次，而且一定要用指令產生，不能靠代理憑空想：不然它會拿範例裡的後綴，讀過同一篇文章的人就會全都撞到一樣的後綴。之後這個後綴一律從設定檔裡讀取。這也正是為什麼 skill 會先看既有設定檔，然後才決定要不要寫東西。

設定檔由代理來寫

代理會把專案名稱和發布設定寫進 wrangler.jsonc，這樣執行部署時終端機就不會再跳出問題。設定檔跟 index.html 放在一起，所以裡面的檔案路徑是一個點，也就是"就是這個資料夾"：

{
  "name": "landing-42c2",
  "compatibility_date": "2026-09-07",
  "assets": { "directory": "." }
}

compatibility_date 欄位決定的是平台在指定日期當時的相容行為。對於新設定檔，代理會填今天的日期，這是Cloudflare 文件建議的做法；再次發布時則保留原本的日期。

把設定檔放到資料夾外面的上一層並不是好主意：檔名是固定的，一個目錄裡只能有一個這樣的檔案，第二個資料夾要嘛蓋掉第一個的設定檔，要嘛頂著第一個的名字發布出去。在資料夾內部，每個專案都是自成一體的，部署也直接從那裡執行。

這種擺法有個附帶效果：設定檔跟頁面放在同一個資料夾，所以會跟著頁面一起上傳到主機，任何人都能透過網址打開它。裡面沒有任何機密 - 只有名稱、日期和一個點 - 如果在意的話，可以在旁邊放一個 .assetsignore 檔案，列出不要發布的內容。

有三條規則最好在任務裡明講出來，不然代理猜不到：

• 沒有檔案 - 就建立，並顯示寫入了什麼；
• 已經有檔案 - 名稱和日期照舊保留，就算今天的日期不一樣也一樣；
• 只有在內容真的改變時，才重寫檔案。

值得留在手邊的四個請求

第一個就是建立 skill 的任務本身。它比其他請求都長，因為這是唯一一次要把整個流程完整描述出來：

幫我建一個 skill，用來把靜態頁面部署到 Cloudflare Workers。
放進這個專案的 .claude/skills/ 裡。
最後告訴我建好的 SKILL.md 路徑，以及怎麼明確呼叫這個 skill。

先讀一下 Cloudflare 目前關於 Workers 和
static assets 的文件：指令和設定欄位可能已經變了。
如果下面的描述跟文件對不上，告訴我，
不要自己默默改掉。

在 skill 的 description 裡列出它該觸發的用語，
至少要有："發布資料夾"、"重新發布"、"部署到 Cloudflare"。

流程：拿到一個資料夾，檢查根目錄有沒有 index.html。
專案名稱從這個資料夾的名稱推導：裡面只留
小寫拉丁字母、數字和連字號，其他字元（空格、
底線、大寫字母、非拉丁文字）都換成連字號。
最後再用連字號接上四個字元的後綴。
後綴不要自己編，而是用指令取得：
node -e "console.log(crypto.randomUUID().slice(0,4))"
wrangler.jsonc 設定檔放在要發布的資料夾裡面，跟
index.html 放在一起，裡面的 assets.directory 等於 "."。
如果沒有設定檔 - 就建立：name、compatibility_date、
assets.directory。新的 compatibility_date 用今天的日期，
格式是 YYYY-MM-DD。顯示寫入了什麼。
如果已經有設定檔 - 就從裡面取名稱和日期，保留不變。
只有在內容真的改變時，才重寫檔案。
如果已經有設定檔，但 assets.directory 指向的不是這個
資料夾，或者設定檔裡有 main 欄位 - 就停下來說明，不執行部署。
如果被要求重新發布，但資料夾裡沒有設定檔 - 就停下來
詢問，不建立新專案。
部署：在專案資料夾裡執行 npx wrangler deploy。執行前先顯示指令。
回覆裡要回傳公開網址，並提醒到那裡檢查
頁面和圖片。更新時網址必須保持不變。
如果沒有 Node.js，或還沒完成授權登入 - 就說明這件事，
不要想辦法繞過去。
如果帳戶還沒有 workers.dev 子網域 - 就說明這件事：
非互動式部署在這種情況下會失敗。

建好之後，打開代理顯示的檔案 .claude/skills/<名稱>/SKILL.md：裡面應該要有上面這些規則。第二次請求之前，先按代理顯示的方式明確呼叫剛建好的 skill。如果找不到這個 skill，請代理檢查路徑，以及它在目前專案裡是不是可用。

第二個是動手之前的檢查。適合在資料夾第一次部署前使用，讓您在東西真正發布出去之前先看到計畫；如果有好幾個資料夾，就對每一個都提出一次：

先不要建立或修改任何檔案，也不要執行 wrangler。只要告訴我，
你打算對 landing 這個資料夾做什麼：專案名稱是什麼、
會寫什麼樣的設定檔、會執行什麼指令。

有一點要注意：後綴是在寫入設定檔的那一刻才產生的，所以對一個還沒有設定檔的資料夾來說，計畫裡的名稱和實際執行時的名稱可能對不上。其他部分都會一致。

第三個和第四個才是真正要用的，整件事就是為了它們：

把 landing 資料夾發布到 Cloudflare Workers。

我改了 landing 裡的 index.html。重新發布到 Cloudflare Workers。

第一次發布之後，打開拿到的連結，檢查文字和圖片。接著在 landing/index.html 裡改一句明顯看得出來的文字，送出第四個請求。用同一個網址重新整理頁面：應該會看到新的文字。如果網址變了，請代理在下次部署前先檢查設定檔裡的名稱。

到這裡主要流程就完成了：skill 建好了，頁面發布了，更新也已經在同一個連結上確認過。之後每次發布，剩下的只是選對資料夾、看一眼代理要執行的指令。

6. 延伸情境

如果您暫時不用一次準備一大堆資料夾，也不用在沒有瀏覽器登入的情況下執行部署，這一段可以先不看。

當流程說明不夠用時

skill 指示在資料夾只有幾個或幾十個的時候運作得很好。再往上，麻煩就出在代理每次都要重新讀一遍流程再手動執行：碰到五十個資料夾，這既慢，做法也不一定每次都一樣。

這時候就把流程改寫成腳本：它自己走遍所有資料夾，寫設定檔，跳過沒有變動的，最後印出一份摘要。skill 並不會因此消失 - 它只是改成呼叫腳本，而不是自己寫設定檔，部署仍然由它自己來執行。

寫腳本這件事也不用您來做。代理手上已經有詳細的流程說明 - 就是您的 skill - 所以請求可以寫得很短：

幫我用 Python 寫一個腳本，做我部署用的 skill 裡描述的事，
只是一次對專案裡所有資料夾都做。

拿根目錄有 index.html 的資料夾；
不看 node_modules、.git 和 dist 裡面。
對每一個都按我們的規則組出名稱，把 wrangler.jsonc
寫進資料夾裡。
如果設定檔已經存在 - 就從裡面取 name 和 compatibility_date，
只有內容真的變了才重寫檔案。
如果設定檔讀不出來 - 就不去動它，說明原因
並跳過這個資料夾。
預設只顯示計畫，什麼都不寫；
要寫入得靠明確的旗標。
需要一個篩選器，只跑選定的資料夾。
腳本只準備設定檔，不執行部署。
最後印出一張表格：資料夾、專案名稱、做了什麼。
如果這份描述裡有哪裡不清楚，就問我，不要自己默默猜。

顯示計畫可以讓您在寫入之前先檢查資料夾清單。保留原有名稱和日期能保護既有設定檔不被意外改動。腳本本身只準備設定；發布仍然是 skill 的工作。

存取用的 token

您在自己的電腦上已經用 npx wrangler login 登入過了。Wrangler 會保存這個授權，代理的指令也會用到它。

如果需要在沒有瀏覽器登入的情況下自動執行，或者想要更窄的權限，就要用到 API token。可以在個人資料裡建立：頭像、個人資料、API token 區塊。直接的網址是 dash.cloudflare.com/profile/api-tokens。

建立表單看起來很嚇人：權限群組、資源、還有一堆篩選條件。實際上要做的決定只有四個，而且有一半欄位完全可以不去動它。

1. Token 名稱。半年後您根本不記得它是做什麼用的，所以要寫得具體："從筆電部署頁面"，而不是"token 2"。
2. 權限。不需要、也不應該一項一項自己挑。現成範本清單裡有 Edit Cloudflare Workers - 裡面已經收齊了發布所需要的一切。
3. 資源。把 token 限制在您要發布的那一個帳戶上。就算您只有一個帳戶，也要明確選出來：以後帳戶可能會變多，而 token 會一直留著。
4. 有效期限和 IP 篩選。這些是選填欄位。當 token 只是要用一個晚上，或是給別人的機器用時，設個期限才有意義；平常工作就照預設留著即可。

接下來把 token 放進環境變數 CLOUDFLARE_API_TOKEN，帳戶則填進 CLOUDFLARE_ACCOUNT_ID。環境變數是您機器上的一種設定，程式會自己讀取；wrangler 會自動找到這兩個值，不需要您插手。變數是怎麼運作的、該放在哪裡才對，這是另一個話題，這裡只要知道這是個"地方"，而不是聊天裡的一行字就夠了。