Vibe Coding — Stage 2 · 上線網頁
M2-1 · GitHub 平台

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

GitHub
平台熟悉

把你 Stage 1 做的網頁 搬到全世界都能看到的地方

M2-1 3 小時 6 輪循環 純瀏覽器操作

按 → 或空白鍵開始

M2-1 ・ 3 小時

本模組你會做出什麼

同一個個人網頁 從本機檔案變成全世界都能開的網址

LV1
github.com/alan/my-page
Search...
●alan/my-pagePublic
main1 commit
index.htmlfirst upload
傳上去就完成了

先把網頁傳上去

LV2 ・ 必做主線
alan-chen.github.io
Search...
●alan-chen/alan-chen.github.ioPublic
<> CodeIssuesPull requestsActionsSettings
✓已部署alan-chen.github.io
main · 5 commitsUpdated 2h
README.md加上專案說明2h
index.html加深色模式3h
avatar.jpg放上頭像5h

短網址 改檔 留紀錄

LV3 ・ 完成後加做
github.com/alan-chen
Search repos
alan-chen
3 個 repo ・ 5 star
my-portfolio
個人作品集
ai-tools
AI 工具
resume
線上履歷
+ 新專案
下個想做的

多個作品 個人技術名片

今天不教程式 只教怎麼把已經有的網頁變成全世界都能開的網址

六輪循環 逐層遞進

Round 1註冊帳號
Round 2開 repo 上傳
Round 3部署網頁
Round 4commit 時光機
Round 5Public vs Private
Round 6三階段回顧
每一輪的節奏

操作指令 → 補強版參考 → 操作計時 → 分享觀察 → 小結反思
每一輪新增一層能力 前一輪的方法持續使用

今天 3 小時的路線

每 30 分鐘一個 Round 中間沒安排休息 卡住的人趁分享觀察喘口氣

0:00 – 0:30
Round 1
註冊帳號用 Gmail 一鍵建 GitHub 拿到 Username
0:30 – 1:00
Round 2
開 repo 上傳建第一個 repo 把 index.html 拖上去
1:00 – 1:30
Round 3
部署網頁Settings Pages 拿到你的網址 用手機開
1:30 – 2:00
Round 4
commit 時光機改 3 次累積 commit 看 history
2:00 – 2:30
Round 5
Public Private確認設對 認識真實案例
2:30 – 3:00
Round 6
回顧反思三階段對比 M2-2 預告
每個 Round 你會經歷

看概念 → 收到操作指令 → 看補強版範例 → 操作計時 → 跟同學分享觀察 → 看一句話小結　每輪都用一樣的節奏 你會很快上手

ROUND 1 · 0:00–0:30

先註冊
才有家

用 Gmail 一鍵建立你的 GitHub 帳號

GitHub 是什麼

本機檔案
→
GitHub
雲端倉庫
→
全世界
看你的網頁

有公開網址

免費拿一個 .github.io 網址 任何人手機電腦都能開

有時光機

每次改檔留下紀錄 改壞了能回到上一版

跟 IDE 串得起來

下一堂課 IDE 工具會直接接到你的 GitHub 自動同步

操作指令

打開 github.com/signup
用你的 Gmail 一鍵登入

操作條件

用你平常的 Gmail 不需要新申請 不需要信用卡
選一個英文 Username 這會變成你以後的網址

5 min
操作時間

常見起點 卡住可參考

三個步驟全部跑完約 5 分鐘

github.com/signup
Sign in
Sign up to GitHub
Continue with Google
or
Email · Password 不推薦

A. 打開 github.com/signup
B. 按 Continue with Google 選 Gmail
C. 選 Username 確認註冊

Username 怎麼取

這個名字會變成你的網址 改不掉 取個正式一點的

不推薦這樣取
  • ✗ alanchen2026　帶年份
  • ✗ Alan_Chen_75　底線大小寫
  • ✗ 陳小明　中文不能用
  • ✗ coolguy123　跟作品不像
