Vibe Coding — Stage 2 · 上線網頁
M2-3 · IDE 接 GitHub

Vibe Coding 實戰課 — Stage 2 · 上線網頁

IDE 接 GitHub
直接部署

M2-2 做的作品 一句話 push 上 GitHub Pages

M2-3 3 小時 6 輪循環 SSH 金鑰 一次設定

按 → 或空白鍵開始

M2-3 ・ 3 小時

本模組你會做出什麼

M2-2 做的作品 從本機檔案 一路 push 到 GitHub Pages 上線

LV1
agy ・ my-slides/
SOURCE CONTROL
▾ Changes (1)
slides.html
Source Control
✓ Connected to github.com/alan/my-slides
$ git push origin main
✓ Deploy to alan.github.io
▸ Chat
幫我 push 上 GitHub
已 push 部署中✓ 1 分鐘後上線

把作品直接 push 上線

LV2 ・ 必做主線
alan-chen.github.io
Search...
Alan Chen
教 AI 教育的工程師
關於我
簡報
下載
最新作品
研究報告分析 ・ AI 工具評測

多頁網站 含簡報跟下載

LV3 ・ 完成後加做
alan.github.io/new-project
Search...
全新專案
從零到部署 25 分鐘
AI 翻譯器
客戶查詢

重做新專案部署上線

IDE 跟 GitHub 串起來 AI 改完直接 push 上線 不用回瀏覽器拖檔

六輪循環 逐層遞進

Round 1SSH key 是什麼
Round 2自己跑 ssh-keygen
Round 3LV1 第一次 push
Round 4LV2 多頁網站
Round 5LV3 重做新專案
Round 6回顧反思
每一輪的節奏

操作指令 → 補強版參考 → 操作計時 → 分享觀察 → 小結反思

今天 3 小時的路線

0:00 – 0:30
Round 1
SSH key 觀念一次設定 全帳號通行 為什麼這樣選
0:30 – 1:00
Round 2
跑 ssh-keygen生金鑰 貼 GitHub 驗證
1:00 – 1:30
Round 3
LV1 第一次 push把 M2-2 slides.html push 上線
1:30 – 2:00
Round 4
LV2 多頁網站個人介紹頁 + 簡報 + 檔案下載
2:00 – 2:30
Round 5
LV3 重做新專案從零開始一個全新作品部署上線
2:30 – 3:00
Round 6
回顧三階段對比 M2-4 預告

ROUND 1 · 0:00–0:30

SSH 金鑰
一次設定 全帳號通

vibe coding 的精神
不讓基礎設施卡住創作流程

SSH key 是 GitHub 認你的鑰匙

SSH 是什麼字

SSH 是 Secure Shell 縮寫 安全通訊協定　key 就是金鑰
你產出一對金鑰 公鑰貼到 GitHub 私鑰留在本機　以後本機跟 GitHub 對話都用這對金鑰認證

本機生一對金鑰
公鑰 + 私鑰
→
公鑰貼 GitHub
→
驗證通了
所有 repo 全帳號通

為什麼選 Account-level SSH key

GitHub 有三種認證方式 給入門選最順的

本堂選這個

Account SSH key

push / pull 程式碼
  • ✓ 一次設定 所有 repo 通
  • ✓ 不會過期
  • ✓ 入門最順
  • ✗ 一把鑰匙管所有 repo
部署機才用

Deploy key

部署機推單一 repo
  • ✓ 每把鑰匙只能碰一個 repo
  • ✓ 細權限 安全度高
  • ✗ 每個 repo 要重設一次
  • ✗ 入門被勸退
API 操作用

Personal Token

建 repo / 開 PR / 改設定
  • ✓ HTTPS 環境用
  • ✓ 細權限可調
  • ✗ 會過期要重產 fine-grained
  • ✗ 字串易誤貼外洩
入門就用 Account SSH key

