Vercel 部署上線
push 一下，全世界都能看到

做到這篇，你已經有了一個在本機跑起來的個人網頁。最後一步：把它放到網路上，讓任何人都能用網址訪問。

我選擇 Vercel。它是 Next.js 的親生父母（Vercel 公司開發了 Next.js），對 Next.js 的支援是最好的。 更重要的是：對個人專案完全免費，而且設定超簡單。

設定好之後，每次你 git push，Vercel 會自動偵測到並重新部署。完全不需要手動操作。

前置：Git 基礎

Vercel 需要從 GitHub 拉你的程式碼，所以先要把專案推到 GitHub。如果你還沒用過 Git，這裡快速介紹你需要知道的幾個指令：

部署步驟：從零到上線

# 如果還沒有任何 commit
git add .
git commit -m "initial commit"

# 連接遠端倉庫（把 URL 換成你的）
git remote add origin https://github.com/你的帳號/my-portfolio.git
git branch -M main

# 推送
git push -u origin main

# 查看哪些檔案改動了
git status

# 加入所有改動
git add .

# 寫 commit 說明（描述這次改了什麼）
git commit -m "add EP.08 blog post"

# 推送 → Vercel 自動重新部署
git push

環境變數（敏感資料保護）

如果你的專案有用到 API 金鑰（例如 EmailJS 的 Key、Google 的 API），絕對不能直接寫在程式碼裡推上 GitHub，要用環境變數：

# .env.local
NEXT_PUBLIC_EMAILJS_SERVICE_ID=service_xxxx
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=template_xxxx
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=xxxxxxxxxxxxxxx

// 用 process.env 讀取
emailjs.send(
  process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,
  process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!,
  formData,
  process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY!
);

然後在 Vercel 的 Dashboard 裡設定同樣的環境變數：

Preview Deployments — 分支預覽

Vercel 有一個很實用的功能：每個 Git branch 都有獨立的預覽 URL。

你在 main branch push → 正式環境更新。 你在 feature/new-design branch push → 產生一個臨時的預覽 URL，不影響正式網站。

# 建立新分支
git checkout -b feature/add-contact-page

# 做修改...
git add .
git commit -m "add contact page"
git push origin feature/add-contact-page
# Vercel 自動給你 https://my-portfolio-git-feature-add-contact-page-xxxx.vercel.app

# 預覽沒問題後，合併到 main
git checkout main
git merge feature/add-contact-page
git push origin main  # ← 這才更新正式網站

自訂網域（選用）

xxx.vercel.app 是免費的。如果你想要像 josephchen.dev 這樣的自訂網域，需要另外購買。

系列完結：完整技術棧一覽

走完 8 篇，你現在了解了打造我的個人網頁所用到的每一塊拼圖：