<aside> 🌥️

這 step 純雲端，全部在 Vercel + GitHub 網頁操作，本地什麼都不用做。沒有 AI 工具也能完成。

做完之後，你的 ClassWall 網站就上線了，可以用手機打開、給同學看、分享網址。

</aside>

目標

把你的 classwall repo 部署到 Vercel，設好 Supabase 環境變數，拿到一個 https://xxx.vercel.app 網址，第一個小時就有上線網站。

為什麼把部署放這麼前面？

傳統教法是「最後才部署」，這樣會有兩個問題：

1. 前面寫了 3 小時程式才知道部署環境是不是好的，壓力很大
2. 環境變數要本地、雲端各設一次，很容易漏掉

先部署有幾個好處：

• 環境變數一次設好不會掉
• 第一個小時就有「上線網站」可以分享、可以在手機上用
• 後面所有改動都能立刻在 .vercel.app 看到效果（Vercel 會自動重新部署）
• 老師預先驗證過：starter 的 npm run build 就算沒設環境變數也能通過 prerender，不會在 Vercel 第一次 build 失敗

步驟

1. 到 Vercel 匯入你的 repo

1. 到 https://vercel.com/new（用 GitHub 登入最快）
2. 找到剛剛 Step 1 建好的 <你的帳號>/classwall repo
3. 按 Import

2. ⚠️ 設定環境變數（最重要的一步）

在匯入畫面找到 Environment Variables 區塊，加入兩個 key（值貼 Step 2 記下的）：