學員今天建 repo-A 明天 repo-B　如果每個 repo 都要重設 Deploy key 光這關就勸退一半　Account key 一次設定全通行

整套流程 一句話讓 agy 全跑

vibe coding 真正的精神

學員不用學指令 不用打指令　給 agy 一句話描述目標　它自己跑 自己驗證 只在需要人去 GitHub 貼公鑰那一步停下來告訴你

你給 agy 的一句話 就這樣
帶我設定 GitHub SSH key 直接下指令
每個步驟完成後告訴我下一步
agy 自己跑
ssh-keygen
→
告訴你
公鑰已複製
→
你去 GitHub 貼
→
agy 自己驗證
告訴你 Hi 帳號

你全程只做兩件事 看 agy 在 Chat 裡的訊息　到 GitHub SSH keys 頁面貼一次

全開的三個代價 要建立觀念

Account key 一把通用全帳號 方便 也代表外洩就全淪陷

代價 1 私鑰絕不外流

~/.ssh/id_ed25519 沒 .pub 那個檔　永遠不貼 不傳 不進 git　只貼 .pub

代價 2 passphrase 留空

入門先求順 留空快　公用電腦 正式環境要設密碼
你的學習機可以空 但要知道有這選項

代價 3 長大要分權

未來碰 CI / 部署到伺服器　再學 Deploy key 那台機器只該碰一個 repo　入門不用一次塞

最重要的一條規則

私鑰 (id_ed25519) 跟 公鑰 (id_ed25519.pub) 差一個 .pub　帶 .pub 才能貼出去　不帶 .pub 永遠留在你電腦裡

操作指令

看老師示範一次
R2 你自己跟 agy 一起跑

這 15 分鐘觀察什麼

老師讓 agy 在 Chat 區跑 ssh-keygen　看終端機輸出長什麼樣
看公鑰怎麼複製 怎麼貼到 GitHub SSH keys 設定
看 ssh -T 出現 Hi 你的帳號 那一刻

操作計時

5分鐘
看老師示範 + 認識觀念
這 5 分鐘做的

不操作 只看老師示範一遍
R2 換你自己跑 也只要 5 分鐘
有問題等下分享觀察提出來

Round 1 小結

SSH key 一次設定 全帳號通行
不讓基礎設施卡住你的創作流
這一輪你拿到

SSH key 是什麼 ・ 為什麼 Account-level ・ 三步驟總覽 ・ 三個全開的代價

ROUND 2 · 0:30–1:00

一句話讓 agy 全跑
5 分鐘搞定

你不打指令 agy 自己跑 只在貼 GitHub 那一步停下

操作指令 一句話而已

在 agy Chat 區貼這句

複製貼上
帶我設定 GitHub SSH key 直接下指令
每個步驟完成後告訴我下一步
agy 會自己做的事

A. 跑 ssh-keygen 產生金鑰
B. 自動複製公鑰到剪貼簿
C. 告訴你 公鑰已複製 請去 GitHub 貼上
D. 你貼完回 agy 說好了
E. agy 自動跑 ssh -T 驗證 告訴你 Hi 你的帳號

agy 自動跑的對話長這樣

agy ・ Chat with Gemini
帶我設定 GitHub SSH key 直接下指令 每個步驟完成後告訴我下一步
▸ 跑 ssh-keygen -t ed25519 -C "[email protected]"
✓ 金鑰已生成 在 ~/.ssh/id_ed25519
▸ 跑 pbcopy < ~/.ssh/id_ed25519.pub
✓ 公鑰已複製到剪貼簿
⏸ 換你做了 去 github.com/settings/ssh/new
　 New SSH key → Title 寫 my-laptop → Key 直接 cmd+V 貼上 → Add
　 貼完跟我說 好了
好了
▸ 跑 ssh -T [email protected]
✓ Hi alan-chen! 驗證成功
✓ 從此你所有 repo push 不用再碰權限

全程你只做兩件事 貼 prompt 跟 去 GitHub 貼公鑰　其他 agy 自己跑 自己驗證 自己回報

