部署上線:GitHub + Vercel + 自訂網域

第 3 課結束時,你的個人品牌網站已經在瀏覽器裡跑得漂漂亮亮——但網址是 localhost:3000。這個網址的意思是「我自己的電腦」:你把筆電一闔上,網站就消失了;你傳這個網址給朋友,他點開只會看到錯誤頁。做了一個只有自己看得到的網站,等於沒做。

這堂課就解決這件事:把網站搬上網路,拿到一個 24 小時都連得到的正式網址,甚至是你自己的網域。而且我們要用「接好一次、終身自動」的做法——以後每次改版,一個 push 就自動更新上線,不用手動搬檔案。

這堂課適合誰適合:已經在自己電腦上做出網站、想給全世界看到的人(本課程屬進階應用專區)。需要基礎:零程式基礎 OK,但要會用電腦、會開終端機。前置課:第 3 課(用 Claude Code 做出的專案就是這堂課的部署對象)。

這堂學什麼

git 的三句話心智模型:commit=存檔、push=上傳、log=歷史——看得懂 AI 代打的指令在幹嘛
建 GitHub 帳號與倉庫(repo),把專案推上雲端
用 Vercel 連接 GitHub,一鍵部署拿到正式網址(免費、含 HTTPS)
環境變數是什麼、為什麼 API 金鑰絕對不能進 git
買一個自訂網域並設定 DNS,讓網站掛在你自己的名字下
驗證自動部署:改一行字、push、看網站自己更新

觀念一:git 不難,就三句話

很多課程把 git 教成一門大學問,新手直接勸退。其實以你現在的需求,只要三句話:

git 心智模型:commit 是存檔、push 是上傳、log 是歷史

圖:Vercel 官網(2026 年 7 月實況),來源:vercel.com

git commit = 存檔。像打電動存進度:把現在整個專案拍一張快照,附一句說明(例如「加了自我介紹區塊」),存在你電腦裡。
git push = 上傳。把存檔紀錄上傳到雲端的 GitHub。電腦壞了、被偷了、換新電腦,程式碼都還在。
git log = 歷史。列出所有存檔。哪天改壞了,永遠可以回到任何一個舊版本——這就是第 3 課說過的「後悔藥」的完整版。

實際操作時中間還有一步 git add(把要存的檔案「裝箱」),但流程固定就是:改程式 → git add . → git commit → git push。這四個動作你可以全部叫 Claude Code 代打,你的工作是看得懂它在做什麼,這樣出錯時才不會慌。

觀念二:GitHub 存、Vercel 跑、你只管 push

第二個要建立的畫面,是整條部署生產線長什麼樣:

部署全貌:電腦 push 到 GitHub,Vercel 自動建置後部署成正式網址

三個角色分工很清楚:GitHub 負責存(它只是程式碼的雲端倉庫,不會執行你的網站)、Vercel 負責跑(它從 GitHub 抓最新程式碼,建置成真的網站放上全球伺服器)、你只負責 push。GitHub 和 Vercel 之間接好一次之後,每次 push,Vercel 會自動收到通知、自動重新部署——這是整堂課最值錢的一句話。

費用方面(2026 年 7 月現況):GitHub 個人帳號免費;Vercel 的 Hobby 方案免費,額度對個人網站綽綽有餘,但限個人非商業用途,之後真的拿來做生意要升 Pro(每人每月 20 美元)。個人品牌網站、作品集放 Hobby 完全沒問題。

手把手實戰

以下用第 3 課的個人品牌網站當例子。指令可以自己打,也可以直接把 prompt 丟給 Claude Code 讓它代打——但每一步我都會解釋指令在幹嘛,AI 代打、你監工。

把專案變成 git 倉庫,做第一次存檔

在專案資料夾裡開 Claude Code,直接說:

幫我把這個專案初始化成 git 倉庫,加上適合這個專案的 .gitignore(要包含 node_modules 和 .env),然後做第一次 commit。做每一步之前先告訴我你要跑什麼指令。

它背後跑的其實就是三行:

git init
git add .
git commit -m "first commit: personal site"

git init 是「在這個資料夾啟用 git」,一個專案只做一次。git add . 把所有檔案裝箱(. 代表全部)。git commit -m "..." 存檔,-m 後面是這次存檔的說明。注意 prompt 裡特別要求 .gitignore——這個檔案是 git 的黑名單,列在裡面的東西 git 會假裝沒看到,等一下講環境變數時你就知道它多重要。

建 GitHub 帳號和空倉庫

到 github.com 註冊帳號(免費,用你常用的 email)。登入後點右上角「+」→「New repository」:

