【Vibe Coding】AI 生出網頁卻只能自己看？Vercel 免費部署完整教學指南
網站只能自己看太可惜！手把手教你用 GitHub + Vercel 免費部署，三步驟就能讓 AI 生成網站立即公開，快速分享作品。
用 AI 生出網頁卻只能自己看？
隨著生成式 AI 工具的普及，很多人嘗試用 Claude Code、Cursor、ChatGPT 或其他程式生成工具，在短短幾小時內就能快速做出一個網站。這樣的體驗讓許多新手覺得程式設計變得不再遙不可及。然而，當你完成網站後，卻常常發現一個問題：網站只能在本機電腦透過 http://localhost:3000 這樣的網址運行，別人根本無法打開。
這時候你就需要「部署」。部署（Deployment）是讓網站從你的電腦走出去，放到雲端伺服器上，任何人都可以透過瀏覽器直接訪問。部署聽起來像是一件需要伺服器知識的進階操作，但事實上現在已經有許多簡化流程的工具，其中最適合新手的就是 Vercel。
本文將帶你從零開始，完整學會如何用 GitHub + Vercel 部署網站，並額外介紹 Vercel CLI，讓你不論是新手還是進階使用者，都能在短時間內把作品展示給全世界。
什麼是部署？為什麼重要？
部署的本質，是將開發環境的程式碼放到可以長時間穩定運行的伺服器上，並提供一個公開網址給用戶訪問。
對於剛學習網頁開發或透過 AI 工具生成網站的人來說，部署有三個核心價值：
- 分享與展示：作品集、課堂專案或 Demo 網站都需要一個公開網址。
- 即時更新：隨著開發進度，網站內容能快速同步到線上版本。
- 專業度提升：擁有一個正式的網域與線上網站，比單純展示程式碼更能展現專業。
過去部署需要購買伺服器、安裝 Apache 或 Nginx、設定網域 DNS，對新手來說非常不友善。如今，透過 Vercel，這一切步驟可以在幾分鐘內完成。
Vercel 是什麼？為什麼適合新手
Vercel 是一個專注於前端框架和靜態網站的部署平台，特別與 Next.js 緊密結合，但也支援 React、Vue、Svelte、Astro、甚至純 HTML/CSS 專案。它最大的優勢在於「免伺服器管理」和「與 GitHub 自動整合」。
Vercel 的主要特點
- 免伺服器設定：不需要學習伺服器或雲端架構，Vercel 會自動幫你完成。
- GitHub 自動化：與 GitHub 串接後，每次推送程式碼，網站會自動重新部署。
- 免費方案夠用：提供 100GB 流量、100 小時伺服器運算，適合個人專案與作品展示。
- 自訂網域：可以使用預設的
project.vercel.app，也能綁定自己的域名。 - 即時回饋：每一次程式碼修改都能快速看到線上版本，方便測試與分享。
對新手來說，這代表你可以專注在網站內容與設計，而不用被伺服器維護的技術細節困擾。
GitHub + Vercel 部署完整流程
接下來進入實作，假設你已經有一個簡單的網站專案（無論是用 Next.js、React，或是 AI 幫你生成的 HTML/CSS 頁面），以下是最常見的 GitHub 串接 Vercel 部署流程。
還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～
Step 1: 建立 GitHub Repository
- 登入 GitHub，點擊右上角的 New repository。
- 輸入專案名稱，例如
my-vibecoding-app。 - 選擇公開（Public）或私有（Private）都可以，然後建立專案。
- 這樣程式碼就已經推送到 GitHub 上了。
在本機專案資料夾打開終端機，執行以下指令：
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的帳號/my-vibecoding-app.git
git push -u origin main
Step 2: 將專案連接到 Vercel
- 打開 Vercel，用 GitHub 帳號登入。
- 點選 New Project，選擇要連接的 GitHub 專案。
- Vercel 會自動偵測框架並給出預設設定，例如 Next.js 專案會自動設定 build 指令。
- 這個網址即可與他人分享，網站正式上線。
點擊 Deploy，稍等數十秒，部署完成後你會獲得一個網址，例如：
https://my-vibecoding-app.vercel.app
Step 3: 自動化更新（CI/CD）
當你修改程式碼並推送到 GitHub 時：
git add .
git commit -m "update homepage"
git push
Vercel 會自動重新部署，網址不會改變。這就是所謂的 持續整合與持續部署（CI/CD），讓開發過程中的每一次修改都能快速同步到線上網站。
進階用法：Vercel CLI
除了 GitHub 串接之外，Vercel 也提供 命令列工具（CLI），適合喜歡在終端機操作或希望更靈活控制部署的使用者。
安裝與登入
npm install -g vercel
vercel login
部署專案
在專案資料夾下輸入：
vercel
CLI 會自動偵測框架並詢問專案名稱、是否要連接 GitHub 等設定。完成後一樣會生成一個 vercel.app 網址。
常用指令
刪除部署：
vercel remove 專案名
查看專案列表：
vercel ls
部署正式版：
vercel --prod
部署測試版：
vercel
Vercel CLI 對於需要快速測試或不想透過 GitHub 進行部署的人來說非常方便。
GitHub 部署 vs CLI 部署比較
| 部署方式 | 優點 | 適合對象 |
|---|---|---|
| GitHub 串接 | 自動化更新、版本控制、多人協作 | 新手、團隊開發 |
| Vercel CLI | 靈活、快速測試、免 GitHub | 個人專案、進階使用者 |
對於剛開始的新手，建議先用 GitHub 串接，因為它幾乎不需要額外設定，而且能養成使用版本控制的好習慣。當你需要快速測試或更高自由度時，再轉向 CLI。
常見新手問題與解答
Q1: 我的網站需要設定 API Key，該怎麼辦？
在 Vercel 專案設定中，找到 Environment Variables，新增變數名稱與值。程式中可以透過 process.env.變數名稱存取。
Q2: 免費版有什麼限制？
免費方案提供每月 100GB 流量與 100 小時 Serverless Functions 運行時間，對於作品集與個人專案來說足夠使用。
Q3: 可以綁定自己的網域嗎？
可以。在 Vercel 的 Domains 頁面新增域名，並在 DNS 提供商設定 CNAME 或 A 記錄，即可綁定自有網域。
Q4: 部署失敗怎麼辦？
常見原因包括：缺少 package.json、框架未安裝完整、或環境變數未設定。可以在 Vercel 後台的 Logs 查看錯誤訊息。
結論：從本機到雲端，讓作品真正被看見
部署不只是把網站放到伺服器，它更代表作品能夠被分享、測試與應用。對於透過 Vibe Coding 快速產生網站的新手來說，部署往往是從「玩玩看」到「實際應用」的重要一步。
透過 GitHub 與 Vercel 的整合，你可以：
- 在幾分鐘內完成部署，得到可公開的網址。
- 享受自動化更新，每次推送程式碼網站自動同步。
- 不需要伺服器知識，也能完成專業級的部署流程。
如果你追求更高靈活度，Vercel CLI 提供命令列部署的選項，讓測試和快速發佈更加方便。
Vercel 是目前最適合新手的免費部署平台之一。下次當你用 AI 生出一個網站，不要再停留在「只能自己看」的階段，嘗試用 GitHub + Vercel 把它上線，讓世界看見你的作品。