你做的唯一步驟 去 GitHub 貼公鑰

github.com/settings/ssh/new
Search...
Add new SSH Key
Title
my-laptop
Key type
Authentication Key ▾
Key　cmd+V 直接貼
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI[此處為你公鑰的 base64 內容 約 60+ 字元] [email protected]
Add SSH key

公鑰已經在你剪貼簿（agy 幫你複製好）　Title 取個好認的名字 例如 my-laptop　Key 欄位直接 cmd+V 貼　按綠色 Add SSH key　回去 agy 跟它說 好了

操作計時

5分鐘
貼 prompt + 等 + 去 GitHub 貼一次 + 等
完成目標

agy 回報 Hi 你的-username　GitHub Settings → SSH keys 看到 my-laptop　從此所有 repo push 不用再問權限

為什麼這麼快

你沒打任何指令 沒記任何語法　全程靠一句 prompt + 一次貼上動作　這就是 vibe coding 不被基礎設施卡住的精神

預期會踩坑

SSH 設定常見三種卡關

不小心貼到私鑰
把 id_ed25519 沒 .pub 那個貼到 GitHub
解 立刻刪掉那把 重新貼正確的 .pub
pbcopy 在 Linux 不能用
macOS 用 pbcopy Windows 用 clip
解 Linux 改 cat ~/.ssh/id_ed25519.pub 自己選
ssh -T 顯示 Permission denied
公鑰沒貼好 或漏貼
解 回 GitHub 確認 SSH keys 列表有那一把

分享與觀察

1
agy Chat 裡有跳出 Hi 你的帳號 嗎

沒看到的舉手 一起檢查 多半是 GitHub 公鑰沒貼好 重貼一次就過了

2
到 GitHub Settings 確認 SSH keys

github.com/settings/keys 看到 my-laptop（或你取的名字）就對了

3
記得私鑰不能外流

id_ed25519（沒 .pub）永遠不貼出去 不傳訊息 不進 git

Round 2 小結

這把金鑰一次設定 你所有 repo 從此都通了
不會再有任何重設權限的麻煩
這一輪你拿到

有效的 SSH key 對 ・ GitHub 認得你 ・ ssh -T 驗證通過 ・ 全帳號 repo 通行

ROUND 3 · 1:00–1:30

LV1
第一次 push 上線

把 M2-2 的 slides.html 推上 GitHub Pages

push 是什麼意思

你 IDE 改完的檔案
→
commit 留紀錄
→
push 推上 GitHub
公開網頁更新
M2-1 你用的是手動拖檔 上傳到 GitHub

M2-3 改成 IDE 跟 AI 講一句話 它幫你跑 commit + push　節省的不是 5 分鐘 是「不會忘了存檔」的安心感

操作指令

把 M2-2 的 slides.html 複製進 my-first-page 資料夾
跟 AI 說 幫我 commit 跟 push 訊息寫 加上 M2-2 簡報

AI 會做的事

git add slides.html
git commit -m "加上 M2-2 簡報"
git push origin main
3 個指令一次跑完 你只看結果

push 過程 IDE 顯示的樣子

agy ・ my-first-page/
SOURCE CONTROL
▾ Changes (1)
slides.html ●
▾ Staged
slides.html
Source Control
$ git add slides.html
✓ Added
$ git commit -m "加上 M2-2 簡報"
✓ [main e8d3a91] 加上 M2-2 簡報
1 file changed 8 pages added
$ git push origin main
✓ Pushed to alan-chen/my-first-page
▸ Chat
幫我 commit 跟 push slides.html
已完成✓ commit e8d3a91✓ pushed to main✓ Pages 1 分鐘後更新

操作計時

15分鐘
push + 等待 Pages 部署
完成確認

用瀏覽器開 你的-username.github.io/my-first-page/slides.html
看到 8 頁簡報 翻頁正常

