從本機走向全世界：
GitHub 建倉、Vercel 部署與長期維護
用一句話請 Antigravity 在 GitHub 自動建立雲端倉庫、串接 Vercel 發布正式公開網址（https://...vercel.app），並建立專業的日常更新與收工交接工作流。
為什麼別人打 localhost:3000 看不到你的《今天學AI》？
C:\repos\learn-ai-today
- localhost 在電腦術語裡就是「我自己這台電腦」的意思
- 當你把筆電蓋上關機，伺服器就停了，外人也連不進你的書房
github.com/你的帳號/...
- 由 Antigravity 透過 gh 工具把你的網站原始碼安全推送上去
- 負責版本備份，並隨時通知 Vercel：「有新版本囉！」
learn-ai-today.vercel.app
- 自動從你的 GitHub 讀取程式碼，在雲端主機編譯並 24 小時開機
- 自動配發免費的 https:// 安全鎖頭網址，全世界手機都能秒開！
推上 GitHub 前的守門員：什麼該上傳？什麼絕對不能上傳？
專案根目錄裡的 .gitignore 檔案，就是告訴 Git「哪些東西禁止打包上雲端」的黑名單：
輕量、可重現的設計圖與規範
- 專案鐵三角：AGENTS.md、PROJECT.md、README.md
- 專屬設計技能：.agents/skills/brand-ui/SKILL.md
- 網站原始碼：src/、public/、package.json
- 環境變數範本：.env.example（不含真實密碼）
機密金鑰、真實個資與龐大套件庫
- 真實密碼與金鑰：.env、.env.local（含教師後台通行碼）
- 龐大套件與暫存檔：node_modules/、.next/（Vercel 會自己重新安裝）
- 學員真實個資名單：正式營運收集到的真實個資不可放公開倉庫
呼叫 Antigravity：
用一句話在 GitHub 自動開倉並推送
這就是我們在階段一安裝並登入 gh (GitHub CLI) 的原因——不用去網頁按半天，讓 AI 工程師幫你一條龍辦到好！
看懂 AI 在終端機幫你做的 3 個 Git 動作
當你請 Antigravity 把程式碼存檔推上雲端時，它會在背後依序執行這三個步驟（就像寄快遞包裹）：
挑選要打包的檔案
檢查哪些檔案被修改過，確認沒有夾帶 .env.local 等機密檔後，放進準備區紙箱。
蓋上時間戳記與更新說明
為這個版本寫一句清楚的摘要（例如：feat: 完成今天學AI全端網站與報名系統），產生唯一版本編號。
建立雲端倉庫並發貨上傳
第一次使用 gh repo create 自動在 GitHub 開新倉庫；之後每次更新只需 git push！
實作任務一：請 Antigravity 進行資安檢查並自動推上 GitHub
請點擊下方按鈕複製 Prompt，交給 Antigravity 執行：
1. 資安檢查：確認 .gitignore 已排除 node_modules/、.next/ 與 .env.local。
2. Git 提交：執行 git init 並完成首次 commit。
3. 自動開倉推送：使用 gh repo create learn-ai-today --public --source=. --remote=origin --push 在我的 GitHub 建立倉庫並推送，完成後把 GitHub 網址貼給我。」
點開 AI 給你的 GitHub 網址，親眼確認這 2 件事！
你的程式碼已經住在雲端了！
- 打開 https://github.com/你的帳號/learn-ai-today
- 你會看到 src/、AGENTS.md、PROJECT.md 都整齊地躺在雲端倉庫裡
- 網頁下方還會自動把你的 README.md 交接檔渲染成漂亮的專案首頁說明！
確認列表裡「沒有」.env.local
- 掃視一下 GitHub 檔案列表，確認只有 .env.example，而沒有 .env.local
- 這代表你的教師後台通行碼非常安全，沒有外洩到公開網路上！
最後一哩路：
透過 Vercel 發布全球公開網址
把 GitHub 倉庫接上 Vercel，填入雲端環境變數，60 秒內拿到屬於你的 https://...vercel.app 正式網址！
把《今天學AI》部署上 Vercel 的兩種超簡單方法
在 Vercel 網站點 3 下滑鼠完成綁定
- 好處：親眼看到 GitHub 與 Vercel 怎麼連動，未來只要 git push 就會全自動更新
- 步驟：登入 vercel.com ➔ 點選 Add New Project ➔ 找到 learn-ai-today 點擊 Import ➔ 設定環境變數 ➔ 點擊 Deploy！
直接請 AI 呼叫 Vercel Plugin / CLI 部署
- 好處：連瀏覽器都不用開，直接在 Antigravity 對話框裡完成
- 透過我們內建的 Vercel Plugin 與 deployments-cicd 技能，直接請 AI 幫你把專案推上 Vercel 並回傳正式網址！
部署時最重要的一步：把 ADMIN_PASSCODE 填進 Vercel！
為什麼要手動告訴 Vercel 通行碼？
- 還記得嗎？為了資安，我們的 .env.local 並沒有上傳到 GitHub
- 所以 Vercel 雲端主機目前還不知道你的教師後台通行碼是什麼
- 我們只要在 Vercel 後台的 Environment Variables 欄位填進去，雲端後台就瞬間擁有保護鎖了！
實作任務二：請 Antigravity 協助部署並驗證公開網址
無論你用網頁點選 Import，或想請 AI 直接用 CLI 部署，都可以用下面這段 Prompt 讓 AI 幫你確認上線狀態：
1. 確保正式環境已設定 ADMIN_PASSCODE 環境變數，並發布至 Production。
2. 完成後請提供公開的 https://...vercel.app 正式網址，並幫我檢查首頁、報名 API 與 /admin 後台在正式網址上是否皆回應正常。」
拿出你的手機！打開你的《今天學AI》全球正式網址
貼到 LINE 或產生 QR Code
把你的 https://learn-ai-today-xxx.vercel.app 傳給現場同學或朋友，不連同一個 Wi-Fi 也能秒開！
互相報名對方的工作坊
用手機點進同學的《今天學AI》網站，體驗響應式手機排版，並填寫一筆報名與課前提問送出！
打開你的 /admin 驗收名單
在你的電腦打開正式網址的 /admin，輸入通行碼，看著同學們的名字一筆一筆跳進你的後台！
網站上線後，下個月想新增文章或改活動時間怎麼辦？
一旦完成 GitHub 與 Vercel 綁定，你就自動擁有了企業級的「持續部署（CI/CD）流水線」，未來維護只要 4 步：
打開 Antigravity 說「開工」
AI 自動讀取 README.md 與 PROJECT.md，找回所有記憶。
動口交代新文章或新活動
在 localhost:3000 看見修改後的畫面，確認滿意且 npm run build 通過。
說「請幫我 commit 並 push」
只要程式碼一推上 GitHub，Vercel 會在 45 秒內自動偵測並更新全球網站，完全不用重綁！
說「收工」更新聯絡簿
讓 AI 把這次改了什麼、最新 commit 編號寫回 README.md，安心關機！
實作任務三：執行最終「收工」，將正式網址永久寫入專案鐵三角
在結束整個系列實作前，請複製下方 Prompt，完成專業開發者的收工儀式：
1. 更新 PROJECT.md：正式登記本機路徑、GitHub 倉庫網址與 Vercel 公開網址。
2. 更新 README.md：記錄專案狀態為『已正式部署上線（v1.0）』、最新 commit 編號與未來維護建議。
3. 將這兩份更新後的檔案 commit 並 push 上 GitHub！」
從零基礎到全端架構師：你已經解鎖的 Antigravity 武裝圖鑑
| 階段 | 你學會的 Antigravity 核心能力 | 你學會的全端工程觀念 | 《今天學AI》達成的里程碑 |
|---|---|---|---|
| 階段一 | 沙盒權限（Auto）、@ 點名、/ 指令、紅綠 Diff | 本機四大工具（Node / Git / gh） | 10 分鐘生出單檔倒數與首頁原型 |
| 階段二 | 專案鐵三角、開收工口令、/compact、/learn | 程式碼不放雲端同步區、規格先行 | 完成 AGENTS.md 與全端規格書 |
| 階段三 | 自訂 Skills（SKILL.md） 漸進式載入 | HTML/CSS/JS 外場分工、Next.js 元件化 | 擺脫 AI 廉價感，完成文章區與報名 UI |
| 階段四 | 認識 MCP 萬用插頭 與 Plugins 外掛 | API（GET/POST/DELETE）、JSON、Schema | 建立報名資料庫與防重複報名 API |
| 階段五 | /browser 實測、verification、Subagents | 前後端串接、.env.local 通行碼保護 | 打通報名閉環與 /admin 教師管理後台 |
| 階段六 | 呼叫 AI 自動開 GitHub 倉、Vercel CI/CD | .gitignore 資安紅線、雲端環境變數 | 正式公開上線，全班手機掃碼互動！ |
寫程式不再是少數人的專利，
清楚的思考與品味才是你的超能力。
帶著這套「專案鐵三角（AGENTS / PROJECT / README）＋ 品牌設計 Skill ＋ GitHub & Vercel 部署流水線」，去把你腦中下一個精彩的教學工具或產品點子實現出來吧！