推薦這樣取
  • ✓ alan-chen　連字號全小寫
  • ✓ achen　簡短好記
  • ✓ alantech　跟領域有關
技術規則

英數字 連字號 不能有空格 最多 39 字 不能用連字號開頭結尾 別人沒用過就能用

操作計時

5分鐘
完成後請報出你的 Username
遇到問題就跑除錯儀式

截錯誤訊息的圖　描述你剛做了什麼　貼給 AI　驗證修復
4 步驟之後我們每個 Round 都會用到

分享與觀察

1
把你的 GitHub Profile 連結貼到群組

網址會是 github.com/你的-username 例如 github.com/alan-chen

2
打開三位同學的 profile 看看

觀察大家怎麼取名 看頭像有沒有設 看 bio 寫什麼

3
記下你想要修一下的地方

沒有對錯 只是看別人怎麼呈現自己

看一個好 profile 長什麼樣

左邊是剛註冊的樣子 右邊是花 10 分鐘設定後的樣子

陽春版　剛註冊
github.com/alan-chen
Search...
alan-chen
No bio
No location
Popular repositories
You don't have any popular repositories yet
沒頭像 沒 bio 沒地點　別人看不出你是誰
完整版　10 分鐘設定後
github.com/alan-chen
Search...
Alan Chen
alan-chen
教 AI 教育的工程師
iPAS AI 應用規劃師認證
Taipei Taiwan
Pinned
my-first-page
第一個 GitHub 網頁
ai-tools
AI 工具集合
有頭像 有定位 有作品　別人 5 秒看懂你是誰
回家可以做的事

右上頭像 → Your profile → Edit profile　設頭像 設 bio 設地點　全部選填 但每個都讓你的 profile 更專業

真實案例　點開來看
github.com/sindresorhus
著名 OSS 作者 README 帶動畫卡片　看天花板級的 profile 長什麼樣

Round 1 小結

註冊只是入場券
真正的內容是接下來你要放進去的東西
這一輪你拿到

一個 GitHub 帳號 ・ 一個會變成你網址的 Username ・ 認識帳號首頁 ・ 看過好 profile 的樣子 ・ 第一次體會除錯儀式

ROUND 2 · 0:30–1:00

把第一個網頁
搬上 GitHub

開新 repo 再把 index.html 上傳

repo 是專案的家

repo 是什麼字

repo 是 repository 的縮寫 中文意思是「儲存庫」　寫程式的人懶得打全名 大家都叫它 repo
之後你會看到一堆地方寫 repo 都是同一個東西

電腦資料夾
→
GitHub repo
雲端版的資料夾
核心觀念

一個專案 一個 repo 像桌上一個資料夾　不同的網站 不同的工具 各自一個 repo 不會混在一起

操作指令

點 GitHub 右上角加號
選 New repository

填三個欄位

Owner 自動帶 你的 username
Repository name 填英文加連字號 例如 my-first-page
選 Public 勾 Add README file

為什麼一定選 Public

免費版 GitHub Pages 只能用 Public repo 發網頁 Private 不行

常見起點 New repo 設定畫面

github.com/new
Search...
Create a new repository
Owner
alan-chen
/
Repository name *
my-first-page
✓ my-first-page 可以用
Public
✓
Add a README file
Create repository

repo name 不要中文 不要空格 用英文加連字號　最後一定按綠色 Create repository

操作指令

在 repo 主頁找 Add file 按鈕
選 Upload files 把 index.html 拖進去

最容易卡的一步

學員常找不到上傳按鈕 因為它不在綠色 Code 按鈕裡 是藏在 Add file 下拉選單裡的第二項

檔名要正確

index.html 全小寫 不能是 Index.html 不能是 index.htm 拼錯了部署會失敗

Add file 下拉選單在這裡

