vibe coding 網站怎麼上線？3 個免費工具，零基礎也能自己部署

用 AI 把作品「vibe」出來只是第一步，接下來要讓它跑在你的電腦以外的地方，其他人才打得開、你不在電腦前它也能繼續動。

這篇文章整理新手最常用、免費額度也最夠用的三種部署方式：GitHub Pages、Cloudflare Workers、Google Apps Script，說明什麼情況才需要部署、怎麼選工具，以及上線前一定要檢查的三件事。跟著步驟做，今天就能把作品放上線。

目錄

• 先搞懂：你的作品到底要不要部署
• 動手前的 3 個關鍵觀念
• 方法一：GitHub Pages——最省事的靜態展示頁
• 方法二：Cloudflare Workers——最快，可免帳號先建立暫時預覽
• 方法三：Google Apps Script——最適合串 Google 服務
• 三種工具怎麼選：比較表
• 上線前必查的 3 件事
• 常見問題 FAQ

先搞懂：你的作品到底要不要部署

不是每個 vibe coding 出來的作品都要部署。一個簡單的判斷方向：當作品需要一個穩定網址、要在你的電腦關機時仍持續運作、要接收外部系統的 Webhook，或需要讓多位使用者透過網路使用時，通常就需要部署到持續運作的環境。以下是 3 種常見情境：

常見需要部署的三種情況

1. 像鬧鐘：時間到要自己跑，人不在、電腦沒開，它也得動。例如每天自動整理報表、數字不對就示警的自動化流程。
2. 像門鈴：事情發生要自己反應，有人填表單、傳訊息，馬上要有動作。例如報名表單一送出就自動寄確認信、通知承辦人。
3. 像電子報：不只你自己要用，其他人也要打得開。例如要分享給別人看的作品展示頁，或是 24 小時待命回覆訊息的客服機器人。

這些情況不用部署，開著用就好

• 像計算機：要用才打開，例如開會前貼資料進去、生成提案建議，用完就關掉。
• 像教練陪練：人邊做邊判斷，AI 在旁邊給建議，主導權在人身上，例如寫稿時的 AI 輔助。
• 像修圖 App：做一次算一次，例如要發文時把文章轉成圖卡，做完就關掉。

只有你自己用、只在需要時打開、每次都要人判斷的工具，不用部署。

部署前先想：要公開給任何人看，還是只給自己／公司用

這個問題會直接決定你該用哪種工具，動手前先分清楚：

• 對外（PUBLIC）：任何拿到網址的人都可能打開，頁面也可能被搜尋引擎發現並收錄。但公開不等於一定會出現在搜尋結果——這取決於頁面有沒有被連結到、有沒有設定 noindex 等因素。適合作品集、對外展示的網頁；不希望被搜尋引擎收錄的話，另外加上 noindex 設定。
• 對內（INTERNAL）：可以限制只有公司 Google 帳號登入才打得開。但這只控制「誰能進入」，不代表資料不會流向外部——如果程式本身會呼叫外部 LLM API、第三方分析工具，或把資料寫進非公司管理的服務，資料仍可能離開原本的工作環境。適合內部工具、報價系統這類不該公開的應用，但仍要留意程式碼與串接的服務會不會把資料送到外部。

對外＝任何人都可能打開，也可能被搜尋引擎收錄；對內＝先設好誰登入得進來，但資料流向仍取決於程式怎麼寫。

動手前的 3 個關鍵觀念

靜態網頁 vs 動態網頁，分界不是「畫面會不會動」

新手最常見的誤解，是以為「頁面會動、有動畫」就是動態網頁。實際上，動態指的是內容或回應會依條件變化，而且需要伺服器端先執行程式才能產生結果。分界點不是畫面會不會動，而是有沒有一個地方可以執行程式。

這件事很重要，因為它決定了你的專案能不能「藏金鑰」——純靜態網頁沒有後端可以藏東西，程式碼與金鑰都會公開。

3 種工具：GitHub Pages／Cloudflare Workers／Google Apps Script

三者提供的是不同能力，不是誰比誰「資源多」：

1. GitHub Pages：沒有後端，只能放靜態檔案，適合純靜態網頁。所有送到瀏覽器的 HTML／CSS／JavaScript 都可被使用者查看下載。
2. Google Apps Script：有後端，擅長整合 Gmail、Sheets、Drive 等 Google 服務，但單次執行時間、呼叫次數都有限制。
3. Cloudflare Workers：有後端，擅長處理 HTTP API、Webhook 與邊緣運算，免費方案每天有 10 萬次動態請求額度。

