開發完了，然後呢？怎麼讓大家玩到你的作品

Claude Code 新手攻略 Part 2｜部署與分享篇上一篇教你「動嘴做出作品」，這篇讓你「把作品變成一個全世界都打得開的連結」。一樣寫給完全沒接觸過程式的人，免費、付費方式都提供給你。

開源是開發圈很大的文化價值，盡我們的能力分享資源讓大家無痛跟上 AI 浪潮，不用付費，看完點個愛心就是最大的支持！

Part 1 | Claude Code 新手無痛上手攻略 https://poneyplanet.com/vibe/ideas/claude-code-beginner-guide

先講一個最近很常看到的狀況

最近許多人加入 vibe coding，興沖沖做完第一個作品，想分享給朋友玩，於是丟了一個像這樣的連結出去：

http://localhost:3000

結果朋友點開，畫面一片空白，或是直接顯示「無法連線」。然後就開始懷疑是不是自己哪裡做錯了。

其實你沒做錯，作品也好好的——只是 localhost 這個東西，本來就只有你自己打得開。 這篇就是要解決這件事：怎麼把只活在你電腦裡的作品，變成一個別人也能玩的公開網址。

為什麼別人打不開你的 localhost？

先把這個觀念搞懂，後面就都通了。

localhost（也會寫成 127.0.0.1）的意思就是「這台電腦自己」。 當你在終端機跑那種 npm run dev 的指令時，你的電腦其實是臨時開了一個「開發伺服器」，專門跑給你自己看、邊改邊預覽用的。

所以它有兩個天生的限制：

只有你這台電腦看得到：localhost 這個網址在每個人的電腦上都指向「他自己」，所以你把連結傳給朋友，他打開的是他自己電腦上的 localhost（當然是空的）。
關掉就沒了：你一關終端機、一關電腦、甚至電腦睡著，這個伺服器就停了，連你自己都打不開。

結論：要讓全世界都能玩你的作品，你得把它「部署（deploy）」出去——也就是把作品放到一台「24 小時開著、而且有公開網址」的伺服器上。這就是這篇的主題。

動手之前：先搞清楚你的作品是哪一種

這一步很關鍵，因為它直接決定你能用哪些（免費）方案。作品大致分兩種：

類型一：靜態網站（Static）

只有畫面跟前端互動，沒有後端、沒有資料庫、不需要登入帳號。資料不會被存起來，重新整理就回到初始狀態。

番茄鐘、待辦清單、單頁小工具、個人作品集、計算機、互動小遊戲…… 大部分新手用 vibe coding 做出來的第一批作品，都是這一類。

好消息：靜態網站最好部署、免費選項一大堆，這篇大多數人看第 1 層就夠用了。

類型二：動態 / 全端（Full-stack）

有後端邏輯、會把資料存進資料庫、有會員登入、或需要呼叫一些要保密的服務。資料會被記住（例如你註冊的帳號、留言、上傳的內容）。

有登入功能的論壇、會記錄分數的排行榜、可以上傳作品的平台……

這類需要「能持續跑後端」的平台，看第 2、第 3 層。

不確定自己是哪一種？

最簡單的方法：直接問 Claude Code。

「我這個專案是純靜態網站，還是需要後端伺服器才能跑？請用白話跟我說，並告訴我適合用哪些免費平台部署。」

它讀得懂你的專案，會直接告訴你答案。

部署選項：從免費到付費

下面從「最便宜、最簡單」開始。挑適合你的就好。

第 0 層｜只是想臨時給朋友看一下（嚴格說不算「上線」）

如果你只是想「現在立刻」讓朋友看一眼，還不想正式部署，可以用「臨時通道」工具，把你電腦上正在跑的 localhost 暫時開一個對外網址出來，例如 Cloudflare Tunnel、ngrok 這類。

但要注意：這只是把你自己的電腦臨時開放出去，你電腦一關、通道一停就失效，網址也不固定。只適合臨時 demo，不適合當成正式分享。 真的要讓人隨時都能玩，還是往下看真正的部署。

第 1 層｜免費：靜態網站（大多數新手作品看這層就夠）

如果你的作品是靜態網站，恭喜，你可以完全免費、永久上線，而且選擇很多。下面四個都是免費、可靠的主流選項，各有個性，挑一個順手的就好：