亮點時刻
IDE 跟 GitHub 通了
你的作品不再只是本機檔案

M2-1 你會了上傳　M2-2 你會了讓 AI 改檔　M2-3 兩個串起來 一句話從 IDE 直接送上線　你的 vibe coding 工作流今天完整了

M2-1
拖檔上傳
M2-2
IDE 改檔
M2-3
一句話 push

分享與觀察

1
把你的簡報網址貼到群組

形式 你的-username.github.io/my-first-page/slides.html

2
打開三位同學的簡報

看簡報內容 配色 翻頁體驗

3
你想下一步做什麼

R4 我們會把這個簡報變成多頁網站的一部分

Round 3 小結

IDE 不再只是改你的本機檔案
它幫你把改動推上雲端 還會跟你說做了什麼
這一輪你拿到

第一次 IDE push 經驗 ・ slides.html 上線 ・ commit + push 工作流 ・ LV1 達成

ROUND 4 · 1:30–2:00

LV2
多頁個人介紹網站

首頁 簡報區 檔案下載 一個網址搞定

多頁網站 = 多個 HTML 連起來

index.html
首頁
→
slides.html
簡報區
→
files.html
檔案下載
怎麼讓它們相連

在 index.html 加導覽列 連到 slides.html 跟 files.html
三個 HTML 各自獨立 用 a 連結串起來 學員不用懂語法 AI 寫

操作指令

跟 AI 說
幫我把 my-first-page 升級成多頁網站

給 AI 的需求清單

首頁 index.html 含 hero 加自我介紹
簡報區 連到 slides.html
檔案下載 列 PDF 跟 md 提供下載連結
所有頁面共用 navbar 統一風格

多頁網站的 prompt 模板

複製這段
幫我把 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 到上線

產出的多頁網站長這樣

alan-chen.github.io/my-first-page
Search...
Alan Chen
教 AI 教育的工程師
關於我
/index.html
簡報區
/slides.html
檔案下載
/files.html
最新作品
研究報告分析 2026-Q4 ・ AI 工具評測 2026-Q3 ・ 個人介紹頁 2026-Q1

操作計時

25分鐘
含 AI 產出三個 HTML + push + 確認上線
完成目標

三個 HTML 都產出 互相連得到
push 上 GitHub Pages
用手機開首頁 三個分頁都能切換

分享與觀察

1
把你的首頁網址貼到群組

形式 你的-username.github.io/my-first-page

2
打開三位同學的網站

看 navbar 是否好用 看三個分頁的設計差異

3
找一個最像個人品牌的

記下哪些設計細節讓它看起來專業

Round 4 小結

你的個人技術名片從一頁變三頁
一個 prompt 一句話 AI 全部做完
這一輪你拿到

三頁個人介紹網站 ・ 多頁 prompt 模板 ・ navbar 與多頁協作觀念 ・ LV2 主線達成

ROUND 5 · 2:00–2:30

LV3
把 M1-2 飲料點餐
從 GAS 搬上 GitHub

主任務 飲料點餐系統升級　進階學員可選二個專案

主任務 把 M1-2 飲料點餐搬到 GitHub

為什麼這個任務

M1-2 你已經做過飲料點餐系統 用 GAS 版本　今天把它升級成 GitHub Pages 版本
學員不用想新題目 直接帶你 M1-2 的 html 檔給 agy 改版 一個 prompt 就完成

M1-2 GAS 飲料點餐 html
→
給 agy 改版
→
部署 GitHub Pages
短網址 + 自訂主題

操作指令 一句話讓 agy 全跑

把 M1-2 的飲料點餐 html 拖到 agy 資料夾
下這一句 prompt

複製貼上
把這個飲料點餐 html 改版成 GitHub Pages 版本
做完直接開新 repo drink-order 部署上線
完成後給我網址
agy 會自己做的事

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 存資料

客戶簡易 CRM

姓名電話 Email 備註　搜尋 / 標籤 / 匯出 CSV