github.com/alan-chen/my-first-page
Search...
●alan-chen/my-first-pagePublic
main ▾
Add file ▾
<> Code ▾
Create new file
Upload files
README.mdInitial commit
點 Add file → Upload files

拖檔到綠色虛線框裡

.../upload/main
Search...
Add files via upload
Drag files here to add them
to your repository
or
choose your files
✓index.html已上傳
Commit changes
Add index.html
Commit changes

操作計時

10分鐘
完成後請把 repo 網址貼到群組
目標

repo 主頁能看到 README.md 和 index.html 兩個檔案
commit 數字顯示 2 commits

分享與觀察

1
把 repo 網址貼到群組

網址形式 github.com/你的-username/my-first-page

2
打開三位同學的 repo

看大家的 commit message 寫什麼 看檔案列表長什麼樣

3
觀察 commit message 的差異

有人寫 update 有人寫 Add index.html 有人寫得更具體

從別人的 commit message 學寫法

過幾天會看不懂的
  • ✗ update
  • ✗ fix
  • ✗ change
  • ✗ 改了一些東西
  • ✗ asdfasdf
未來會感謝你的
  • ✓ 加上深色模式按鈕
  • ✓ 換 hero 區的標題
  • ✓ 修正手機版按鈕太小
  • ✓ 上傳頭像照片
寫法公式

動詞 + 改了什麼　例如 加上 換掉 修正 移除 重寫　一個 commit 一件事

Round 2 小結

傳上去不算結束
留下好的紀錄 是給未來的自己留禮物
這一輪你拿到

一個 Public repo ・ 第一筆自己寫的 commit ・ 知道 Add file 在哪 ・ commit message 寫法公式

ROUND 3 · 1:00–1:30

部署網頁
拿到你的網址

三個下拉選項 一個按鈕 就上線

GitHub Pages 是什麼

一句話

把你的 repo 自動變成一個公開網頁　網址是 你的-username.github.io/repo名字

完全免費

不需要付主機費 不需要綁信用卡 流量幾乎不限

自動部署

你每次 commit 都會自動重新發布 不用手動上傳

支援自訂網域

之後想接自己買的網域 也支援 不過今天先用預設網址

預期會踩坑

部署有 3 種常見失敗

看過這張等下卡關不會慌 對應原因直接走除錯儀式

檔名拼錯
Index.html 大寫 / index.htm 少 l / index.Html 混合大小寫
解 改成 index.html 全小寫
repo 是 Private
免費版 Pages 只能 Public 發布 Private 不行
解 Settings General Change visibility 改 Public
Source 沒設好
Branch 沒選 main 或路徑沒選 / (root)
解 重設 main + / (root) 按 Save

部署完網址打開看到 404 不是世界末日　8 成是這三個之一　截圖 + 你的 Settings Pages 設定截圖 一起貼給 AI 它能秒判斷

操作指令

repo 主頁最右邊的 Settings
左側選單往下找 Pages

設定三件事

Source 選 Deploy from a branch
Branch 選 main
路徑選 / (root) 按綠色 Save

不要混淆

repo 主頁右上頭像旁也有 Settings 那是帳號設定 不是 repo 設定 要用 repo tab 那一排最右邊的 Settings

Pages 設定畫面長這樣

.../settings/pages
Search...
General
Access
Branches
Pages
Environments
GitHub Pages
Source
Deploy from a branch ▾
Branch
main ▾
/ (root) ▾
Save

三個下拉選 main 跟 / (root) 按 Save　等 1 到 2 分鐘綠色 box 出現你的網址

看部署狀態 在 Actions tab

綠勾代表完成 黃點代表進行中 紅叉代表失敗

綠勾　完成了

通常 30 秒到 2 分鐘 回 Pages 頁重新整理就會看到網址

黃點　還在跑

建置中 不要關視窗 等 1 到 2 分鐘自然變綠

紅叉　失敗

點進去看訊息 常見原因 檔名拼錯 或選錯 branch 跑除錯儀式

操作計時