有一條規則要記住：只要專案需要使用不可公開的秘密金鑰，就不能只靠 GitHub Pages 前端處理。另外，要開免費的 GitHub Pages，repo 必須公開（原始碼公開）；付費方案雖然可以把 repo 設為 private，但發布出來的網站本身預設仍然公開在網路上（見下方 GitHub Pages 段落說明），這一點常被誤解。

如果既想免費用 GitHub Pages 放前端、又不想讓金鑰曝光，可以用混合式解法：GitHub Pages 放前端，Google Apps Script 或 Cloudflare Workers 當後端。金鑰放在後端的安全存放位置，前端只呼叫後端、拿回結果，前端看不到金鑰，同時保有 GitHub Pages 免費好放的優點。但「前端看不到金鑰」不等於後端就安全——後端網址本身如果完全公開又沒有驗證機制，仍可能被人跳過前端直接大量呼叫，間接把你的 API 額度用掉。後端最好搭配基本的身分驗證、輸入檢查與速率限制。

快速選工具：照需求走的決策指南

不用背，照你的需求對照就好：

• 只需要展示網頁內容 → GitHub Pages
• 主要操作 Google Sheet／Gmail／Drive → Google Apps Script
• 需要輕量 API、Webhook、驗證、隱藏金鑰 → Cloudflare Workers

Webhook＝像門鈴，事情一發生就自動通知另一個系統。

方法一：GitHub Pages，最省事的靜態展示頁

適合：作品集、純展示網頁、文件站。快速又免費，網址穩定，可以一直放著。程式碼放在 GitHub 上，天然就有版本控制。

前提：要先有 GitHub 帳號（github.com/signup），而且發布的內容不能含機敏資料——GitHub Pages 沒有後端，程式碼與內容都是公開的。

操作步驟

1. 在 GitHub 建立一個新的 repository，把你 vibe coding 做好的網頁檔案（HTML／CSS／JS）推上去。可以直接請 Claude Code 或你使用的 AI 編碼工具幫你操作 git 指令完成推送。
2. 進到該 repo 的 Settings → Pages。
3. 在 Source 選擇要發布的分支與資料夾（例如 main 分支、根目錄或 /docs）。
4. 儲存後等待建置完成，GitHub 會顯示一組網址（通常是 https://<你的帳號>.github.io/<repo名稱>/）。
5. 打開網址驗證頁面是否正常顯示。

注意事項

• 發布的網站不能超過 1GB，來源 repo 也建議控制在 1GB 內。

• 單次建置超過 10 分鐘會逾時。

• 頻寬有每月 100GB 的軟性上限，建置次數則是每小時 10 次的軟性上限（用自訂 GitHub Actions 工作流程建置則不受此限）。

• 免費方案下，要用 GitHub Pages 的 repo 必須是 public；付費方案（GitHub Pro、Team、Enterprise Cloud）可以從 private repo 發布。

• 重要：即使來源 repo 設成 private，發布出來的 GitHub Pages 網站預設仍然公開在網路上，任何拿到網址的人都打得開。 GitHub 官方文件明確提醒：「即使 repository 是 private，GitHub Pages 網站仍公開在網際網路上」。private repo 解決的是「原始碼在 GitHub 上看不看得到」，不是「網站本身私不私密」。真正能限制網站存取（僅限有 repo 讀取權限的人才能打開網站）的功能，目前僅限 GitHub Enterprise Cloud 的組織帳號使用。一般讀者若要做限定內部使用的網站，建議改用 Google Apps Script 或 Cloudflare Workers 搭配登入驗證。

• GitHub Pages 沒有可供前端執行期間安全讀取的秘密儲存空間。所有送到瀏覽器的 HTML、CSS、JavaScript，以及嵌入其中的任何金鑰，都可被使用者查看、下載。需要使用不能公開的 API key 時，不能只靠 GitHub Pages，應改由 Cloudflare Workers、Google Apps Script 或其他後端代為呼叫（見上方「混合式解法」）。

• GitHub Pages 不適合放需要密碼、信用卡號等敏感交易的內容，官方條款明確禁止把它當成商業交易或 SaaS 的免費主機用。

方法二：Cloudflare Workers，最快，可免帳號先建立暫時預覽

適合：需要輕量後端 API、想隱藏金鑰、或想先有個網址給別人看再決定要不要留下來的情境。Cloudflare Workers 是能執行程式的邊緣運算平台，不只是放檔案。

最大特色：可以完全不用先註冊帳號就把作品部署上線，拿到一個能用的網址，之後確定要留下來，再花幾分鐘「認領（claim）」把它變成你自己的。

操作步驟

