EP04 把你的網站真的放上網

今天進度：已勾 0／15

開始前（10 分鐘）：跟上週一樣先上線

換了電腦就是全部重來：登入、補那一行、設身分、抓下來。上週做過一次，這次目標 10 分鐘內做完。

  1. 身分卡拿出來。打開終端機（Windows 鍵 → cmd；VS Code 裡的是 PowerShell，指令一樣）。
  2. 登入＋設身分＋補那一行（跟上週一模一樣）：
gh auth login

（GitHub.com → HTTPS → Yes → Login with a web browser → 看 Edge 右上角頭像是不是你 → 打八碼 → Authorize）

gh auth setup-git
git config --global user.name "你的帳號"
git config --global user.email "你的專用信箱"
  1. 抓下來（這台電腦沒抓過）或更新（上週用過同一台）：
gh repo clone shsh-tw/hw-你的帳號
cd hw-你的帳號
code .

上週用過這台、資料夾還在 → 改打：

cd hw-你的帳號
git pull
code .
看到這個就對了
VS Code 開了，左邊有 index.html（上週做的）和 notes.md。
卡住了 ①
① 卡在登入或抓不下來？→ 上週的解法全部適用：教材站首頁 → EP03 → 關 0 的「卡住了」。最常見三個：repository not found＝還沒接受 shsh-tw 邀請（github.com 鈴鐺 Accept）；Permission denied／登到別人＝gh auth logout 再登、Edge 右上頭像先登出上一個人；'code' 不是內部或外部命令＝打 explorer . 對資料夾按右鍵「以 Code 開啟」。
卡住了 ②
② git pull 說 Your local changes would be overwritten？→ 上週有沒存的東西留在這台。打 git stash 再 git pull（有問題舉手）。
卡住了 ③
③ 沒有 index.html？→ 上週沒做到關 2。沒關係，先跳到關 2 用 AI 生一頁，再回來做關 1。

關 1 先上線再說（15 分鐘）→ 🌐 燈 1

你上週那一頁現在就可以上網。不用寫任何東西。

1. 把 index.html 壓成 zip：檔案總管打開 hw-你的帳號 資料夾 → 對 index.html 按右鍵 → 傳送到 → 壓縮的 (zipped) 資料夾 → 出現 index.zip。（Mac：右鍵 → 壓縮。）

2. 丟上去：Edge 開新分頁，網址列打

cloudflare.com/drop

畫面中間有「Drop a folder. Or a zip.」→ 按 Browse zips → 選剛剛的 index.zip（如果跳出 Terms of Service 就按 Accept）。

看到這個就對了
先看到 Uploading files，然後一個地球動畫在數 x / 18 regions（30–60 秒，正常，等它），最後變成 Your site is ready，下面一行 https://drop-xxxx.xxxx-xxxx.workers.dev 就是你的網址（旁邊有一格小預覽，就是你的網頁）。複製網址：按網址右邊那顆小方框圖示（滑鼠移上去寫 Copy URL）。上面那顆看得到字的「Copy claim link」不要按——那是網站所有權的鑰匙，不是網址，貼進 repo 會被 🔒 抓。

左上角有一顆 Claim (59:xx) 在倒數——那是「保住網站」用的，要 Cloudflare 帳號，這堂課不用按。這個網址一小時後會消失，這是免費試映；燈會記得你上線過。

3. 用手機打開：把網址貼到下面這格，會變成 QR，拿手機相機掃。

用手機相機對著它掃，就會打開你的網站

看到這個就對了
手機上出現你上週做的那一頁。這就是上網了。

4. 留證據：VS Code 打開 notes.md，找到 ## EP04 底下「### 第一次上線的網址（上週那一頁）」那一段，把它下面的括號提示行換成你的網址（整行貼，https:// 開頭）。Ctrl+S。

5. 三步交出去：

git add -A
git commit -m "第一次上線"
git push

6. 看燈：Issues → 🏁 闖關進度 → EP04 那張表 → 🌐 關 1 ✅（機器真的去打開你的網址看）。

卡住了 ①
① cloudflare.com/drop 打不開、或按了沒反應？→ 學校網路可能擋它。舉手，老師會用「作品牆」幫全班一次上線；你先做關 2。
卡住了 ②
② 出現「Missing ingredient」四條檢查？→ zip 裡沒有 index.html，或你選到資料夾。重做第 1 步：對 index.html（不是資料夾）按右鍵壓縮。
卡住了 ③
③ 燈沒亮、原因寫「打不開」？→ 看 notes.md 那行是不是完整的網址（https:// 開頭、沒有多餘的字）。原因寫「Cloudflare 擋機器人」＝你的網址是活的，只是機器看不到內容，這關算過；寫「曾於…通過」＝已經過了，只是預覽到期，正常。
卡住了 ④
④ 手機掃不開？→ 手機關掉校園 Wi-Fi 改用行動網路再掃（校園 Wi-Fi 常擋 workers.dev）。