10分鐘
含等待 build 的時間
完成後

網址形式 你的-username.github.io/my-first-page
用手機打開試試 確認在小螢幕也能看

亮點時刻
專屬於你的網址
全世界都能開

打開手機 看到自己的網頁在小螢幕上　這串字以前只屬於有錢買主機的人　今天起 它屬於你

alan-chen.github.io
王小明
全端工程師
聯絡我
三件事一次成立
✓ 你不用裝伺服器
✓ 你不用付主機費
✓ 你不用懂網路設定
傳給朋友 他能直接打開　傳給長輩看 不用解釋怎麼裝

分享與觀察

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

不是 repo 網址 是 Pages 部署完拿到的那個 .github.io 網址

2
打開三位同學的網頁

真實打開 看載入速度 看手機表現 看版面好不好讀

3
找一個你最喜歡的版本

稍後 Round 4 改檔的時候可以參考它的做法

想要更短的網址 換 repo 名

現在你的網址

alan-chen.github.io/my-first-page

能用 但網址有點長

換 repo 名變這樣

alan-chen.github.io

repo 改成 你的-username.github.io 網址自動短一截

怎麼改

Settings → General → Repository name 改成 你的-username.github.io → 按 Rename　等 1 到 2 分鐘新網址生效

Round 3 小結

有網址不只是技術成就
是你開始能讓世界看到你的作品
這一輪你拿到

一個 .github.io 公開網址 ・ 自動部署機制 ・ 看 Actions 判讀部署狀態 ・ 知道網址能再升級

ROUND 4 · 1:30–2:00

改檔 重新上傳
看到時光機

每次上傳都是一個存檔點 永遠不會搞丟

commit 是存檔點

改檔
→
寫 commit message
→
commit 存檔點
永遠不會掉
為什麼重要

每次 commit 都被 GitHub 記下來 給一個編號
你可以隨時翻回去看任何一次的版本 改壞了能還原

這一輪你會做

至少改 3 次 index.html 累積 3 個 commit 看 commit history 體會時光機

操作指令

點 index.html 看內容
點右上鉛筆圖示 直接在瀏覽器改

這次改三個地方

1. 標題顏色　2. 加一段自我介紹文字　3. 加一個聯絡按鈕
每改一個就 Commit changes 一次 累積 3 個 commit

編輯介面長這樣

.../edit/main/index.html
Search...
5　<body>
6　　<h1 style="color:#0F9D8A">王小明</h1>
7　　<p>全端工程師　接案中</p>
8　</body>
Commit changes
換標題顏色為品牌綠
Commit changes

綠色高亮代表你改了什麼　每次按 Commit changes 就會留下一筆紀錄

三個 commit message 寫法練習

三個 commit 的範例
commit 1　換標題顏色為品牌綠
commit 2　加上自我介紹段落
commit 3　加上 Line 聯絡按鈕
寫好 commit message 的好處

下次 Round 4 結尾我們會回去看 commit history 你會看到自己一連串的改動
如果寫 update 就只看到一堆 update 寫具體就能一眼看出每筆做了什麼

操作計時

15分鐘
改 3 次 commit 3 次
目標

回 repo 主頁看到 5 commits　點 Commits 連結看到所有歷史

看 commit history 就是看時光機

.../my-first-page/commits/main
Search...
Commits on Nov 24, 2026
加上 Line 聯絡按鈕
alan-chen committed 2 min ago
a3f9e1c
加上自我介紹段落
alan-chen committed 5 min ago
7b2c4d8
換標題顏色為品牌綠
alan-chen committed 10 min ago
f1e5a2b
Add index.html
alan-chen committed 30 min ago
e8d3a91

點任何一筆 commit 都能看當時的版本　改壞了找上一筆好的複製出來重新上傳

亮點時刻
時光機在你手上
過去的版本永遠回得去

點任何一筆 commit 都能看到當時的網頁　從今天起 你的作品不會因為手滑改壞而消失　所有過去都被記下來