1. 安裝部署工具 Wrangler（Cloudflare Workers 的官方 CLI），版本需在 4.102.0 以上才支援免帳號部署。
2. 在專案資料夾裡執行部署指令並加上 --temporary 參數（例如 wrangler deploy --temporary）。這個指令只有在 Wrangler 未登入、且環境中沒有 Cloudflare 帳號憑證時才能使用。
3. 指令執行完會產生一個暫時的網址與一組「認領連結（claim URL）」，效期 60 分鐘。
4. 在效期內打開作品網址即可先給別人看、先驗證功能。
5. 如果決定要留下來，在 60 分鐘內打開認領連結，登入或註冊 Cloudflare 帳號完成認領，這個 Worker 和暫時帳號就會永久變成你的。逾期未認領，暫時帳號會自動刪除，作品也會跟著消失。認領後若要繼續用 Wrangler 更新，需先執行 wrangler login，之後部署就不用再加 --temporary。

認領本身不另外收費。這個免帳號部署功能官方稱為「暫時預覽帳號（temporary preview account）」，設計上是先測試、預覽，確定要留下來才登入認領，並非一般正式上線的唯一途徑；認領也不代表帳號會被自動升級成付費方案。

暫時帳號也不支援所有 Cloudflare 功能，例如靜態檔案數量上限為 1000 個、單檔最大 5 MiB，完整功能需在認領後以正式帳號使用。

免費額度

• 會執行你程式碼的動態請求：每天 100,000 次免費，額度在每日 UTC 00:00 重置；每次呼叫（invocation）有 10 毫秒 CPU 時間的免費額度。
• 純靜態檔案請求（例如圖片、CSS 等 Workers Static Assets）：免費且不限量，不計入上述 10 萬次額度。
• 超過每天 10 萬次動態請求後會發生什麼：Cloudflare 會回傳錯誤（Error 1027），該次請求會失敗，不會自動幫你開始計費、也不會自動升級成付費方案。要繼續處理更多請求，需要主動訂閱 Workers Paid（最低每月 5 美元起，包含每月 1,000 萬次請求，且無每日請求上限）。
• 幫 Worker 綁定自己的網域（Custom Domain）本身不需要 Workers Paid，只需要該網域已經是 Cloudflare 的一個 zone；會產生費用的通常是網域註冊本身的費用，而不是 Workers 方案。

注意事項：金鑰要存成 Cloudflare Worker 的 Secret（不是一般的環境變數／vars），不要寫進 wrangler.toml、wrangler.jsonc，也不要提交到 Git 的 .env 檔案——一般環境變數不會加密，只有明確設定為 Secret 的值才會被加密保護。

方法三：Google Apps Script，最適合串 Google 服務、限公司登入

適合：需要整合 Gmail、Google Sheets、Docs、Drive 等 Google 服務並自動執行工作的場景，例如報名表單自動寄信、內部查詢系統。Google Apps Script（GAS）可以做權限控管，設定成只有公司帳號能打開，適合內部工具。

建議搭配 clasp：clasp 是 Google 官方提供的 Apps Script 命令列工具，能讓你（或你的 AI 編碼工具）直接把本機寫好的程式碼推上 GAS，不用手動複製貼上到線上編輯器。

操作步驟

1. 安裝 clasp：npm install -g @google/clasp

2. 到 script.google.com/home/usersettings 開啟「Google Apps Script API」——這是 clasp 能建立、推送專案的必要前提，沒開啟會直接失敗。

3. 登入 Google 帳號：clasp login

4. 建立新專案：clasp create-script --title "你的專案名稱" --type webapp（clasp 目前的主要指令是 create-script；部分版本仍保留 create 作為相容別名，實際指令請以 clasp --help 顯示的內容為準）

5. 在程式碼裡至少要有一個 doGet(e) 或 doPost(e) 函式並回傳內容，網頁應用程式才有回應內容，例如：

   function doGet() {
     return HtmlService.createHtmlOutput('Hello, world!');
   }
   

6. 執行 clasp push 把程式碼推上 GAS。

7. 建立版本快照再部署：clasp create-version "初版"，接著 clasp create-deployment（也可以到 Apps Script 編輯器點選「部署 → 新增部署作業 → 網頁應用程式」），並在部署設定中選擇存取權限（見下方「誰打得開」），取得正式網址。

8. 打開網址驗證功能是否正常。

免費額度

