Vibe Coding 實戰課 — Stage 2 · 上線網頁
M2-2 做的作品 一句話 push 上 GitHub Pages
按 → 或空白鍵開始
M2-3 ・ 3 小時
M2-2 做的作品 從本機檔案 一路 push 到 GitHub Pages 上線
把作品直接 push 上線
多頁網站 含簡報跟下載
舊作品搬新家 加碼新專案
IDE 跟 GitHub 串起來 AI 改完直接 push 上線 不用回瀏覽器拖檔
操作指令 → 補強版參考 → 換你操作 → 分享觀察 → 小結反思
ROUND 1 · 0:00–0:30
vibe coding 的精神
不讓基礎設施卡住創作流程
SSH 是 Secure Shell 縮寫 安全通訊協定 key 就是金鑰
你產出一對金鑰 公鑰貼到 GitHub 私鑰留在本機 以後本機跟 GitHub 對話都用這對金鑰認證
GitHub 有三種認證方式 給入門選最順的
你今天建 repo-A 明天建 repo-B 每個 repo 都要重設一次 Deploy key 太累 Account key 一次設定全通行
你不用學指令 不用打指令 給 agy 一句話描述目標 它自己跑 自己驗證 只在需要人去 GitHub 貼公鑰那一步停下來告訴你
帶我設定 GitHub SSH key 直接下指令 每個步驟完成後告訴我下一步
你全程只做兩件事 看 agy 在 Chat 裡的訊息 到 GitHub SSH keys 頁面貼一次
Account key 一把通用全帳號 方便 也代表外洩就全淪陷
~/.ssh/id_ed25519 沒 .pub 那個檔 永遠不貼 不傳 不進 git 只貼 .pub
入門先求順 留空快 公用電腦 正式環境要設密碼
你的學習機可以空 但要知道有這選項
未來碰 CI / 部署到伺服器 再學 Deploy key 那台機器只該碰一個 repo 入門不用一次塞
私鑰 (id_ed25519) 跟 公鑰 (id_ed25519.pub) 差一個 .pub 帶 .pub 才能貼出去 不帶 .pub 永遠留在你電腦裡
看老師示範一次
R2 你自己跟 agy 一起跑
老師讓 agy 在 Chat 區跑 ssh-keygen 看終端機輸出長什麼樣
看公鑰怎麼複製 怎麼貼到 GitHub SSH keys 設定
看 ssh -T 出現 Hi 你的帳號 那一刻
不操作 只看老師示範一遍
R2 換你自己跑 也只要 5 分鐘
有問題等下分享觀察提出來
SSH key 是什麼 ・ 為什麼 Account-level ・ 三步驟總覽 ・ 三個全開的代價
ROUND 2 · 0:30–1:00
你不打指令 agy 自己跑 只在貼 GitHub 那一步停下
在 agy Chat 區貼這句
帶我設定 GitHub SSH key 直接下指令 每個步驟完成後告訴我下一步
A. 跑 ssh-keygen 產生金鑰
B. 自動複製公鑰到剪貼簿
C. 告訴你 公鑰已複製 請去 GitHub 貼上
D. 你貼完回 agy 說好了
E. agy 自動跑 ssh -T 驗證 告訴你 Hi 你的帳號
全程你只做兩件事 貼 prompt 跟 去 GitHub 貼公鑰 其他 agy 自己跑 自己驗證 自己回報
公鑰已經在你剪貼簿（agy 幫你複製好） Title 取個好認的名字 例如 my-laptop Key 欄位直接 cmd+V 貼 按綠色 Add SSH key 回去 agy 跟它說 好了
不是你做錯 是防火牆擋了 SSH 改走 HTTPS 的 443 就通了（請 agy 幫你加也行）
Host github.com HostName ssh.github.com Port 443 User git
今天先用上一堂 M2-1 的網頁流程跟著做完 push 與部署 回家在自己電腦補 IDE 版
不算落後 流程觀念完全相同
就是前頁那句 帶我設定 GitHub SSH key
github.com/settings/ssh/new Title 取好認的名字 Key 欄 cmd+V 貼上
等它自己跑 ssh -T 驗證
agy 回報 Hi 你的帳號 GitHub SSH keys 列表看到你取的名字 = 完成
卡住了 — 舉手 或把 agy 的錯誤訊息原句貼回去問它
公司電腦被擋（port 22 / 裝不了 IDE）— 回看前一頁 企業班備案
沒看到的舉手 一起檢查 多半是 GitHub 公鑰沒貼好 重貼一次就過了
github.com/settings/keys 看到 my-laptop（或你取的名字）就對了
id_ed25519（沒 .pub）永遠不貼出去 不傳訊息 不進 git
有效的 SSH key 對 ・ GitHub 認得你 ・ ssh -T 驗證通過 ・ 全帳號 repo 通行
ROUND 3 · 1:00–1:30
把 M2-2 的 slides.html 推上 GitHub Pages
M2-3 改成 IDE 跟 AI 講一句話 它幫你跑 commit + push 節省的不是 5 分鐘 是「不會忘了存檔」的安心感
把 M2-2 的 slides.html 複製進 my-first-page 資料夾
跟 AI 說 幫我 commit 跟 push 訊息寫 加上 M2-2 簡報
git add slides.html
git commit -m "加上 M2-2 簡報"
git push origin main
3 個指令一次跑完 你只看結果
把 M2-2 的 slides.html 放進 my-first-page
幫我 commit 跟 push 訊息寫 加上 M2-2 簡報
你的-username.github.io/my-first-page/slides.html
網址打得開 看到 8 頁簡報 翻頁正常 = 完成
卡住了 — 舉手 或把 AI 回的錯誤訊息原句貼回去問它
M2-1 你會了上傳 M2-2 你會了讓 AI 改檔 M2-3 兩個串起來 一句話從 IDE 直接送上線 你的 vibe coding 工作流今天完整了
形式 你的-username.github.io/my-first-page/slides.html
看簡報內容 配色 翻頁體驗
R4 我們會把這個簡報變成多頁網站的一部分
第一次 IDE push 經驗 ・ slides.html 上線 ・ commit + push 工作流 ・ LV1 達成
ROUND 4 · 1:30–2:00
首頁 簡報區 檔案下載 一個網址搞定
在 index.html 加導覽列 連到 slides.html 跟 files.html
三個 HTML 各自獨立 用 a 連結串起來 你不用懂語法 AI 寫
跟 AI 說
幫我把 my-first-page 升級成多頁網站
首頁 index.html 含 hero 加自我介紹
簡報區 連到 slides.html
檔案下載 列 PDF 跟 md 提供下載連結
所有頁面共用 navbar 統一風格
幫我把 my-first-page 升級成多頁個人網站 頁面架構 - index.html 首頁 含 hero + 自我介紹 + Pinned 作品 3 個 - slides.html 簡報區 列出我的所有簡報 - files.html 檔案下載 提供 PDF md 下載 - 共用 navbar 三個分頁切換 設計風格 - 配色 主綠 #0F9D8A 配深藍 #0B3C5D - 字體 Noto Sans TC - 手機 RWD 支援 最後 commit 跟 push 上 GitHub
頁面架構 = 給 AI 藍圖
設計風格 = 視覺一致
commit + push = 一句話完成從 0 到上線
自我介紹跟作品名稱改成你自己的
看它逐步回報 產出 → commit → push
三個分頁各切一次
三個分頁互相連得到 手機開也正常 = 完成
卡住了 — 舉手 或把跑版畫面截圖貼給 AI 說哪裡怪
形式 你的-username.github.io/my-first-page
看 navbar 是否好用 看三個分頁的設計差異
記下哪些設計細節讓它看起來專業
三頁個人介紹網站 ・ 多頁 prompt 模板 ・ navbar 與多頁協作觀念 ・ LV2 主線達成
ROUND 5 · 2:00–2:30
主任務 飲料點餐系統升級 進階學員可選二個專案
M1-2 你已經做過飲料點餐系統 用 GAS 版本 今天把它升級成 GitHub Pages 版本
你不用想新題目 直接把 M1-2 的 html 檔交給 agy 改版 一個 prompt 就完成
把 M1-2 的飲料點餐 html 拖到 agy 資料夾
下這一句 prompt
把這個飲料點餐 html 改版成 GitHub Pages 版本 做完直接開新 repo drink-order 部署上線 完成後給我網址
A. 讀你的 GAS 版 html 理解結構
B. 改成純前端版（localStorage 取代 Google Sheet）
C. 開新 repo drink-order push 上去
D. 開啟 GitHub Pages
E. 給你網址 你-username.github.io/drink-order
飲料點餐做完還有時間 挑一個你工作會用的
輸入主題 + 議題清單 輸出格式化 markdown 含 action items
每天打卡 看 30 天 streak localStorage 存資料
姓名電話 Email 備註 搜尋 / 標籤 / 匯出 CSV
輸入金額 + 描述 月度報表 + 圓餅圖 圖表用 Chart.js
拍照識別文字（OCR）or 手動鍵入 存成名片冊
25 分鐘工作 5 分鐘休息 當天番茄數累積追蹤
都是 vibe coding 社群分享多的高頻小應用 純前端能完成 不用後端 25 分鐘做完一個沒問題
就是 M1-2 課堂做的那個檔 找不到的舉手
等 agy 跑完 6 個步驟 拿到網址
做完把網址貼到群組
新 repo + 新網址 點餐流程能跑完 = 完成
卡住了 — 舉手 或把 agy 卡住那一步的訊息貼回去問它
講一句話介紹 你做了什麼 解決什麼問題
大家想的題目都不一樣 看別人怎麼想
回家可以接著做更多 因為流程你已經會了
一個新上線的作品 ・ 改版搬家 prompt 模板 ・ 從檔案到部署的完整工作流 ・ LV3 達成
ROUND 6 · 2:30–3:00
回顧今天的三個層級
三節合一 M2-1 GitHub 平台 ・ M2-2 IDE 改檔 ・ M2-3 直接部署
把 M2-2 的 slides.html 推上 GitHub Pages IDE 三個指令一次跑完
首頁 + 簡報區 + 檔案下載 一個 prompt 全部產出 + 部署
M1-2 飲料點餐搬上 Pages 25 分鐘部署完成
IDE 接 GitHub 跟 AI 講清楚要做什麼 看著它跑完整流程 不用回瀏覽器拖檔
今天的網站都是靜態的 下一堂課接 AI API 讓你的網頁能即時回應使用者 例如 AI 翻譯 摘要 客服
申請一個免費 API 串一個簡單工具
串到既有網站 例如客服分流 PDF 摘要
體驗 AI 自己列計畫 改 測 回報 的 agent 模式
下一堂結束 你的個人作品 / 工具 / 客服系統都會是真實能用的線上服務