Repository name:取個英文名,例如 my-site
Public / Private:選 Private(私人)就好,程式碼不公開,不影響部署
重點:不要勾「Add a README file」,其他初始化選項也全部留空

為什麼不勾?因為你的電腦上已經有 commit 了。如果 GitHub 那邊也自己生一個 README 的 commit,兩邊歷史對不起來,第一次 push 就會被拒絕(常見坑第 2 條就是它)。我們要的是一個全空的倉庫,等你把本機的歷史推上去。

把程式碼 push 上去

建好倉庫後,GitHub 頁面會直接顯示「…or push an existing repository from the command line」的三行指令,長這樣:

git remote add origin https://github.com/你的帳號/my-site.git
git branch -M main
git push -u origin main

逐行看:第一行是「告訴 git 雲端倉庫的地址,幫它取小名叫 origin」;第二行把目前分支改名成 main(現在的標準主分支名);第三行就是上傳,-u 是記住對應關係,以後只要打 git push 就好。

第一次 push 會要求登入。最省事的做法是先裝 GitHub 官方的 gh 指令(macOS 用 brew install gh),然後跑 gh auth login,照著問答用瀏覽器登入一次,以後就不會再被問密碼。這段一樣可以整包丟給 Claude Code:「幫我把這個專案推到 GitHub,我的 repo 網址是 ○○○,遇到認證問題就教我用 gh auth login 處理。」

push 成功後,重新整理 GitHub 頁面——你的程式碼已經在雲端了。這一刻你就有異地備份了,光這點就值回票價。

Vercel 一鍵部署

到 vercel.com,點「Sign Up」,**選「Continue with GitHub」**用剛剛的 GitHub 帳號登入——這一步同時完成了「Vercel 和 GitHub 牽線」。

登入後點「Add New… → Project」,你會看到自己的 GitHub 倉庫列表(第一次會請你授權 Vercel 讀取,照著按同意即可)。找到 my-site,按「Import」。

接著的設定頁幾乎什麼都不用改:Vercel 會自動偵測你的專案是 Next.js 還是 Vite,建置指令都幫你填好了。直接按「Deploy」,看它跑 1~2 分鐘的建置動畫,完成後你會拿到一個正式網址,長得像:

https://my-site-xxxx.vercel.app

用手機開開看——這是你第一個全世界都連得到的網站,而且 HTTPS 憑證 Vercel 已經自動幫你掛好了。

環境變數:秘密不進 git,填進 Vercel 後台

如果你的網站有用到 API 金鑰(例如聯絡表單寄信服務、AI API),這一步是保命步驟。原則一句話:push 到 GitHub 的東西都可能被看到,所以「秘密」一律不進 git。

環境變數:程式碼可以進 git,.env 和 API 金鑰絕對不行

作法分兩邊:

本機:所有金鑰放在專案根目錄的 .env 檔,而且 .gitignore 裡要有一行 .env(第 1 步的 prompt 已經要求了,現在打開 .gitignore 檢查一次)。
雲端:Vercel 專案頁 → Settings → Environment Variables,把 .env 裡的每一組 KEY 和值照抄進去,存檔後重新部署一次(Deployments 頁最新那筆按「Redeploy」)才會生效。

為什麼這麼嚴格?因為 GitHub 上有大量機器人 24 小時掃描公開倉庫找金鑰,一把 OpenAI 或雲端服務的 key 外洩,幾小時內就可能被刷出天價帳單。這個主題第 6 課會完整展開,今天先把習慣建對。

綁自訂網域

xxx.vercel.app 能用,但印在名片上不好看。買一個自己的網域吧:到 Cloudflare Registrar、Namecheap 或 GoDaddy 之類的註冊商搜尋你想要的名字,.com 一年大約 10~~15 美元(300~~500 台幣),.dev、.me 也是常見選擇。

買好後,回 Vercel 專案 → Settings → Domains,輸入你的網域(例如 yourname.com)按 Add。Vercel 會告訴你要去網域商那邊加哪幾筆 DNS 紀錄:

DNS 設定:根網域用 A 紀錄、www 用 CNAME,兩筆搞定

到網域商後台找「DNS 設定 / DNS Records」,照 Vercel 顯示的值加兩筆:根網域(@)加一筆 A 紀錄(通用值是 76.76.21.21,但以你 Vercel 後台實際顯示的為準,它可能給你專屬的最佳化 IP);www 加一筆 CNAME 指到 cname.vercel-dns.com(同樣以後台顯示為準)。

存檔後等 DNS 擴散,快則幾分鐘、慢則幾小時。Vercel 的 Domains 頁面狀態從「Invalid Configuration」變成打勾,就代表通了,HTTPS 憑證也會自動配好。