記帳分類器

輸入金額 + 描述　月度報表 + 圓餅圖 圖表用 Chart.js

名片數位化

拍照識別文字（OCR）or 手動鍵入　存成名片冊

番茄鐘計時器

25 分鐘工作 5 分鐘休息　當天番茄數累積追蹤

為什麼這些題目

都是 vibe coding 社群分享多的高頻小應用 純前端能完成 不用後端　25 分鐘做完一個沒問題

agy 跑改版的對話樣子

agy ・ drink-order/
SOURCE CONTROL
▾ drink-order
✓ Connected
EXPLORER
▾ drink-order
m1-2-gas.html
index.html
README.md
Agent Tasks
✓ 1. 讀 m1-2-gas.html 理解結構
✓ 2. 把 Google Sheet 寫入改成 localStorage
✓ 3. 產出 index.html 純前端版
✓ 4. 開新 repo drink-order 推上去
✓ 5. 開啟 GitHub Pages
✓ 6. 部署完成
→ alan-chen.github.io/drink-order
▸ Chat
把這個飲料點餐 html 改版成 GitHub Pages 版本
我看到 M1-2 的 GAS 版 改成純前端 6 步驟跑完✓ 全部完成→ 點網址開來看

操作計時

25分鐘
從想題目到部署上線
完成目標

一個新的 GitHub repo 跟 你的-username.github.io/repo-name 的新網址
把網址貼到群組 跟同學分享你做了什麼

分享與觀察

1
你的新專案是什麼

講一句話介紹 你做了什麼 解決什麼問題

2
打開三位同學的新專案

大家想的題目都不一樣 看別人怎麼想

3
記下你想再做的下一個

回家可以接著做更多 因為流程你已經會了

Round 5 小結

25 分鐘從想法到上線網頁
這個能力過去 5 年只有工程師有
這一輪你拿到

一個全新的線上作品 ・ 新專案 prompt 模板 ・ 從 0 到部署的完整工作流 ・ LV3 達成

ROUND 6 · 2:30–3:00

部署你會了
下一堂要串 API

回顧今天三層 預告 M2-4

六輪回顧

Round 1SSH token
Round 2接 IDE
Round 3LV1 push
Round 4LV2 多頁
Round 5LV3 新專案
Round 6回顧反思

三節合一　M2-1 GitHub 平台 ・ M2-2 IDE 改檔 ・ M2-3 直接部署

今天完成的三個任務

LV1

第一次 push

把 M2-2 的 slides.html 推上 GitHub Pages　IDE 三個指令一次跑完

LV2 必做主線

多頁個人網站

首頁 + 簡報區 + 檔案下載　一個 prompt 全部產出 + 部署

LV3 完成後加做

全新專案

從零開始一個新作品 25 分鐘部署完成

三層共通的事

IDE 接 GitHub　跟 AI 講清楚要做什麼　看著它跑完整流程　不用回瀏覽器拖檔

M2-3 帶走清單

作品產出
  • ✓ 升級版 my-first-page 多頁
  • ✓ 一個全新 repo 跟 新網址
  • ✓ 至少 5 個累積 commit
能力習慣
  • ✓ 產 token 接 IDE 流程
  • ✓ 一句話 commit + push
  • ✓ 多頁 prompt 模板
  • ✓ 新專案 prompt 模板

下一堂 M2-4 預告

申請 API 串接

今天的網站都是靜態的　下一堂課接 AI API　讓你的網頁能即時回應使用者　例如 AI 翻譯 摘要 客服

LV1

申請一個免費 API 串一個簡單工具

LV2 必做主線

串到既有網站 例如客服分流 PDF 摘要

LV3 加做

體驗 AI 自己列計畫 改 測 回報 的 agent 模式

Stage 2 終點在即

下一堂結束 你的個人作品 / 工具 / 客服系統都會是真實能用的線上服務

◈ 章節 ▲
1 / 50