GitHub Pages：最老牌、最穩，背後就是 GitHub。適合純靜態（HTML／CSS／JS）的作品與個人網站。優點是跟程式碼放在同一個地方、永久免費；缺點是設定稍微「工程師味」一點，也不太適合需要編譯的進階框架。適合：單純的網頁、作品集、文件站。
Vercel：對新手最友善的之一，連 GitHub 後幾乎是「按一下就上線」。它原本就是為 React、Next.js 這類框架設計的，自動處理建置、自動配 HTTPS，還會給每次修改一個預覽網址。適合：用比較現代的框架做、想要最少設定的人。
Netlify：跟 Vercel 很像、一樣好上手，特色是可以直接把資料夾拖進網頁就部署（連 GitHub 都不一定要用），對「我只想趕快把這包檔案丟上線」的新手超直覺。還內建表單收集、轉址等小功能。適合：想要拖拉式、零門檻的人。
Cloudflare Pages：背靠 Cloudflare 的全球網路，速度快、免費額度大方。功能跟前兩者接近，連 GitHub 自動部署。適合：在意載入速度、未來流量可能比較大的人。

怎麼選？ 真的沒有標準答案，新手我會建議從 Vercel 或 Netlify 開始（最少設定、最快看到成果）；如果你的作品是最單純的網頁、又已經在用 GitHub，那 GitHub Pages 也很好。四個都免費，之後想換隨時能換。

推薦給新手的最順流程（以連結 GitHub 為例）：

申請一個 GitHub 帳號（免費）。
把你的專案上傳到 GitHub（這步可以直接叫 Claude Code 幫你做，見下方實戰）。
到 Vercel 或 Netlify 用 GitHub 帳號登入，選擇你剛剛那個專案。
按下部署，等一兩分鐘，它就會給你一個像 你的作品.vercel.app 的公開網址。
把這個網址傳給任何人，他們都打得開、都能玩。

最棒的是：以後你在電腦改完、上傳到 GitHub，網站會自動更新，不用每次手動重來。

小提醒：這些免費方案是給「靜態網站」用的——如果你的作品需要登入、資料庫、把資料存起來，就要看下一層。不確定自己是哪種？問 Claude Code 最快。

第 2 層｜免費跑後端：可以，但有取捨

如果你的作品需要後端或資料庫（類型二），免費還是有路，但要先知道幾個常見選項跟它們的取捨：

Vercel／Netlify 的「Serverless Functions」：如果你只是需要「一點點」後端（例如幫忙寄一封信、呼叫某個 API、做個簡單的表單處理），其實不用另外找平台——你在第 1 層用的 Vercel／Netlify 就內建這種輕量後端功能，免費額度對個人作品通常夠用。適合：後端需求很小、不需要一直跑著的情況。
Render（免費層）：可以跑比較完整的後端服務、也能配資料庫。但免費層有個共通限制叫「閒置休眠（auto-sleep）」——沒人用的時候伺服器會自動睡著，下次有人打開要先「叫醒」它，第一次載入會卡個幾秒鐘。適合：測試、demo、自己玩，不適合給很多人長期使用。
Supabase／Firebase 這類「後端即服務」：如果你需要的主要是「會員登入 + 資料庫」，可以用這種現成的後端服務搭配第 1 層的免費靜態托管，常常免費就能組出一個完整作品。適合：要登入、要存資料，但不想自己管後端的人。

要注意的是，「免費就能跑的常駐後端」這幾年在縮水：有些平台（例如 Zeabur）原本的免費「共享叢集」直接部署模式正在淘汰、新專案已不能用，所以如果你查到舊文章說某平台「免費跑後端」，記得先確認現在還算不算數。

白話總結：純靜態有真正的免費永久方案；需要後端的話，「免費又穩定又不休眠」幾乎不存在，要嘛接受休眠／額度限制，要嘛準備花一點小錢，往第 3 層。

第 3 層｜花一點小錢：穩定、不休眠的後端