驗證自動部署:見證魔法的時刻

最後來驗收整條生產線。叫 Claude Code 隨便改一個看得到的地方:

把首頁的標題文字改成「嗨,我上線了!」,然後 commit 並 push。

push 完打開 Vercel 的 Deployments 頁,你會看到一筆新的建置正在跑——你什麼都沒按,它自己動工了。1~2 分鐘後重新整理你的網站:標題變了。

自動部署迴圈:改程式、commit、push,Vercel 自動建置上線

這就是你以後每次改版的日常:改 → commit → push → 自動上線。另外送你一個進階知識:push 到 main 以外的分支,Vercel 會給一個獨立的 Preview 網址讓你先看效果,正式站完全不動——大改版前先開分支試,最安全。

常見坑

坑 1:fatal: not a git repository (or any of the parent directories): .git

打 git 指令時看到這行,意思是「你現在所在的資料夾不是 git 倉庫」。九成是終端機開錯位置——你人在家目錄,但專案在 ~/my-site。用 cd 切到專案資料夾再跑一次;如果切過去還是一樣,代表這個專案根本還沒 git init,回到實戰第 1 步。

坑 2:第一次 push 被拒絕

! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'https://github.com/...'
hint: Updates were rejected because the remote contains work that you do not have locally.

翻譯:「雲端倉庫裡有你本機沒有的東西」。幾乎都是建 repo 時手滑勾了「Add a README file」造成的。兩種解法:最乾淨是刪掉這個 repo 重建一個全空的;或跑 git pull origin main --rebase --allow-unrelated-histories 把兩邊歷史接起來再 push。看不懂沒關係,把錯誤訊息原封不動貼給 Claude Code,它會處理——但你現在知道為什麼會發生了。

坑 3:.env 不小心 push 上去了

檢查方法:打開 GitHub 上的 repo 頁面,如果檔案列表看得到 .env,就是外洩了。注意順序,先換鑰匙、再滅火:第一步立刻到每個服務的後台把外洩的金鑰作廢(revoke)、換新的——因為就算你之後把檔案刪掉,舊金鑰還留在 git 歷史裡。第二步才是清理:把 .env 加進 .gitignore,跑 git rm --cached .env(讓 git 停止追蹤但保留本機檔案),commit 後 push。

坑 4:本機跑得好好的,Vercel 上 Build Failed

Deployments 頁一片紅,點進去看 Build Logs,常見結尾像 Command "npm run build" exited with 1。原因通常是:正式建置比開發模式嚴格(型別錯誤、lint 錯誤在本機只是警告,build 時直接失敗),或 Node 版本不一致。解法:把 build log 裡最後幾十行錯誤複製下來,丟給 Claude Code:「Vercel 部署失敗,這是 build log,幫我修到本機跑 npm run build 能過。」記住這個判斷標準——本機 npm run build 過得了,Vercel 幾乎就過得了。

坑 5:網域一直顯示 Invalid Configuration

先確認兩件事:DNS 紀錄的「值」是不是照 Vercel 後台顯示的填(不要抄網路上的舊教學),以及網域商那邊有沒有殘留舊的 A 紀錄或 CNAME 指到別的地方(有就刪掉,同名紀錄只留 Vercel 這筆)。都對的話就是還在擴散,等幾小時再看。用 dnschecker.org 輸入你的網域,可以看到全球各地的 DNS 更新到哪了。

作業

把你第 3 課的網站完整走一遍今天的流程:GitHub repo → Vercel 部署,拿到 *.vercel.app 網址,傳給一個朋友請他用手機打開。
練習自動部署迴圈三次:每次叫 Claude Code 改一個小地方(換句文案、改個顏色),commit、push,看著 Vercel 自動更新。目標是讓「改 → push → 上線」變成肌肉記憶。
選做:買一個自己的網域綁上去。預算 500 台幣以內,這是你網路身分的長期投資。
檢查作業:打開你的 GitHub repo,確認 .env 和 node_modules 沒有出現在檔案列表裡。

下一課預告

網站上線只是開始,接下來你會一直想改它:加區塊、換設計、修手機版跑版。但很多人在這一步翻車——叫 AI 改 A,它順手把 B 弄壞了;或改了十次,專案愈改愈亂。第 5 課教你迭代改版不炸掉的兩個核心武器:把需求講到 AI 不會誤解的「需求描述術」,以及讓 AI 記住你專案規矩的 CLAUDE.md。你的網站已經是「正式在線上的產品」了,從下一課開始,我們用對待產品的方式改它。