關 2 做一個想要的東西（30 分鐘）→ 燈 2

上週是「第一個網頁」，這週做一個你會想拿給別人玩的東西。一頁就好，可以有按鈕。用上週那一頁原封不動交不會過：燈會比對它跟關 1 上線的是不是同一份。

1. 想一個（30 秒決定，不要卡）：午餐抽籤機／今天要不要讀書骰子／社團活動倒數／給朋友的一句話產生器／自我介紹加一顆「按我」按鈕……

2. 叫 AI 做（Copilot Free 就行；沒有就免費聊天先貼 AGENTS.md）。複製後把三個 ＿＿ 換成：你要做的東西、按下去會發生什麼、你喜歡的風格：

這是我的練習、還沒動手，請直接做不用先問我。把這個 repo 根目錄的 index.html 改成：＿＿。要有一顆按鈕，按下去會＿＿。風格：＿＿。60 行以內，繁體中文，所有 CSS 和 JS 都寫在同一個檔案裡，不要用任何外部連結、不要用任何 API key。做完用高中生聽得懂的話告訴我每一段在做什麼。

3. 自己驗收三件事（AI 做完不等於做對）：

4. 寫兩樣：notes.md 的「### 這次做的東西（一句話）」換成你的話；順手把「### 1. 我今天做了什麼、驗收了哪三件事」也寫了（兩三句，寫你剛剛驗收的那三件）。

5. 三步交出去（訊息換成你的主題）：

git add -A
git commit -m "做了：主題"
git push

6. 看燈：關 2 ✅。