當作品開始有人在用、你不希望它一直睡著、希望別人打開就是快的——這時候花一點小錢最划算。這類「付費但好管理」的平台不少，常見的有 Render 付費層、Railway、Fly.io，以及華語區團隊做、中文介面、付款方便的 Zeabur（在 Zeabur 購買伺服器時，優惠碼填 harvey 可折 10%）。它們的共通點是：給你一台 24 小時不休眠的環境、自動從 GitHub 部署、有日誌跟監控可看。

挑選時主要看：價格透明度、離你使用者近不近（地區）、介面順不順手、付款方不方便。各家計價方式略有不同（有的按用量、有的像 Zeabur 走「先有一台伺服器」的固定月費模式），實際方案請以各官網為準。

給新手的白話建議：純靜態小作品別碰伺服器，第 1 層免費就夠；輕量後端先用 Serverless Functions 或 Supabase 這類免費組合；真的要正式營運、要穩定不休眠，再升級到這層花錢的方案。

實戰：把一個作品從 localhost 送上線

以最常見的「靜態作品 + 免費平台」為例，最省事的做法是——讓 Claude Code 幫你做。在你的專案資料夾啟動 claude，然後這樣講：

「我想把這個專案部署到 Vercel，讓別人可以用網址打開。請先告訴我這是不是純靜態網站，然後一步一步帶我做：包括怎麼上傳到 GitHub、要在 Vercel 點哪些按鈕。我是完全沒部署過的新手，每一步請講清楚，需要我自己操作的地方請停下來等我。」

它會幫你把程式碼整理好、教你建立 GitHub 倉庫、推上去，再帶你在平台上點完最後幾步。你只要照著做、該你操作時操作就好。

完成後你會拿到一個公開網址，丟給任何人都能打開——這時候你的作品才算「真正上線」了。

上線之後，幾個「分享」的進階技巧

改完會自動更新：只要連了 GitHub，之後你在電腦改完、上傳，網站就自動重新部署，不用每次手動。
換一個好記的網址（選配）：平台給的網址（xxx.vercel.app）能用，但你也可以另外買一個自己的網域（像 你的作品.com）綁上去，看起來更專業。
讓分享連結有漂亮預覽圖：在社群貼連結時想要有縮圖跟標題，可以請 Claude Code 幫你加上 og:image、標題等「社群預覽」設定。
想知道有沒有人在玩：可以加一個簡單的流量分析（例如 Vercel 內建的 Analytics，或 Google Analytics），看看有多少人打開、玩多久。

新手容易踩的 5 個坑

把密鑰、密碼直接寫在前端程式碼裡 API 金鑰、資料庫密碼如果寫死在前端，任何人都看得到、會外洩。要用「環境變數」存放。不確定的話，叫 Claude Code 幫你檢查：「我的專案有沒有把不該公開的密鑰寫在前端？」
以為「部署一次就永遠是最新版」 你之後在電腦改的東西，沒有重新部署，線上是不會變的。連好 GitHub 自動部署就能解決這個困擾。
免費方案休眠，被誤會作品很慢 朋友說「你網站好慢」，很可能只是免費方案剛被喚醒的冷啟動。要順就升到不休眠的方案。
localhost 跑得動 ≠ 線上跑得動 本機能跑，上線後白畫面，常見原因是路徑、環境變數、或某些只存在你電腦上的設定。遇到這種狀況，把錯誤訊息貼給 Claude Code，它通常能直接幫你抓出來。
搞不清楚自己是靜態還是全端，就亂找方案 先弄清楚類型（問 Claude Code 最快），再挑平台，不然容易白繞一圈。

一句話總結

localhost 只有你自己打得開；想讓大家玩，就要把作品「部署」到一台有公開網址、24 小時開著的伺服器上。

靜態小作品用免費的 GitHub Pages／Vercel／Netlify 就能永久上線；需要一點後端，可以先用 Serverless Functions 或 Supabase 這類免費組合（或接受會休眠的免費層）；真的要正式營運、穩定不休眠，再花每月幾塊美金升級到付費方案。整個過程都可以叫 Claude Code 一步一步帶你做。

把作品做出來，自己用也很好。但如果還能讓別人也玩得到，作品「被使用」的感覺可能會讓人更開心哦！

還沒看第一篇的話：先回去把「動嘴做出作品」學會，再回來這篇學「讓大家玩到」。