做好的網站免費上線：GitHub + Vercel 3 步驟部署

網站和遊戲做好了，卻只能在自己電腦上打開？這篇用 3 個步驟拿到公開網址：讓 Claude Code 把網站推上 GitHub，再用 Vercel 免費部署。之後你只要說一句「改這裡，然後 commit 並 push」，網站就自己更新。網站裡的貪食蛇也一起上線，手機打開就能玩。

快速回答 在 GitHub 建一個空的 my-site repo，請 Claude Code「把這個資料夾推到 GitHub」，它會初始化 git、commit、push。到 vercel.com 用 GitHub 註冊 Hobby（免費）方案，Add New → Project 匯入 my-site，設定都不改，按 Deploy，幾秒後拿到 xxx.vercel.app 網址。之後每次 push，Vercel 自動重新部署。2026-10-21 實測，推上 GitHub 23 秒、部署 2 秒。私人 repo 的 commit 作者要是你自己的 GitHub 帳號，不然部署會被 Blocked。

做完這篇，你會有

• 一個公開網址，電腦和手機都打得開你的個人網站和貪食蛇
• GitHub 上的 my-site repo，網站的每次修改都有紀錄
• 改一句話、push，網站自動更新

開始之前要準備：

• 第 9 篇做的 my-site 資料夾（裡面的 projects/snake/ 就是貪食蛇）
• GitHub 帳號，和 git（終端機輸入 git --version 有版本號就好）

步驟 1：推上 GitHub

到 github.com/new 建 repo：Repository name 填 my-site，Public 或 Private 都可以，不要勾 Add README，按 Create repository。

在 my-site 啟動 claude，輸入（把帳號換成你的）：

幫我把這個資料夾推到 GitHub：https://github.com/<你的帳號>/my-site.git。還沒有 git 的話先初始化，第一次 commit 訊息寫「第一版個人網站」。

它做了幾件你沒說、但該做的事：推之前檢查沒有密碼或金鑰；把 .claude/settings.local.json（Claude 在你電腦上的權限設定）用 .gitignore 排除。它也說了 git 作者用哪個名稱和 email，這行要看一下，步驟 3 會用到。

重新整理 GitHub 的 repo 頁，檔案都在了：

步驟 2：用 GitHub 註冊 Vercel

到 vercel.com/signup，按 Continue with GitHub：

方案選 Hobby（I'm working on personal projects），免費：

GitHub 會問你要不要授權 Vercel，按 Authorize Vercel：

回到 Vercel，Add New → Project。第一次用時 Import Git Repository 是空的，要先按 Install 安裝 Vercel 的 GitHub App：

跳出的安裝視窗裡，選 Only select repositories，勾 my-site，再按 Install。只開放這一個 repo 就好。

步驟 3：按 Deploy

清單裡出現 my-site，按旁邊的 Import。設定頁什麼都不改：這是純 HTML 網站，Application Preset 會是 Other。

按 Deploy，幾秒後出現 Congratulations!：

按 Continue to Project，專案頁上的 Domains 就是你的公開網址：

用電腦打開那個網址，再點作品區的貪食蛇：

手機也打開同一個網址：

步驟 4：改一句話，看它自動更新

回到同一個 Claude Code，輸入：

把首頁大標題下面那句自我介紹改成「我用 Claude Code 做了這個網站」，然後 commit 並 push

push 完，Vercel 的 Deployments 分頁會自己多一筆部署：

重新整理公開網址，新的那句已經在了：

換你做

請它「把大標題的『你的名字』換成我的名字，然後 commit 並 push」，再用手機打開網址確認。

常見卡關

• 部署顯示 Blocked：這次實測就遇到。repo 是私人的，Vercel 的 Hobby 方案只部署 commit 作者是你自己帳號的 commit。Claude Code 設定 git 作者時用的 email 綁在另一個 GitHub 帳號上，Vercel 就擋下了。解法：請它「把這個專案的 git email 改成我 GitHub 帳號的 noreply email（在 GitHub 的 Settings → Emails 可以看到），把被擋的 commit 改成新作者，再 push」。改寫已經推上去的 commit 要強制推送，只在你自己一個人用的 repo 這樣做。repo 設成 Public 也不會被擋。
• 推送時跳出 GitHub 登入：第一次在這台電腦推送會要你登入或授權，照畫面登入就好。
• Import 清單是空的：Vercel 的 GitHub App 還沒裝，或安裝時沒勾 my-site。到 GitHub 的 Settings → Applications 調整。
• 網址打開是 404：index.html 不在 repo 最上層。Root Directory 要是 ./，而 index.html 要在那一層。

你做到了

• 一句話把網站推上 GitHub
• 用 Vercel 免費部署，拿到電腦、手機都打得開的公開網址
• 改一句話、push，網站自動更新

常見問題

要花錢嗎？

不用。GitHub 免費帳號加上 Vercel 的 Hobby 方案，個人網站用不完。Hobby 只能用在非商業的個人專案。

可以換成自己的網域嗎？

可以。在 Vercel 專案的 Settings → Domains 加上你買的網域，照它給的設定改 DNS。

網站的貪食蛇排行榜也會一起上線嗎？

這篇上線的是網站裡的 projects/snake/。想要有排行榜的版本，把第 12 篇的遊戲和 config.js 放進去。publishable key 放上網沒關係，安全靠資料表的安全規則。

下一步

• 一句話做出個人網站：Claude Code 新手作品集教學：這篇上線的網站是在那篇做的。
• 一句話幫小遊戲加上排行榜：Claude Code 串資料庫教學：讓上線的遊戲也有排行榜。

參考資料

• Vercel, Deploying Git Repositories with Vercel（Vercel 文件，匯入 GitHub repo 與自動部署） https://vercel.com/docs/git
• Vercel, Hobby Plan（Vercel 文件，免費方案的範圍） https://vercel.com/docs/plans/hobby