部署懶人包 | 2026-05-15 | Vibe Coding 教學

不會寫程式也能把網站丟上網路
Zeabur 部署懶人包

把你自己用 Claude Code 做出來的記帳系統、HTML 雛形、Notion replacement、小工具,丟到 Zeabur 變成手機也能開的網站。全程不用會寫程式,只要會「白話描述需求 → 看 Claude Code 動」。

Vibe Coding 新手 白話翻譯 6 個卡點 + Cheat Sheet
⚡ 30 秒看重點

不會寫程式也能把 Claude Code 做出來的網站放到網路上、手機可開。先把名詞翻譯成人話(Zeabur / MCP / 部署 / 資料庫⋯)、看 6 個新手最常卡的問題、跟著 4 步驟部署流程做、再用 Cheat Sheet 咒語表救卡點。

先把名詞翻譯成人話

看不懂時回來查、不用先背完才動手。

名詞一句話人話你需不需要懂
Zeabur一個雲端平台,幫你把網站放到網路上、自動幫你管伺服器、SSL、網域,台灣團隊做的✅ 要知道這是你要用的工具
伺服器雲端一台 24 小時開機的電腦,專門跑你的網站給別人用✅ 要花錢買一台
MCPClaude Code 跟 Zeabur 之間的「神經」,裝了之後 CC 可以直接操作你的 Zeabur 帳號✅ 要知道要裝它
資料庫存資料用的倉庫,記帳金額、發票照片都存在這✅ 你的系統會需要
Next.js一種網站框架,能同時做前端(你看到的畫面)+ 後端(資料庫存取),比純 HTML 強⚠️ 知道是 CC 會幫你用的東西就好
Postgres / Supabase / Firebase都是資料庫的不同牌子,挑一個用就好(CC 會建議)❌ 完全不用懂差異
Git程式碼版本管理工具完全跳過,Zeabur 也支援直接從本地丟程式碼上去,不一定要用 Git
本地端跑在你自己 Mac 上、只有你看得到的版本✅ 要知道「想用手機看 = 不能只在本地端」
部署把網站丟到伺服器上、讓全世界可以開連結看✅ 你現在卡的就是這步

💡 看到 CC 用沒看過的名詞就回一句「用小學生能懂的話再解釋一次」、它會立刻換白話版。不要怕問。

新手最常問的 6 個問題

Q1. 要 git 才能部署嗎?

不用。Zeabur 支援直接從你本機上傳、不一定要走 GitHub。

Q2. 免費版能用嗎?

可以試、但免費版是「按用量計費」— 一旦超量單價反而更貴。如果只是試跑可以開免費版、要真的長期用建議直接買每月 $6 美元的 Linode 日本伺服器(穩定 + 一個月一兩百台幣換不用煩惱用量)。

Q3. Zeabur 跟伺服器是兩件事?

對。Zeabur 是「網站託管平台」、你在 Zeabur 上面 買一台伺服器(就是租一台雲端電腦)、然後把你的系統部署到那台伺服器。Zeabur 是房屋仲介、伺服器是房子。

Q4. 想用手機操作一定要部署?

對。本地端只有你的 Mac 看得到、手機開不到。要手機能用 → 一定要部署 → 一定要有伺服器 + 資料庫。

Q5. 資料庫放 Notion 還是自己做?

建議 CC 做總覽比較直覺。要自己做就用 Postgres(Zeabur 一鍵安裝),或 Supabase。Notion 不適合當系統的資料庫、適合人看的筆記庫。

Q6. 我會把網站做壞嗎?

幾乎不會。每改一輪跟 CC 說「這個版本我覺得 OK、幫我存一個備份」。Zeabur 也有版本歷史可以倒回去。最壞狀況就是重新部署一次。

部署流程(照順序做、每步約 5-15 分鐘)

Step 1 · 註冊 Zeabur 帳號

zeabur.com → 用 Google 登入。免費。

Step 2 · 買一台伺服器(強烈建議)

  1. 登入後左側點「Servers」或「伺服器
  2. LinodeTokyo(日本)區域(實測最穩)
  3. 選 $6/月那個方案就夠
  4. 結帳時輸入折扣碼 leadingmrk 享 10% off
  5. 付款完伺服器就有了

