開始前(2 分鐘)
- 身分卡拿出來:第一堂課填的那張(GitHub 帳號+專用信箱),拍在手機裡的那張。沒有身分卡?瀏覽器登入 GitHub → 右上頭像 → Settings → Emails,抄下
數字+帳號@users.noreply.github.com那串。 - 打開終端機:按 Windows 鍵 → 打
cmd→ Enter。(Mac:Spotlight 打「終端機」。)也可以用 VS Code 裡面的終端機:按 Ctrl+`(那顆 ` 鍵在鍵盤左上角、數字 1 的左邊、Esc 的下面)。VS Code 裡面那個是 PowerShell,不是 cmd:指令一模一樣照打,只有出錯時的訊息長得不一樣——PowerShell 說「無法辨識 xxx 詞彙」,cmd 說「'xxx' 不是內部或外部命令」,意思都是「這台沒裝,或沒找到」。
C:\Users\xxx>(VS Code 的終端機會是 PS C:\Users\xxx>)。關 0 上線(5 分鐘)
1. 登入
gh auth login
它會問五個問題,照這樣選:
| 它問 | 你選 |
|---|---|
| What account do you want to log into? | GitHub.com |
| What is your preferred protocol? | HTTPS(不要 SSH,學校網路會擋) |
| Authenticate Git with your GitHub credentials? | Yes |
| How would you like to authenticate? | Login with a web browser |
出現八碼 XXXX-XXXX | 按 Enter,Edge 跳出來 → 先看網頁右上角的頭像是不是你(教室電腦常留著上一節同學的登入;不是你就點頭像 → Sign out → 用自己的帳號登入)→ 打進八碼 → Authorize |
八碼不用複製,看著終端機上的字直接打進網頁就好(大小寫沒差,中間的 - 要打)。終端機視窗不要關,字會一直留在上面。八碼 15 分鐘會過期,過期就在終端機按 Ctrl+C,重打 gh auth login。
✓ Logged in as 你的帳號 ——後面一定要是你自己的帳號。是別人的名字 → 打 gh auth logout 全部登出,回 Edge 把上一個人登出,重來。登入成功後馬上再打這一行(沒有輸出=成功):
gh auth setup-git
這行讓你的登入只存在 gh 裡,下課 gh auth logout 才清得乾淨;不打的話 Windows 會把它偷存在「認證管理員」,下一節的人會用你的身分 push。
2. 設身分(每台新電腦都要做一次)
git config --global user.name "你的帳號"
git config --global user.email "你的專用信箱"
沒有任何輸出=成功。
3. 抓下來、打開
gh repo clone shsh-tw/hw-你的帳號
cd hw-你的帳號
code .
卡住了 ①
Permission denied,或一直問密碼?→ 沒登入,或登到上一個人的帳號。打 gh auth logout(它問要登出哪個帳號就選那個、或全部)再回第 1 步。卡住了 ②
'gh' 不是內部或外部命令(cmd)或 無法辨識 'gh' 詞彙(PowerShell)?→ 這台電腦沒裝 gh。舉手,然後直接跳到最下面「備援路線」,今天在瀏覽器裡做完。卡住了 ③
repository not found?→ 最常見是你還沒接受邀請:開 github.com 右上角鈴鐺(或學校信箱)找 shsh-tw 的邀請按 Accept,再 clone 一次。不是這個 → 帳號打錯,或老師還沒建 repo:開 github.com/shsh-tw 看有沒有 hw-你的帳號;沒有就舉手。卡住了 ④
code . 沒反應,或說找不到 code?→ 不影響交作業。打 explorer .(會跳出檔案總管,停在你的資料夾),對資料夾裡的空白處按右鍵 →「以 Code 開啟」。沒有這個右鍵選項 → 開始功能表開 VS Code → 檔案 → 開啟資料夾 → 上面路徑列貼 C:\Users\你的登入帳號\hw-你的帳號。忘記路徑就在終端機打 git rev-parse --show-toplevel,它會印給你。關 1 第一個腳印(20 分鐘)→ 燈 1
1. 改一行:VS Code 打開 notes.md,找到「### 自我介紹」,把它下面那一行灰色括號的提示整行換成你的自我介紹(一行就好)。### 開頭的標題行不要動、不要刪。按 Ctrl+S 存檔(分頁名稱旁的白點會消失)。一律用 VS Code 改,不要用記事本——記事本可能存成 Big5,GitHub 上會變成 ���� 亂碼、燈會 ❌。
2. 三步交出去(順序不能換)
git add -A
git commit -m "寫了自我介紹"
git push
main -> main。3. 看到才算交:瀏覽器開 github.com/shsh-tw/hw-你的帳號 → 點 notes.md → 有你寫的字。
4. 看燈:同一頁 → Issues → 🏁 闖關進度 → 等十幾秒重新整理 → 關 1 ✅。燈是 ❌ 的話,旁邊那格會寫為什麼。
commit 訊息怎麼寫:寫「做了什麼」,中文,一行。
| ❌ 不要 | ✅ 這樣 |
|---|---|
| update | 寫了自我介紹 |
| aaa | 加了第一個網頁 |
| 作業 | 寫了今天的學習紀錄 |
訊息裡不要打 &、|、%、^ 這四個符號,終端機會誤會成指令。中文、數字、句號、全形符號都可以。
卡住了 ①
nothing to commit、GH007、rejected。卡住了 ②
nothing to commit=你沒存檔,回 VS Code 按 Ctrl+S 再做三步。GH007=信箱沒設對,回關 0 第 2 步重打一次,然後只要再 git push。卡住了 ③
rejected 或 non-fast-forward=雲端有你電腦上沒有的東西。先 git pull,再 git push。絕對不要加 --force。卡住了 ④
看老師示範(5 分鐘,不動手):助教不是槍手
老師會對 AI 說「幫我把整個網站做好」,你看 AI 怎麼回。
重點:你的 repo 裡有一份 AGENTS.md,AI 讀了它就知道自己是助教,不是槍手——它會反問你卡在哪,而不是直接把整份作業吐給你。等一下你用 AI,它也會這樣對你:有時會先反問兩三句才動手。這不是壞掉,是設計。你回它一句「直接給,我還沒動手,做完解釋每一段」就好。關 2 那句 prompt 裡已經先寫了「我還沒動手、我會自己解釋」,等於先回答了它會問的問題,所以它多半會直接做——責任是你先扛下來的。
關 2 第一個網頁(25 分鐘)→ 燈 2
1. 想一個主題:自我介紹、社團、你喜歡的東西、你想做的東西,任何一個。
2. 叫 AI 生。三條路,選一條:
A. VS Code 裡有 Copilot(免費的 Copilot Free 就夠,不用等學生方案審核;左下角人像登入 GitHub 就有):按 Ctrl+Alt+I 打開 Chat,貼這句(複製之後,三個 __ 要自己打:你的主題、和你喜歡它的兩個理由;理由寫進去,AI 才不會再回頭問你):
這是我第一次練習、還沒動手,請直接做不用先問我。在這個 repo 根目錄建一個 index.html:主題是__,我喜歡它的__和__。30 行以內,繁體中文,不要外部連結或框架。做完用高中生聽得懂的話告訴我每一段在做什麼,我等一下會自己口頭解釋。
B. 沒有 Copilot:瀏覽器開 github.com/copilot 或 gemini.google.com(免費的就好)→ 先把 AGENTS.md 全文貼進去 → 再貼上面那句 → 它給你整段 HTML → 全部複製 → 回 VS Code:左邊檔案列表最上面 HW-你的帳號 那一列的右邊有一排小圖示,點最左邊「新增檔案」(一張紙加一個 +)→ 直接打 index.html → Enter → 貼上 → Ctrl+S。不要用「檔案 → 另存新檔」:Windows 會把副檔名藏起來,另存很容易變成 index.html.txt,而且你在檔案總管裡看不出來。
C. 兩個都不能用:手打這 8 行,裡面兩個「我的第一個網頁」都換成你的主題:
<!DOCTYPE html>
<html lang="zh-Hant">
<head><meta charset="UTF-8"><title>我的第一個網頁</title></head>
<body>
<h1>我的第一個網頁</h1>
<p>這是我用 git 送上 GitHub 的第一頁。</p>
</body>
</html>
3. 先在自己電腦看:檔案總管找到 index.html → 雙擊 → 瀏覽器開了、有你的字。(雙擊開出來是程式碼不是網頁 → 右鍵 → 開啟檔案 → Microsoft Edge。)
4. 三步交出去(複製之後,訊息裡的「主題」兩個字換成你的主題):
git add -A
git commit -m "加了第一個網頁:主題"
git push
5. 看到才算:GitHub 頁面上出現 index.html。點進去看到的是程式碼、不是網頁——GitHub 現在只負責保管,下週才會變成一個網址。
6. 看燈:關 2 ✅。
卡住了 ①
git status,看它有沒有列出 index.html。沒列=檔案不在 hw-你的帳號 資料夾裡,或存成別的名字了。卡住了 ②
index.html.txt?要在 VS Code 裡改,不要在 Windows 檔案總管裡改(檔案總管會把 .txt 藏起來,你改完看起來對了其實還是 .txt):VS Code 左邊點那個檔 → F2 → 改成 index.html → Enter。或在終端機打 ren index.html.txt index.html。改完打 git status,要看到它列出 index.html。卡住了 ③
卡住了 ④
關 3 解釋權(10 分鐘)→ 燈 3
1. 在 index.html 裡挑一行你看不懂的(例如 <meta charset="UTF-8">)。
2. 問 AI(Copilot 或免費聊天都可以),把那一行貼給它:
這一行在做什麼?把它拿掉會怎樣?用高中生聽得懂的話說。
3. 回 notes.md,把三個問題下面的括號行換成你的話:
- 我今天做了什麼
- AI 幫了我什麼、哪些是我自己做的
- 我能解釋 index.html 的哪一行(把那一行貼出來)、拿掉會怎樣
每題至少 10 個字,第 3 題一定要把那一行貼出來。
4. 三步交出去:
git add -A
git commit -m "寫了今天的學習紀錄"
git push
→ 關 3 ✅。
老師巡堂會指著你第 3 題那一行問:「拿掉會怎樣?」答得出來,它才是你的。
卡住了 ①
卡住了 ②
卡住了 ③
< 和 >)?三題不能寫一樣的。卡住了 ④
關 4 登出儀式(最後 10 分鐘,最重要)
1. 三行
gh auth logout
git config --global --unset-all user.name
git config --global --unset-all user.email
gh auth logout 會問你要登出哪個帳號,選你的(有兩個就都登出),Enter。後兩行沒有輸出=成功。
2. VS Code 左下角人像 → Sign out(不管有沒有用 Copilot 都去看一眼——VS Code 有時會自己彈出登入視窗)。關掉 VS Code。
3. 互查:請隔壁同學在你的電腦打這三行:
gh auth status
git config --global user.email
cmdkey /list | findstr /i "github vscode"
You are not logged into any GitHub hosts;第二行什麼都沒印;第三行什麼都沒印(有印出東西 → 舉手找老師,不要自己刪)。三個都對 → 互查卡簽名(或下面打勾)。
為什麼要做這件事:不登出,下一節坐這台電腦的人會用你的名字 commit。他做的事,紀錄上是你做的。就算這台有還原卡,也只有重新開機才會清乾淨;下一節的人是直接坐下來用,中間根本沒重開。你不能賭這個。
做完了?進階挑戰(不計分,純粹變強)
- 關 5 衝突:在 GitHub 網頁上按鍵盤
.進 github.dev,改notes.md一行、commit。回本機不要 pull,直接改index.html一行 → push → 你會吃到rejected→git pull→ 它可能要你解衝突 → 解掉 → push 成功。(下週起兩人共用一個 repo,這件事天天發生。) - 關 6 像樣:叫 AI 幫
index.html加 CSS。條件:你要能指出哪一段管顏色。 - 關 7 助教:幫隔壁修一個錯,在
notes.md加一行「我幫了誰、什麼錯、怎麼修」。
備援路線(任何一個不行就走這裡)
| 狀況 | 怎麼辦 |
|---|---|
gh 沒裝、或登入一直失敗 | ① 瀏覽器開 github.com/shsh-tw/hw-你的帳號,按鍵盤 . 進 github.dev:左邊點檔案改、Ctrl+S、左邊「分支」圖示打訊息、按 ✓ commit → 它直接就 push 了。② github.dev 一片空白或一直轉圈(學校網路擋了它)→ 不要等,改在 GitHub 網頁直接改:點 notes.md → 右上角鉛筆 ✏️ → 改 → Commit changes → 訊息打「寫了自我介紹」→ Commit;要新增 index.html 就用首頁 Add file → Create new file。關 1、2、3 全在這裡做得完;關 0、4 跳過(電腦上沒東西要清)。注意:github.dev 裡改的東西在按 ✓ commit 之前只存在瀏覽器裡,關掉分頁就沒了,改完馬上 commit。 |
git 沒裝 | 同上。 |
| AI 都不能用 | 關 2 走 C(手打 8 行);關 3 的「問 AI」改成問隔壁或老師,一樣寫自己的話。 |
| GitHub 登不進(2FA 手機不在) | 舉手;今天跟隔壁一起看流程,下週補(有 45 天寬限)。 |
| 網頁一直轉圈 | 學校網路只讓 HTTPS 走,別選 SSH;重新整理一次;還不行舉手。 |