卡住了 ①
① AI 沒動手先反問？→ 回它「直接給，我還沒動手，做完解釋每一段」。
卡住了 ②
② 燈說「行數不夠」或「標題還是我的第一個網頁」？→ 跟 AI 說「標題換成＿＿，內容再豐富一點」。
卡住了 ③
③ 🔒 那格 ❌、原因寫「有像 key 的東西」？→ AI 把假的 key 寫進去了。跟它說「把 API key 拿掉，改成不用 key 的做法」，或自己刪掉那行。連假的都不要留。
卡住了 ④
④ 沒有 AI？→ 手打這一份（把 index.html 整個內容換掉；兩個「＿＿」都換成你的主題，<title> 和 <h1> 都要換，不然燈會說標題沒改）： 
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>＿＿</title>
<style>
  body { font-family: sans-serif; text-align: center; padding: 40px; background: #f5f5f5; }
  h1 { color: #1b2b5e; }
  button { font-size: 20px; padding: 12px 24px; border-radius: 999px; border: 0; background: #1b2b5e; color: #fff; }
  #out { font-size: 24px; margin-top: 24px; }
</style>
</head>
<body>
<h1>＿＿</h1>
<p>按一下，抽一句。</p>
<button onclick="document.getElementById('out').textContent = ['今天很棒','再撐一下','去喝水','找人聊聊'][Math.floor(Math.random()*4)]">按我抽一句</button>
<p id="out">（按上面）</p>
</body>
</html>
卡住了 ⑤
⑤ 燈說「index.html 還是關 1 上線的那一頁」？→ 你還沒改它。標題、內容、按鈕都要是新的，改完再 push。

關 3 上線給別人看（15 分鐘）→ 🌐 燈 3

1. 跟關 1 一樣：右鍵 index.html → 壓縮（先刪掉舊的 index.zip）→ 回 Drop 頁按 Deploy another（不用重開網頁）→ Browse zips → 新的網址 → 按網址右邊的方框圖示複製。

2. notes.md 的「### 上線網址（新作品）」換成新網址。三步交出去：

git add -A
git commit -m "新作品上線"
git push

3. 看燈：🌐 關 3 ✅（機器會去打開你的網址；打得開就算。網頁標題跟 repo 裡 index.html 一不一樣，老師那邊會比對，隔壁手機打開才是真的驗收）。

4. 給別人看：網址貼進上面的 QR 框 → 請隔壁用手機掃 → 他玩過你的按鈕 → 在互查卡「我用手機打開過隔壁的網站」那格簽名。

卡住了 ①
① 燈說「標題不一樣」？→ 你 Drop 的是舊的 zip：重新壓縮一次（先把舊的 index.zip 刪掉）再 Drop。走作品牆的人：先確定新作品已經 push，然後舉手請老師重跑一次作品牆。
卡住了 ②
② 燈說「抓不到」？→ 網址貼錯格或少字；或超過一小時了——再 Drop 一次、換新網址、再 push。
卡住了 ③
③ 隔壁掃不開？→ 他手機改行動網路。

關 4 秘密藏不住（12 分鐘）→ 燈 4

老師放了一個網站在教材站：ep04/leak/（老師會投影網址）。它看起來很正常、按鈕會動。它偷偷用了一把 API key。

1. 找出那把 key：在那個網站上按右鍵 → 檢視頁面來源（或按 F12 → Sources）→ Ctrl+F 搜 key。你會看到一行 const API_KEY = "sk-demo-…"。

2. 看它飛出去：在那個網站按 F12 → Network 分頁 → 回網頁按一次「抽」→ Network 裡多一條紅色的請求，點它，網址長得像 https://weather.example.com/today?key=sk-demo-…。key 就在網址裡，正在往外送（它連不上是因為那個網址是假的，但 key 已經出去了）。

3. 貼進解鎖框：把整串 key（含 sk-demo-）貼到下面，對了會出現一句通關密語。

4. 想一下：你只用了「右鍵」和 F12 就拿到了別人的 key，還看到它被送出去。放在網頁裡的東西，每一個打開網頁的人都拿得到。網頁看起來正常，不代表裡面的秘密是安全的。所以：API key、密碼、token 絕對不放前端、絕對不放進 repo（.env 也不進 repo）。要用 key 的功能，之後專題會學把它藏在後端。

5. 兩題（第 1 題你在關 2 寫過了）：notes.md 的 EP04 第 2、3 題換成你的話：

  1. 把 Network 分頁那條帶 key 的網址貼出來，key 那一段改成 xxxx（例：https://weather.example.com/today?key=xxxx&name=…）。沒遮的話 🔒 會 ❌——連假的都不能留。
  2. 為什麼 key 放在前端藏不住（用你的話）＋把通關密語寫進來。

6. 三步交出去：

git add -A
git commit -m "寫了今天的學習紀錄"
git push

→ 關 4 ✅，🔒 也要是 ✅。

卡住了 ①
① 找不到 key？→ 檢視來源後 Ctrl+F 搜 API_KEY（大寫）。
卡住了 ②
② 解鎖框說「不對」？→ 要貼完整一串，從 sk-demo- 到引號前，中間沒有空白。
卡住了 ④
④ Network 分頁是空的？→ 先開 F12 再按「抽」；或按 F5 重新整理後再按一次。那條請求是紅色的（失敗）也沒關係，網址還在。
卡住了 ③
③ 🔒 ❌？→ 你把完整的 key 貼進 notes.md 或 index.html 了（第 2 題要把 key 改成 xxxx）。刪掉那串再 push。連假的都不要留，這就是今天學的。

登出儀式（最後 8 分鐘，92 分整開始）

跟上週一樣，三行＋VS Code 登出，隔壁互查三行：

gh auth logout
git config --global --unset-all user.name
git config --global --unset-all user.email

隔壁在你的電腦打：

gh auth status
git config --global user.email
cmdkey /list | findstr /i "github vscode"
看到這個就對了
You are not logged into any GitHub hosts；第二、三行什麼都沒印（Mac 沒有第三行，跳過）。

最後一步：按這一頁最下面的「清掉這台瀏覽器的紀錄（換人用）」——不然下一個坐這台的人會看到你的帳號、信箱和網址。

不登出＝把你的身分留在公用機。這也是 secret 外洩，只是外洩的是你自己。

做完了？進階挑戰（不計分）

備援路線

狀況怎麼辦
cloudflare.com/drop 打不開／上傳沒反應舉手。老師會跑「作品牆」把全班 repo 裡的 index.html 一次放到教材站 gallery/你的帳號/，網址老師投影；你把那個網址貼進 notes 一樣亮燈。
手機掃不開 workers.dev手機改用行動網路；還不行就用隔壁的手機。QR 框寫「不像網址」＝你貼錯（少字或貼到 claim 連結），回 Drop 頁重新複製網址。
gh／git／登入不行跟上週一樣：github.dev 或 GitHub 網頁鉛筆改 notes.md；index.html 從 GitHub 頁面「Download」下來再壓縮 Drop。
AI 都不能用關 2 走 hint ④ 手打那一份（20 行，標題和 h1 都要換）。
燈一直不亮、Actions 分頁紅叉舉手；老師會用儀表板直接判，燈之後會補。
repository not found你還沒接受 shsh-tw 的邀請：github.com 右上角鈴鐺 → Accept → 再 clone。
沒有 Windows 的「傳送到 → 壓縮」Drop 頁面改按 Browse folders，在桌面建一個新資料夾、只放 index.html 進去，選那個資料夾（不要選整個 repo，會把所有檔案都傳上去）。

自檢清單（存在這台瀏覽器）