💰 一個月台幣約 180 元、比 Spotify 還便宜。

Step 3 · 在 Claude Code 裝 Zeabur MCP

打開你電腦的 Claude Code、貼這句:

請幫我安裝 Zeabur 的 MCP server,並登入我的 Zeabur 帳號。
參考文件:https://zeabur.com/docs/zh-TW/mcp
裝好後跟我說「裝好了」,並列出你現在能做哪些事。

CC 會自動:

  • 下載 Zeabur 的 MCP 套件
  • 提示你去 Zeabur 後台拿 API token 貼給它
  • 完成後它就能直接幫你操作 Zeabur

裝這個的好處:之後所有部署、開資料庫、看 log、改設定、你都不用碰 Zeabur 後台、全部用白話講給 CC 聽就好

Step 4 · 把網站部署上去

裝完 MCP 後、再貼這段給 CC(這就是你的「第一個 prompt」):

我有一個專案的 HTML 雛形在這個資料夾:[把資料夾路徑貼這]

我希望你幫我做這幾件事,全程用白話跟我說明每一步在做什麼:

1. 評估這個專案要重建成 Next.js + Postgres 資料庫版本(手機也能開、資料能存)
2. 在我的 Zeabur 帳號上、幫我部署一個 Postgres 資料庫(用 Zeabur template-deploy)
3. 把網站本身也部署上去
4. 給我網址、並告訴我手機可以怎麼打開
5. 之後我新增功能時、要怎麼跟你說、你會怎麼幫我更新

過程中如果用到我可能不懂的名詞,請主動解釋。
如果有需要我做選擇的地方(例如資料庫密碼、網域名稱),請列選項給我選,不要自己決定。

CC 接下來會:看你的 HTML 結構 → 問你功能需求 → 建議新架構 → 跟你確認設計後開始改造 → 部署資料庫 + 網站到你的 Zeabur 伺服器 → 給你一個 xxx.zeabur.app 網址。

常見卡點與怎麼脫困

CC 跑到一半我看不懂它在幹嘛?

直接打斷它、問「等等、這步是在做什麼?為什麼要做?」。它會說明。不懂就再問、CC 不會煩。

CC 一次想做太多事、我跟不上?

說「請一步一步做、每做完一步就停下來等我確認」。

我想加新功能?

直接白話講:「幫我加一個拍照存發票的功能、照片存到資料庫」。CC 會問你細節(要不要做 OCR?照片要存多大?)然後動手。

怎麼讓手機也能順手用?

跟 CC 說「我主要在手機上用、請把畫面設計成手機優先」。它會用 mobile-first 的 CSS。

我擔心改壞?

每改一輪就跟 CC 說「這個版本我覺得 OK、幫我存一個備份」。Zeabur 也有版本歷史可以倒回去。

Cheat Sheet 常用魔法咒語

情境直接複製這句
看不懂名詞用小學生能懂的話再解釋一次
CC 跳太快請一步一步做、每做完一步就停下來等我確認
想反悔剛剛那步請倒回去
想加功能幫我加 [功能]、過程中需要我決定的地方列選項給我
想看效果部署後給我網址、順便告訴我怎麼在手機開
想 debug這個地方按下去沒反應、請查一下哪裡壞了

給你的心理建設

最重要的一句話:「就不要卡在當下、這也算是種學習過程」。

你現在卡的所有名詞、三天後就會像 IG / LINE 一樣自然。不會的事情不用先學完才動手、是「動手 → 卡住 → 問 → 過關」這個循環跑五輪就會了。

CC 是你的 24 小時可問實習生、問再多它都不會白眼。

玩完歡迎來 @leadingmrk 分享你的觀察。你卡在哪、哪一步解開了、哪個咒語最好用,都歡迎來聊。

有問題、踩到雷、或玩出新花樣,歡迎到 @leadingmrk 找老K。

老K · 領先時代數位

撰寫 2026-05-15 · 最後更新 2026-05-20

看完這篇?回首頁瀏覽更多實驗筆記

← 回 老K 的 AI 實驗筆記