王小明
全端工程師
聯絡我
Vibe Coding 實戰課 — Stage 2 · 上線網頁
把你 Stage 1 做的網頁 搬到全世界都能看到的地方
按 → 或空白鍵開始
M2-1 ・ 3 小時
同一個個人網頁 從本機檔案變成全世界都能開的網址
先把網頁傳上去
短網址 改檔 留紀錄
多個作品 個人技術名片
今天不教程式 只教怎麼把已經有的網頁變成全世界都能開的網址
操作指令 → 補強版參考 → 換你操作 → 分享觀察 → 小結反思
每一輪新增一層能力 前一輪的方法持續使用
每 30 分鐘一個 Round 中間沒安排休息 卡住的人趁分享觀察喘口氣
看概念 → 收到操作指令 → 看補強版範例 → 換你操作 → 跟同學分享觀察 → 看一句話小結 每輪都用一樣的節奏 你會很快上手
ROUND 1 · 0:00–0:30
用 Gmail 一鍵建立你的 GitHub 帳號
免費拿一個 .github.io 網址 任何人手機電腦都能開
每次改檔留下紀錄 改壞了能回到上一版
放上去的作品會累積 變成一個別人打開就看得到的作品集
打開 github.com/signup
用你的 Gmail 一鍵登入
用你平常的 Gmail 不需要新申請 不需要信用卡
選一個英文 Username 這會變成你以後的網址
三個步驟全部跑完約 5 分鐘
A. 打開 github.com/signup
B. 按 Continue with Google 選 Gmail
C. 選 Username 確認註冊
這個名字會變成你的網址 改不掉 取個正式一點的
英數字 連字號 不能有空格 最多 39 字 不能用連字號開頭結尾 別人沒用過就能用
按 Continue with Google 選你平常的 Gmail
照前頁的推薦取法 這會變成你以後的網址
等其他同學的時候 可以先逛一下 github.com 首頁
github.com/你的-username 這個網址打得開 = 完成
卡住了 — 截圖錯誤訊息 描述你剛做了什麼 貼給 AI 驗證修復 這套除錯儀式每個 Round 都會用到
網址會是 github.com/你的-username 例如 github.com/alan-chen
觀察大家怎麼取名 看頭像有沒有設 看 bio 寫什麼
沒有對錯 只是看別人怎麼呈現自己
左邊是剛註冊的樣子 右邊是花 10 分鐘設定後的樣子
右上頭像 → Your profile → Edit profile 設頭像 設 bio 設地點 全部選填 但每個都讓你的 profile 更專業
一個 GitHub 帳號 ・ 一個會變成你網址的 Username ・ 認識帳號首頁 ・ 看過好 profile 的樣子 ・ 第一次體會除錯儀式
ROUND 2 · 0:30–1:00
開新 repo 再把 index.html 上傳
repo 是 repository 的縮寫 中文意思是「儲存庫」 寫程式的人懶得打全名 大家都叫它 repo
之後你會看到一堆地方寫 repo 都是同一個東西
一個專案 一個 repo 像桌上一個資料夾 不同的網站 不同的工具 各自一個 repo 不會混在一起
點 GitHub 右上角加號
選 New repository
Owner 自動帶 你的 username
Repository name 填英文加連字號 例如 my-first-page
選 Public 勾 Add README file
免費版 GitHub Pages 只能用 Public repo 發網頁 Private 不行
repo name 不要中文 不要空格 用英文加連字號 最後一定按綠色 Create repository
在 repo 主頁找 Add file 按鈕
選 Upload files 把 index.html 拖進去
上傳按鈕不在綠色 Code 按鈕裡 藏在 Add file 下拉選單的第二項 很多人在這裡找半天
index.html 全小寫 不能是 Index.html 不能是 index.htm 拼錯了部署會失敗
名字填 my-first-page 選 Public 勾 Add README file
就是 Stage 1 做的那個檔 拖進綠色虛線框
完成後把 repo 網址貼到群組
repo 主頁看得到 README.md 和 index.html 兩個檔 顯示 2 commits = 完成
卡住了 — 舉手 或回看前兩頁的畫面對照你卡在哪一步 截圖貼給 AI
網址形式 github.com/你的-username/my-first-page
看大家的 commit message 寫什麼 看檔案列表長什麼樣
有人寫 update 有人寫 Add index.html 有人寫得更具體
動詞 + 改了什麼 例如 加上 換掉 修正 移除 重寫 一個 commit 一件事
一個 Public repo ・ 第一筆自己寫的 commit ・ 知道 Add file 在哪 ・ commit message 寫法公式
ROUND 3 · 1:00–1:30
三個下拉選項 一個按鈕 就上線
把你的 repo 自動變成一個公開網頁 網址是 你的-username.github.io/repo名字
不需要付主機費 不需要綁信用卡 流量幾乎不限
你每次 commit 都會自動重新發布 不用手動上傳
之後想接自己買的網域 也支援 不過今天先用預設網址
看過這張等下卡關不會慌 對應原因直接走除錯儀式
部署完網址打開看到 404 不是世界末日 8 成是這三個之一 截圖 + 你的 Settings Pages 設定截圖 一起貼給 AI 它能秒判斷
repo 主頁最右邊的 Settings
左側選單往下找 Pages
Source 選 Deploy from a branch
Branch 選 main
路徑選 / (root) 按綠色 Save
repo 主頁右上頭像旁也有 Settings 那是帳號設定 不是 repo 設定 要用 repo tab 那一排最右邊的 Settings
三個下拉選 main 跟 / (root) 按 Save 等 1 到 2 分鐘綠色 box 出現你的網址
綠勾代表完成 黃點代表進行中 紅叉代表失敗
通常 30 秒到 2 分鐘 回 Pages 頁重新整理就會看到網址
建置中 不要關視窗 等 1 到 2 分鐘自然變綠
點進去看訊息 常見原因 檔名拼錯 或選錯 branch 跑除錯儀式
是 repo tab 那排的 Settings 不是頭像旁的帳號 Settings
三個下拉照前頁畫面選 按綠色 Save
等待時可以到 Actions tab 看部署進度
手機打開 你的-username.github.io/my-first-page 看得到你的網頁 = 完成
卡住了 — 打開是 404 先對照三種常見失敗那頁 再截圖 + Pages 設定畫面一起貼給 AI
打開手機 看到自己的網頁在小螢幕上 這串字以前只屬於有錢買主機的人 今天起 它屬於你
不是 repo 網址 是 Pages 部署完拿到的那個 .github.io 網址
真實打開 看載入速度 看手機表現 看版面好不好讀
稍後 Round 4 改檔的時候可以參考它的做法
alan-chen.github.io/my-first-page
能用 但網址有點長
alan-chen.github.io
repo 改成 你的-username.github.io 網址自動短一截
Settings → General → Repository name 改成 你的-username.github.io → 按 Rename 等 1 到 2 分鐘新網址生效
一個 .github.io 公開網址 ・ 自動部署機制 ・ 看 Actions 判讀部署狀態 ・ 知道網址能再升級
ROUND 4 · 1:30–2:00
每次上傳都是一個存檔點 永遠不會搞丟
每次 commit 都被 GitHub 記下來 給一個編號
你可以隨時翻回去看任何一次的版本 改壞了能還原
至少改 3 次 index.html 累積 3 個 commit 看 commit history 體會時光機
點 index.html 看內容
點右上鉛筆圖示 直接在瀏覽器改
1. 標題顏色 2. 加一段自我介紹文字 3. 加一個聯絡按鈕
每改一個就 Commit changes 一次 累積 3 個 commit
綠色高亮代表你改了什麼 每次按 Commit changes 就會留下一筆紀錄
commit 1 換標題顏色為品牌綠 commit 2 加上自我介紹段落 commit 3 加上 Line 聯絡按鈕
等下這一輪結尾我們會回去看 commit history 你會看到自己一連串的改動
如果寫 update 就只看到一堆 update 寫具體就能一眼看出每筆做了什麼
直接在瀏覽器裡改 不用下載檔案
標題顏色 → 自我介紹段落 → 聯絡按鈕 各 commit 一次
例如 換標題顏色為品牌綠 不要只寫 update
repo 主頁顯示 5 commits 網頁重新整理看得到三處改動 = 完成
卡住了 — 舉手 或回看編輯介面那頁 找不到鉛筆圖示就截圖貼給 AI
點任何一筆 commit 都能看當時的版本 改壞了找上一筆好的複製出來重新上傳
點任何一筆 commit 都能看到當時的網頁 從今天起 你的作品不會因為手滑改壞而消失 所有過去都被記下來
改壞了不慌 到 commits 找上一個好的 → 點進去 → 複製檔案內容 → 重新上傳 幾步就能還原
網址形式 github.com/你的-username/my-first-page/commits/main
看他們的 commit message 怎麼寫 看改了什麼
學起來 下次自己 commit 也這樣寫
5 個累積的 commit ・ 看 commit history 的能力 ・ 寫人話 commit message 的習慣 ・ 改壞了不慌的安全感
ROUND 5 · 2:00–2:30
原始碼公開 不代表網頁要登入才能看
Public 代表原始碼任何人都能看
Private 代表只有你跟邀請的人能看
不管 repo 是 Public 還是 Private
部署出來的網頁都是公開的 任何人都能開
repo 設 Public 不等於 任何人都能改你的網頁
只有原始碼能看 改的權限只有你 別人連 commit 都做不了
這是 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
Settings → General 滑到最下面 Danger zone
Change repository visibility 改回 Public
網頁要部署這一定要 Public
注意 不要在程式碼裡寫密碼
這堂課全部用 Public
工程師把 AWS Key 寫在程式碼裡 push 到 Public repo
10 分鐘內被機器人掃到 拿去挖礦
一週帳單 12000 美金
程式碼裡寫 API Key 密碼 Token 任何敏感字串
Key 一律放在 repo 外面的設定檔 不跟程式碼一起上傳
等下故意貼一段假 Key 進去 commit 上去 親身體會 Key 上了 Public 是什麼狀況
這是教學設計 讓你體會踩坑 之後再學怎麼清
很多人聽過 不要把 Key 寫進程式碼 但沒真的踩過 印象不深
這一輪你故意貼一段假 Key 進去 push 上 GitHub 親眼看它出現在 Public 的原始碼裡
<!-- 故意留的假 Key 教學用 不會真的有作用 --> <script> const FAKE_API_KEY = "sk-fake1234567890abcdefghijklmnop"; const FAKE_TOKEN = "ghp_demoOnlyToken9876543210"; </script>
真的會被機器人掃到 但因為是假的 沒有實際後果 你練習踩坑 但沒風險 之後的課會帶你回來把它清掉
寫 Private 的話 照操作指令那頁的路徑改回 Public
貼在 body 內任何位置都可以
按 Commit changes 送出
repo 標籤是 Public 且 commit history 多了假 Key 那一筆 = 完成
卡住了 — 舉手 或回看前頁那段假 Key 跟 Round 4 的編輯介面
打開三位同學的 repo 主頁 看 repo 名字旁邊的小標籤
點 index.html 看完整內容 找有沒有 KEY PASSWORD TOKEN 之類的字
注意 移除後舊紀錄還留在 history 裡 真的外洩過的 Key 要作廢換新
確認 Public 設定正確 ・ 知道 Public 跟 Private 的真實差別 ・ 程式碼安全意識 ・ 故意踩過一次 Key 外洩的坑
ROUND 6 · 2:30–3:00
看一次完整的升級之路
每一輪都在前一輪的基礎上加一層 最後你帶走的不只是網頁 是一整套網頁管理的工作流
不是 GitHub Pages 比較厲害 而是你現在三個都會用 以後做不同專案能挑對工具
Stage 1 第一期 56% 學員主訴痛點是 卡關時不知道怎麼辦
有了這套儀式 你下次卡關不用慌 跟著走就解 80% 的問題
今天你用瀏覽器一個一個拖檔上傳 下一堂課換 IDE 直接改你的檔案 AI 改完自動同步
把 index.html 丟進 IDE 讓 AI 改
讀 PDF 整理成報告 md
md 變成簡報 html
把今天的網頁丟進 IDE 你會發現修改網頁變成 跟 AI 對話就好