點 commit a3f9e1c
.../commit/a3f9e1c
加上 Line 聯絡按鈕
alan-chen committed 2 min ago
+ <a href="line">Line 我</a>
- <a href="email">Email</a>
→
看到那一刻的網頁
那個 commit 當時的狀態
王小明
全端工程師
Line 我

改壞了不慌　到 commits 找上一個好的 → 點進去 → 複製檔案內容 → 重新上傳　幾步就能還原

分享與觀察

1
把你的 commit history 連結貼出來

網址形式 github.com/你的-username/my-first-page/commits/main

2
打開三位同學的 history

看他們的 commit message 怎麼寫 看改了什麼

3
找一個寫得很好的

學起來 下次自己 commit 也這樣寫

Round 4 小結

commit message 是給未來的自己留筆記
寫具體一點 半年後翻回來會感謝你
這一輪你拿到

5 個累積的 commit ・ 看 commit history 的能力 ・ 寫人話 commit message 的習慣 ・ 改壞了不慌的安全感

ROUND 5 · 2:00–2:30

Public 還是 Private
怎麼選

原始碼公開 不代表網頁要登入才能看

兩個被搞混的東西

repo 的可見性

Public 代表原始碼任何人都能看
Private 代表只有你跟邀請的人能看

網頁誰能看

不管 repo 是 Public 還是 Private
部署出來的網頁都是公開的 任何人都能開

最常見的誤解

repo 設 Public 不等於 任何人都能改你的網頁
只有原始碼能看 改的權限只有你 別人連 commit 都做不了

預期會踩坑

不小心選了 Private 網頁就停了

這是 Stage 1 學員第一期最常踩的坑 排第三名

會發生什麼

你開 repo 時隨手選了 Private
網頁部署不了 顯示 Pages is currently disabled
網址打開是 404

怎麼還原

Settings → General → 拉到最下面 Danger zone
Change repository visibility → Make Public
輸入 repo 名確認 → 等 1 分鐘自動重新部署

為什麼會選錯

很多人直覺以為 Private 比較安全　其實 Public 的原始碼別人能看 但只有你能改　這堂課所有 repo 都用 Public 才能免費發網頁

操作指令

回到 repo 主頁
確認 repo 名字旁邊寫 Public

如果不小心選了 Private

Settings → General 滑到最下面 Danger zone
Change repository visibility 改回 Public
網頁要部署這一定要 Public

Public 跟 Private 完整對照

Public　免費發網頁的唯一選擇
  • ✓ 原始碼任何人能看
  • ✓ 能用 GitHub Pages 免費發布
  • ✓ 網頁公開 任何人都能開
  • ✓ 適合作品集 個人站 教學範例

注意　不要在程式碼裡寫密碼

Private　不能免費發網頁
  • ✓ 原始碼只有你跟邀請的人
  • ✗ 免費版不能用 GitHub Pages
  • ✓ 適合工作專案 客戶資料
  • ✓ 付費 Pro 才能 Private 發網頁

這堂課全部用 Public

真實案例 程式碼裡的密碼別放心上

2023 年某新創意外

工程師把 AWS Key 寫在程式碼裡 push 到 Public repo
10 分鐘內被機器人掃到 拿去挖礦
一週帳單 12000 美金

絕對不要

程式碼裡寫 API Key 密碼 Token 任何敏感字串

對的做法

M2-4 接 API 時會教標準流程　把 Key 放 .env 用 .gitignore 排除　不會 push 上 GitHub

這一輪要做的

等下故意貼一段假 Key 進去 commit 上去　當作 M2-4 用 IDE 檢查的教材

練習 故意 commit 一個假 API Key

這是教學設計 讓你體會踩坑 之後再學怎麼清

為什麼要故意做錯

很多人聽過 不要把 Key 寫進程式碼 但沒真的踩過 印象不深
這一輪你故意貼一段假 Key 進去 push 上 GitHub　M2-4 我們會用 IDE 掃這個假 Key 把它清掉

