← 返回課程總覽
實例演練 · 部署練習
靜態頁面部署到Vercel / Netlify
從你的電腦到全球可訪問的公開網址，只需要把 GitHub repo 連接到部署平台。這次演練讓你完成第一次真正的靜態部署。
產出目標 · DELIVERABLE
Vercel 或 Netlify 成功連接 repo 並完成部署
Task Overview
任務說明
靜態部署只需要兩個東西：一個 GitHub repo，和一個部署平台帳號。Vercel 和 Netlify 都是免費的，本次演練你只需要選一個。以下步驟適用兩個平台，操作介面稍有不同，但流程完全相同。
💡
前置條件：完成 CH5-3 的 GitHub 推送操作，確認你的工具頁已在 GitHub repo 上。如果還沒推送，先回去完成那個步驟。
確認 GitHub repo 已有最新版本
在終端機執行 git status 確認沒有未提交的修改，然後 git push 確保 GitHub 上是最新版。
在 Vercel 或 Netlify 建立新專案
登入 vercel.com 或 netlify.com → 點「Add New Project」或「Import from Git」→ 選擇 GitHub → 授權後選你的 repo。
確認部署設定
純 HTML/CSS/JS 靜態頁面不需要任何設定。平台會自動偵測到 index.html 作為首頁。直接點「Deploy」。
等待部署完成，測試網址
部署通常在 30 秒到 2 分鐘內完成。完成後點開平台給你的網址，測試頁面的所有功能是否正常。
（選用）設定自訂網址
兩個平台都允許你把預設的 .vercel.app 或 .netlify.app 換成更好記的名稱，在專案設定的 Domains 頁面修改。
Tool · 部署進度追蹤
部署檢查清單
按照以下清單逐一勾選，確保每個步驟都完成。
⚠️
部署後頁面空白？常見原因：HTML 裡引用的 CSS 或 JS 檔案路徑不對（例如用了絕對路徑 /Users/你的名字/...）。檢查所有 src 和 href，確認都是相對路徑。
Practice · LLM Troubleshoot
部署卡住怎麼辦：把錯誤訊息丟給 LLM 除錯
部署最常炸的點不是「不會用」，是「莫名其妙跑不起來」——build log 一堆紅字、頁面空白、404。這時候不要硬猜，把錯誤訊息整段貼到網頁版 LLM 配合下方 Prompt，平均 2 分鐘可以拿到「原因 → 修法 → 驗證指令」三段回應，比 Google 翻 Stack Overflow 快得多。
複製下方 Prompt → 貼到 ChatGPT / Claude / Gemini → 把錯誤訊息與環境資訊填進對應段落
你是熟悉 Vercel / Netlify / GitHub Pages 的部署 troubleshooter，會用平實語言解釋給只會基本 git 與 VS Code 的人。我會貼一份部署失敗的脈絡，請按以下格式回我：
【1. 最可能原因】（限 1 條，不要列「可能 A 或 B 或 C」，直接押最高機率那條）
【2. 立即修法】（3-5 步，每步附我可以複製貼到終端機或 GitHub UI 的具體指令／路徑）
【3. 驗證指令】（修完跑哪一條指令／看哪個畫面，確認真的好了）
【4. 避免再犯】（1 句話，下次怎麼提早發現）
——我的部署脈絡——
平台：[Vercel / Netlify / GitHub Pages 擇一]
Repo 結構（貼 ls -la 或 GitHub 檔案列表）：
[貼這裡]
錯誤訊息（整段貼，不要截）：
[貼 build log 或 browser console error]
我已經試過：
[列已嘗試的 1-3 件事，免得 LLM 重複建議]
期待 LLM 回覆樣本（以「部署後頁面空白」為例）
1. 最可能原因：HTML 引用的 CSS／JS 用了絕對路徑 /Users/...，部署到雲端後對應檔案 404，瀏覽器拿不到樣式所以畫面空白。
2. 立即修法
① VS Code 開 index.html，搜尋 /Users 把所有絕對路徑改為相對路徑（如 ./style.css）
② 終端機執行 git add . && git commit -m "fix: relative paths" && git push
③ Vercel 偵測到 push 自動重新部署，回 dashboard 等綠燈
3. 驗證指令
瀏覽器開公開網址 → 開 DevTools (F12) → Network 分頁 → 重整 → 確認所有檔案 status 都是 200，沒有 404
4. 避免再犯：建檔時養成全部用相對路徑的習慣，本機 open index.html 跑得起來，雲端就跑得起來。
⚠ 若 LLM 回的不是 4 段、或第 1 點變成「可能 A 或 B 或 C」，代表你 prompt 的脈絡段沒填夠——回去補 Repo 結構與錯誤訊息全文再送一次。
💡
練習小技巧：就算這次部署沒卡住，刻意製造一個錯誤練一次（改錯路徑、刪某個檔再 push），熟悉這套 LLM debug 流程比真的學會還重要——下次半夜部署炸掉時，這份 prompt 是你最快的救生圈。
Deliverable
產出確認
完成清單 · CHECKLIST
03
進階：請 LLM 扮「第一次看到這頁的新使用者」實測一輪並回饋；若有自己的工作群組或社群，順手貼上去收回饋（加分項，不強制）。截圖留痕屬進階選配，不計入課程時數。
04
進階：修改任一文字，推送 git commit，觀察平台是否自動重新部署
三段交付清單（每 30 分鐘一段）
第 1 段（30 min）：建立 GitHub repo + 連接 Vercel
完成本機到雲端的準備工作：
- 在 GitHub 建立新 repo（名稱、public/private、README 初始化）
- 把你的靜態工具頁推到 repo（git init → add → commit → push）
- 到 Vercel 連接 GitHub 帳號，import 該 repo，確認自動偵測為靜態網站
第 2 段（30 min）：跑通第一次 deploy
讓 Vercel 完成第一次成功部署：
- 在 Vercel 點「Deploy」，觀察 build log
- build 成功後取得公開 URL（*.vercel.app 或自訂域）
- 在手機瀏覽器開啟該 URL，確認頁面正常顯示
第 3 段（30 min）：自動部署觸發測試
驗證 push-to-deploy 自動化流程：
- 在本機修改 index.html 任一文字（例：頁面標題加個字）
- git add → commit → push origin main
- 回到 Vercel Dashboard 觀察是否自動觸發新一次 deploy
- 新 deploy 完成後，重新整理頁面確認修改生效
PORTFOLIO
把這個成果存到「我的作品集」，結訓時可一鍵匯出。
REAL TASK · 換成你的版本
把這次部署實作換成你部門真要對外的內部工具頁
- 你部門最需要對外公開的內部頁是什麼？（菜單 / 地址 / 報名表 / 工具集合）
- MVP 第一版要包含什麼？（純 HTML 一頁就好）
- 部署後誰會看？需要什麼 SEO meta（標題 / OG 圖 / Google 搜得到的關鍵字）
DEBUG · 修好這些有問題的 Git 部署指令
# 把本機修改推到遠端後讓 Vercel 自動部署
git add .
git commit -m "update homepage"
git push origin master
解法參考（先寫自己的版本再展開）
原版的問題：
1. `git push origin master`：GitHub 2020 年後新建 repo 的預設 branch 是 main，推到 master 會失敗（除非你有另外設定）；Vercel/Netlify 追蹤的也是 main，推 master 不會觸發自動部署
2. `git commit -m "update homepage"`：commit message 太模糊，1 個月後你不知道這次改了什麼；Vercel 部署記錄也會顯示這個 message，對團隊無意義
3. `git add .`：會把所有未追蹤的檔案都加進去，包括 .env、node_modules（若沒有 .gitignore）、暫存圖片等，有安全風險
修正版：
# 先確認有 .gitignore，至少排除 .env 和 node_modules
# git check-ignore -v .env # 確認 .env 有被排除
git add index.html style.css # 明確列出要提交的檔案
git commit -m "feat: update hero section copy and CTA button style"
git push origin main # 用 main，不用 master
# 若不確定目前的預設 branch 名稱：
git branch # 列出所有本機 branch，有 * 的是目前所在的
補充：若你的舊 repo 用的是 master，可以這樣改名：
git branch -m master main
git push -u origin main
# 然後到 GitHub/Vercel 設定把預設 branch 改成 main
關鍵改動：把 master → main（符合現代預設）；把「update homepage」→ 動詞+範圍的 commit message；把 git add . → 明確列出檔案（避免意外提交敏感資訊）。
延伸案例
部署流程跑完一次之後，拿一個真實要對外公開的靜態站完整走一次。重點不是「把檔案推上去」，而是域名、快取、SEO 基本 meta 都先想清楚再部署，才不會客戶剛拿到網址就說「怎麼在 Google 搜不到」。
案例 02 · 接案部署
手沖咖啡小店要把菜單頁推上 GitHub Pages 公開
難度 ★★☆
約 45 分鐘
你幫台北民生社區的手沖咖啡小店做了一頁菜單 + 地址 + IG 連結的單檔 HTML。店主沒買自己的網域，預算只想放免費平台，希望 Google 搜「民生 手沖 咖啡」時能找到，並且之後改菜單可以自己推送。你要決定平台、寫部署步驟、補齊 SEO meta。
原始資料｜客戶訊息
店主 Line 訊息（實錄）：
「我想要一個網址可以直接貼 IG bio，之前用某個免費架站平台但網址太長又有廣告。預算就 0 元，不想弄網域。下週要印新菜單，想把 QR code 放在菜單角落，所以網址希望短一點。之後自己要能改，我會用 VS Code 了，git 還在學。」
目前手上的檔案：
- index.html（單檔，含 CSS / JS 全 inline）
- 一張店內照 hero.jpg（1.8 MB）
- 一個 logo.svg
你的任務
- 在 Vercel / Netlify / GitHub Pages 三者中挑一個，寫出挑它的三個理由
- 列出完整部署步驟（repo 建立 → push → 平台連接 → 自訂專案名），可貼的指令寫出來
- 補齊 index.html 缺的 SEO meta（title / description / og:image / canonical），寫清楚為什麼每一條都要
評估指標
平台選擇
理由對應客戶需求（零元、網址短、之後好改），不只是「我熟」
SEO 基本款
title/description/og:image/canonical 四項都補，說明用途
資產最佳化
hero.jpg 1.8MB 有提醒壓縮或改 WebP，QR code 尺寸可讀
參考 Prompt（建議先自己寫再看）
點擊展開參考答案
【角色】你是幫在地小商家部署靜態頁的前端，熟悉 Vercel / Netlify / GitHub Pages 差異，會用平實語言對非技術客戶說明。
【任務】針對下方客戶需求，推薦一個免費平台並產出部署 SOP：
1. 三個選擇它的理由，每個理由對應客戶的一個明確需求
2. 完整部署步驟，包含 git init、commit、push、平台連接、自訂專案名
3. 補齊的 SEO meta HTML，含註釋說明每一條的作用
4. 1.8MB hero 圖的最佳化建議（工具、目標大小、替代方案）
【限制】
- 不推付費方案、不推自訂網域（客戶說預算 0）
- 步驟假設客戶只會基本 VS Code 與 git add/commit/push，不要跳步驟
- SEO meta 用繁體中文台灣用語內容，不要抄英文模板
- 不用「非常感謝你的信任」這類客套話
【輸出格式】
分四段：平台選擇、部署步驟、SEO meta 片段、圖片最佳化建議。每段用 H3 標題。
變體挑戰
A把「GitHub Pages」改成「Cloudflare Pages」再寫一次推薦理由，比較兩者在快取與 404 處理的差異
B客戶下週想加一個「本週豆單」區塊自己改，寫一段 Markdown 工作流建議（或者反過來，說服客戶繼續改 HTML）
C客戶半年後想上自訂網域 menucafe.tw，提前在 repo 設好 CNAME 檔與 DNS 步驟說明，寫成交接文件
自我檢核
SOLO · 自我演練
把部署好的靜態頁面打開放在手邊；開新對話請 LLM 扮「第一次來、只想 30 秒內判斷要不要用」的新使用者，連續追問：① 哪個互動點看了不知道下一步？② 按鈕位置/表單回饋/文字哪一塊最不直覺？③ 從首屏到完成第一個動作要點幾下？——每答一輪都要回貼具體位置（CSS selector / 區塊名稱）。最後寫下下一步要修的位置（一句話）。
12 分鐘（演練 8 分 + 修正位置結論 4 分）
進階選配 · 不計入課程時數（給想加練的學員）
把 LLM 對話截圖存到學習資料夾，或貼到工作群組／社群求 review。這些痕跡在轉職投履歷時可作為作品集素材。