• 一般指令碼單次執行最長 6 分鐘，一般帳號與 Google Workspace 帳號都是這個上限（等第三方 API 或 LLM 回應的時間也算在內）；但自訂函式（custom function）只有 30 秒，比一般指令碼短很多，寫試算表自訂函式時要特別注意。
• 每日觸發器可累積執行時間：一般帳號 90 分鐘／天，Workspace 帳號 6 小時／天。
• UrlFetch（呼叫外部 API）次數：一般帳號 20,000 次／天，Workspace 帳號 100,000 次／天。
• 多數每日配額是「每位使用者、在第一次請求後 24 小時重置」，不一定是台灣午夜歸零，實際以 Apps Script 主控台顯示的用量為準。

注意事項：小型專案可以把金鑰放在指令碼屬性（Script Properties）裡，至少不要寫死在程式碼中；但這是共用儲存空間，任何有該專案編輯權限的人都可能讀到，不是專用的秘密管理服務，正式或高敏感情境可考慮 Google Cloud Secret Manager。

存取權限如果選「任何人，包括匿名使用者」，代表建立了一個公開、免登入就能呼叫的網址；如果 Web App 又設定成以你（部署者）的身分執行，外部使用者送出的請求就可能觸發具有你權限的操作（例如讀寫你的 Gmail、Drive），因此務必自行加上驗證、授權與輸入檢查，處理機敏資料時不要選這個選項。

3 種部署工具怎麼選：比較表

沒有唯一最好的工具，只有最適合需求的組合。先看你需要多少資源，再看要不要藏東西。

上線前必檢查的 3 件事

1. 這個工具的配額，吃得下你的用量嗎？

每個免費平台都有兩種上限：單次執行時間、呼叫或寫入次數。部署前先問自己三個問題：

1. 資料量多大？
2. 有沒有等第三方 API 或 LLM 回應？回應通常要多久？
3. 任務能不能並行處理？如果是 A→B→C 一路串行執行，最容易超時。

不確定自己的用量會不會超過配額，可以直接把平台官方配額文件的連結貼給 Claude 或其他 AI 工具，問「我要做這件事，這個平台的配額夠嗎？」

如果真的超過配額：資料量大、需要長期保存 → 改用正式資料庫；純粹是任務太耗時 → 改用工作流自動化工具，或留在本機執行。小型應用的原則是「不超過配額」，超了就換工具，不用硬撐。

2. 金鑰要放在哪？

API key、token、密碼統稱機敏資料，原則是不寫死在程式碼裡、不貼進簡報、不推上 GitHub。3 個平台的處理方式不同：

• GitHub Pages：沒有前端執行期間可安全讀取秘密的地方。repo 的 Settings → Secrets 是給 GitHub Actions 建置或部署流程用的，不能把秘密值寫進公開的前端檔案。需要秘密金鑰時，必須另外用 Cloudflare Workers、Google Apps Script 等後端代為呼叫。
• Cloudflare Workers：存成 Worker 的 Secret，不要放在一般 vars 或提交進 Git 的設定檔（wrangler.toml、.env 等）。
• Google Apps Script：小型專案可放在指令碼屬性（Script Properties），但這是共用儲存空間，有該專案編輯權限的人都可能讀到；正式或高敏感情境應考慮 Google Cloud Secret Manager 等專用秘密管理服務。

不知道該放哪裡，直接問 AI：「我要在 X 平台安全存放 API key，該放哪？」

※個資、客戶資料、合約金額不要進 AI 的 prompt，要先去識別化再交給 AI 處理。

部署最常見的三種「帳單爆掉」風險，是 LLM API key 外洩（別人拿你的 key 打 API，錢算你的）、通訊類 API 金鑰外洩（被冒用發訊息，額度與信譽一起沒了）、以及金鑰沒外洩但公開發表後流量遠超預期。對應的兩道防線是幫每一把金鑰都設預算上限，以及設警示通知（超過門檻就寄信提醒）。

要注意的是，不同平台的「預算上限」行為不一樣，不能一概當成會自動斷電的硬煞車。例如 OpenAI 的專案月支出上限預設是軟性門檻，超過後 API 還是會繼續處理，只是寄信提醒；OpenAI 目前也提供可設定為真正硬性上限（超過就讓請求失敗）的選項，但需要另外設定，不是預設行為。

使用任何平台前，建議先確認它的「預算上限」到底是會擋下請求，還是只會通知你。若平台只提供軟性提醒，可以再搭配限制 API key 權限、限制呼叫來源、設定 rate limit，以及一發現異常就能立即撤銷金鑰的處理流程。收到警示信要有動作，先去看用量，該關就關。

3. 這個網址設成「誰打得開」？

部署前一定要決定 4 選一：

