Vibe Coding 實戰課 — Stage 2 · 串 AI
網頁三階段升級完成 — 你的網站，你的網址
按 → 或空白鍵開始
用 M1-1 學的指令能力，做更好的網頁
用 GitHub 上線，拿到短網址、版本控制、發布權
關鍵原則
全程瀏覽器操作，不使用終端機指令
手動上傳檔案到 GitHub — 先理解流程，再學工具
角色、任務、格式、限制 — 今天會直接使用
AI 聊天工具可正常使用
知道如何建立、命名、儲存檔案
今天不需要安裝任何軟體
所有操作都在瀏覽器裡完成
ROUND 1 · 0:00–0:20
M1-1 的能力升級 — 你知道怎麼要求了
回到 ChatGPT 或 Claude
用四要素寫一個完整指令
請 AI 產出一個個人品牌網頁
你是一位前端工程師 幫我做個人品牌網頁，要有： - Hero 區塊（姓名 + 一句話定位） - 關於我、技能列表、聯絡方式 深色模式、響應式設計、現代簡約風格 單頁 HTML，不用外部框架
同樣是 AI 聊天做 HTML，但你現在知道四要素
指令品質決定產出品質 — 這次你有方法了
不要只下一句話 — 用角色、任務、格式、限制四個維度描述
產出後用 Canvas / Artifacts 即時預覽
按右上角「Preview」
即時看到網頁效果
直接在 Canvas 裡對話修改
右側面板自動預覽
即時看到程式碼結果
按「Publish」取得分享連結
第一版出來後繼續對話：「配色改成...」「加一個區塊...」「手機版排版要好看」
先看畫面，不急著搬到 GitHub
確認手機與桌面都能正常瀏覽
若工具可匯出，就用匯出的版本上傳
GitHub 上的版本才是公開網站版本
Publish 連結或本機截圖皆可
跟自己的 M1-1 作品比較
M1-1 教了四要素，M2-1 立刻實戰驗證
接下來要解決的問題：這個網頁只存在你的電腦裡
本機 HTML 只能自己看
下一步：讓全世界都能用一個網址打開你的網頁
ROUND 2 · 0:20–0:40
像雲端資料夾，但有時光機
全世界最大的開源程式碼平台
2 億個專案在上面
GitHub Pages 讓你
免費發布靜態網頁
每次修改都記錄
隨時回到任何版本
不需要會寫程式也能用 GitHub
今天你只需要會上傳檔案和按按鈕
點右上角「Sign up」
使用者名稱會出現在你的網址裡 — 建議簡短、英文
到信箱點驗證連結
使用者名稱 = 你的網址前綴：username.github.io
取一個專業、好記的名字
Repository = 專案倉庫
例如 my-website — 用英文 + 連字號
這會自動建立第一個檔案
你的專案倉庫就建好了
→ URL 會亂碼或無法存取
→ 英文 + 連字號，簡短好記
像資料夾一樣
列出所有檔案
專案說明文件
自動顯示在頁面下方
Pages 部署、權限
各種進階設定
直接建 repo
幫還沒完成的同學看看卡在哪一步
你有了一個雲端專案空間
接下來要把 Round 1 做的網頁放上去
ROUND 3 · 0:40–1:05
你的網站即將上線
進入上傳介面
或點「choose your files」選取
例如「第一版個人網頁」— 描述這次上傳了什麼
檔案上傳完成
→ 三個月後你不知道自己改了什麼
→ 每筆紀錄都是一個清楚的存檔點
Commit = 存檔點
Message = 存檔說明 — 未來的你會感謝現在的你
在 repo 頁面上方的選項列
找到 GitHub Pages 設定區
告訴 GitHub 從哪個分支部署
GitHub 正在建置你的網站
全世界都能用這個網址看到
用手機掃網址 → 確認手機版也能正常顯示
把連結傳給朋友 → 他們也能打開
https://username.github.io/repo-name/
如果 repo 名稱取為 username.github.io
網址會變成 https://username.github.io/ — 更短更專業
檔案沒命名 index.html
→ GitHub 找不到入口
Pages 還沒 build 完
→ 等 1-2 分鐘再刷新
index.html 沒在根目錄
→ 放在 repo 最外層
1. 檔名是 index.html（不是 Index.html）
2. 檔案在 repo 根目錄
3. Pages Source 已設為 main branch
用 HTML 做線上履歷
面試時直接附網址
設計師、工程師
展示專案成果
開源專案的說明網站
教學文件、API 文件
這些網站全部免費架設、免費維護
你今天做的事情跟他們一模一樣
從 AI 聊天 → 存檔 → 上傳 GitHub → 全世界可見
全程瀏覽器操作，零行終端機指令
ROUND 4 · 1:05–1:25
每次上傳都是一個存檔點，永不丟失
「加一個作品集區塊」「改掉配色」「加上動畫效果」
用 Publish / Share 確認這一版可用
用網頁介面編輯或上傳工具匯出的版本
公開網址看到更新，才算同步完成
看到所有上傳紀錄的時間線
第一次上傳 + 這次修改
時光機 — 任何時間點的內容都還在
每一筆 Commit 都是一個完整的存檔點
改壞了 → 回到上一個版本
想看變化 → 對比任意兩個版本
這就是為什麼 GitHub 比 Google Drive 更適合做專案
不只存檔案，還記錄每一次的修改歷程
累積 3 個 commit
回到 Commits 頁面 → 看到三筆紀錄 → 體會「時光機」
- <h1>我的網頁</h1> + <h1>陳小明 — 數位行銷專家</h1> - background: #ffffff; + background: linear-gradient(135deg, #0B3C5D, #1A73E8);
紅色 = 被刪除的舊內容
綠色 = 新加入的內容
一眼看出每次改了什麼
改壞了永遠有退路，每次修改都被記錄
用四要素指令產出品牌網頁
雲端專案空間已建立
短網址、3+ commit、可回溯
你的 repo 是 Public — 全世界都看得到裡面的東西
ROUND 5 · 1:25–1:45
什麼該公開，什麼該保護
打開你的 repo 網址
所有檔案一覽無遺
Public repo 才能免費
使用 Pages 服務
API Key、Token
全世界都看得到
把 repo 改成 Private
404 — 網站消失了
Pages 恢復正常
GitHub Pages 免費版只支援 Public repo
Private repo 的 Pages 需要付費方案
展示用的內容放這裡
有機敏資料的放這裡
用來測試 Private 功能
輸入同學的 GitHub 帳號
其他人依然看不到
AWS Key 推到 Public repo
→ 被機器人掃到
→ 帳單 $12,000 美元
有 API Key 的程式碼
一定要放 Private repo
或用其他方式保護
作品集、個人網頁 → Public 沒問題
有密碼的程式碼 → 絕對不能放 Public
具體怎麼保護 → M2-2 會教
對比自己 M1-1 和 M2-1 的成果
M1-1 的你只會用 AI 聊天做 HTML
現在的你會部署、會版本控制、知道資安風險 — 差距在哪裡
Public = 開放式廚房，Private = 後廚
知道什麼該公開、什麼該保護
ROUND 6 · 1:45–2:00
從本機 HTML 到 GitHub Pages 的完整路徑
| M1-1 HTML | M1-4 GAS 網頁 | M2-1 GitHub Pages | |
|---|---|---|---|
| 網址 | 無（本機檔案） | 超長 GAS URL | 短網址 github.io |
| 修改方式 | 重新貼程式碼 | 重新部署 | 上傳新版 |
| 版本控制 | 無 | 無 | 有（Commit） |
| 速度 | 即時（本機） | 慢 | 快 |
| 控制權 | 完全 | 受 Google 限制 | 完全 |
每一次升級都解決了前一階段的痛點
GitHub Pages 是目前為止最完整的方案
你的網頁部署能力已從「只能自己看」升級到「全世界可見、有版本控制」
而且全程沒有打過一行終端機指令
不只學了什麼，是想法怎麼變了
從「在別人地盤做東西」→ 擁有可發布、可演進的數位資產
上線、版本控制、Public vs Private
Secrets + .gitignore — 把 M1-4 的工具安全搬到 GitHub
首次使用 VS Code — AI 在終端機裡幫你下指令
在 IDE 裡串接 AI API — 從使用者變成開發者
把你的 GitHub Pages 網址分享到社群
請三個人打開看看，收集他們的回饋
用 AI 再做一個完全不同主題的頁面
上傳到同一個 repo 或另建一個 repo
下堂課會用到你的 GitHub 帳號
下一堂課 — M2-2
M1-4 的 GAS 工具要搬到 GitHub — 過程中必須學會安全管理
M2-1 完成