在 index.html 隨便找個地方貼這段假 Key
<!-- 故意留的假 Key 給 M2-4 教材用 不會真的有作用 -->
<script>
  const FAKE_API_KEY = "sk-fake1234567890abcdefghijklmnop";
  const FAKE_TOKEN = "ghp_demoOnlyToken9876543210";
</script>
操作步驟

A. 在 GitHub 上點 index.html → 點鉛筆編輯
B. 隨便找個 body 內的位置貼上面這段 code
C. commit message 寫 故意留假 Key 給後面教材用
D. 按 Commit changes

關鍵 這是假的 Key

它真的能被機器人掃到 但因為是假的 不會有實際後果　你練習踩坑 但沒風險　M2-4 學完安全檢查機制 我們再回來清

分享與觀察

1
互相檢查同學的 repo 是不是 Public

打開三位同學的 repo 主頁 看 repo 名字旁邊的小標籤

2
檢查程式碼裡有沒有敏感資訊

點 index.html 看完整內容 找有沒有 KEY PASSWORD TOKEN 之類的字

3
有的話互相提醒對方移除

記得改了之後 commit 移除舊紀錄 比較複雜這堂課先不教 下一堂深入

Round 5 小結

Public 不可怕 密碼放進去才可怕
下一堂課我們教你怎麼安全管理
這一輪你拿到

確認 Public 設定正確 ・ 知道 Public 跟 Private 的真實差別 ・ 程式碼安全意識 ・ 為 M2-2 鋪好底

ROUND 6 · 2:30–3:00

三階段網頁
你都做過了

看一次完整的升級之路

六輪回顧

Round 1註冊帳號
Round 2開 repo 上傳
Round 3部署網頁
Round 4commit 時光機
Round 5Public vs Private
Round 6回顧反思

每一輪都在前一輪的基礎上加一層　最後你帶走的不只是網頁　是一整套網頁管理的工作流

網頁進化三階段

LEVEL 1 ・ M1-1

AI 聊天做 HTML

file:/// 本機檔案
只能存自己電腦
分享要傳檔案
手機朋友看不到
LEVEL 2 ・ M1-4

GAS 做網頁

script.google.com/.../exec
有公開網址
能讀 Sheet 資料
網址超長 不能客製
LEVEL 3 ・ M2-1 你在這

GitHub Pages

alan-chen.github.io
短網址 漂亮網域
每次改有版本紀錄
能接 IDE 自動同步

三個工具各有適合場景

不是 GitHub Pages 比較厲害 而是你現在三個都會用 以後做不同專案能挑對工具

M2-1 帶走清單

作品產出
  • ✓ 一個上線的 GitHub Pages 網頁
  • ✓ 5 個累積的 commit 紀錄
  • ✓ 一個 username.github.io 網址
能力習慣
  • ✓ GitHub UI 全主要按鈕位置
  • ✓ commit message 寫人話
  • ✓ Public Private 判斷
  • ✓ 4 步驟除錯儀式

除錯儀式 每個 Round 都用到了

1
看到錯誤
→
2
截圖描述
→
3
貼給 AI
→
4
驗證修復
為什麼這 4 步重要

Stage 1 第一期 56% 學員主訴痛點是 卡關時不知道怎麼辦
有了這套儀式 你下次卡關不用慌 跟著走就解 80% 的問題

下一堂 M2-2 預告

IDE 工具登場

今天你用瀏覽器一個一個拖檔上傳　下一堂課換 IDE 直接改你的檔案 AI 改完自動同步

LV1

把 index.html 丟進 IDE 讓 AI 改

LV2 必做主線

讀 PDF 整理成報告 md

LV3 加做

md 變成簡報 html

下次見

把今天的網頁丟進 IDE 你會發現修改網頁變成 跟 AI 對話就好

◈ 章節 ▲
1 / 59