1. 完全公開：任何拿到網址的人都可能打得開，也可能被搜尋引擎收錄。
2. 限公司組織內：限公司帳號才能存取，但資料是否流向外部服務仍取決於程式怎麼寫。
3. 需要 Google 登入：外部合作者也能用，但實際能不能可靠取得使用者身分紀錄，還要看程式的執行身分設定（GAS 若設定為「以部署者身分執行」，不一定拿得到使用者 email）。
4. 只有自己：個人自動化，不給別人用。

部署前先問清楚 3 件事：這個網址誰打得開、帳號放在誰名下、原負責人不在了會怎樣。

部署常見問題 FAQ

Q：vibe coding 是什麼？

指用 AI 編碼工具（例如 Claude Code）以自然語言描述需求、快速產出可執行程式碼的開發方式，重點是先讓作品能跑起來，再視需求決定要不要部署上線。

Q：三種工具可以一起用嗎？

可以。常見組合是 GitHub Pages 放前端展示頁，搭配 Cloudflare Workers 或 Google Apps Script 當後端處理需要藏金鑰、串接 API 的部分，前端只呼叫後端拿結果，金鑰不會暴露在前端程式碼裡。但要提醒的是，「前端看不到金鑰」不等於後端就安全——如果後端網址完全公開又沒有驗證機制，任何人還是可以跳過前端直接大量呼叫你的後端，間接消耗你的 API 額度。後端仍應加上基本的身分驗證、輸入檢查與速率限制。

Q：Cloudflare Workers 建立暫時預覽、之後「認領」，會不會突然被收費？

認領本身不會自動開啟付費方案。只要帳號維持在 Workers Free，超過每天 10 萬次動態請求的免費額度後，官方文件說明是回傳錯誤（Error 1027）讓該次請求失敗，而不是自動幫你計費；純靜態檔案請求則不限量、不計入這個額度。只有你自己主動升級 Workers Paid，或使用其他收費產品，才會依方案計費。認領時的註冊方式與是否需要信用卡，請以 Cloudflare 當下實際註冊流程為準。

Q：GitHub Pages 可以做成不公開的網站嗎？

免費方案下，來源 repo 必須是 public。付費方案（GitHub Pro、Team、Enterprise Cloud）可以把 repo 設為 private，但這只讓原始碼在 GitHub 上不公開，發布出來的網站預設仍然對外公開，任何拿到網址的人都打得開。真正能限制網站本身存取權限的功能，目前只有 GitHub Enterprise Cloud 的組織方案支援。想做限定內部使用的網站，建議改用 Google Apps Script 或 Cloudflare Workers 搭配登入驗證。

Q：GAS 的 Web App 存取權限要選哪一種？

視情境而定：純個人使用選「只有自己」；內部工具建議選限公司帳號或需要登入驗證的選項。「任何人，包括匿名使用者」代表建立了免登入就能呼叫的公開網址，若 Web App 又設定成以部署者身分執行，外部使用者可能觸發具有你權限的操作，因此除非你會另外自行實作驗證、授權與輸入檢查，否則處理機敏資料時不要選這個選項。

各平台的免費額度、介面與收費規則可能隨時調整，實際操作前請以官方最新公告為準。若專案涉及個資或客戶資料，請先完成去識別化再上線，並依內容性質正確設定存取權限。

clasp 指令名稱在不同版本間有變動（例如 create 與 create-script、deploy 與 create-deployment），實際操作前建議先執行 clasp --help 確認當下安裝版本支援的指令。

資料來源

本文步驟與額度數字整理自各平台官方文件，撰寫時查證如下：

• What is GitHub Pages？– GitHub Docs（含私密網站相關說明）
• GitHub Pages limits – GitHub Docs
• Configuring a publishing source for your GitHub Pages site – GitHub Docs（明確提醒：即使 repo 為 private，Pages 網站仍公開）
• Cloudflare Workers Pricing – Cloudflare Docs
• Cloudflare Workers Limits – Cloudflare Docs（含超過免費額度後的行為說明）
• Claim deployments（temporary accounts）– Cloudflare Workers Docs
• Custom Domains – Cloudflare Workers Docs
• Quotas for Google Services – Apps Script, Google for Developers
• google/clasp – GitHub README（clasp 指令目前以此為最新版本依據，developers.google.com 上的 clasp 教學頁面可能未同步更新）
• Managing projects in the API platform – OpenAI Help Center（說明專案月支出上限預設為軟性門檻，超過仍繼續處理請求；同時也支援另外設定為強制執行的 hard spend limit，達上限後讓請求失敗）
• workers.dev – Cloudflare Workers Docs（workers.dev 網址預設公開，需另外啟用 Cloudflare Access 才能限制存取）

本文初稿由 AI 協助整理，編輯：支琬清