零基礎前端課程

CHAPTER 14 · 240 MINUTES

Git、GitHub、README 與版本交付

作品只留在本機時無法交付；本章用三筆有責任邊界的 commit、乾淨 status 與可核對的遠端版本，讓陌生人能依 README 接手。

3個明確任務
2個接回點
1份可見成果

LEARNING GOALS

本章結束時，你能交付什麼

01

用 status 與 show 驗證第一筆版本邊界

條件：在個人練習資料夾先以 Starter 骨架建立 Git 初始化 commit（納入 README.md、README.html、index.html、style.css），再完成 README 作品介紹，執行 git show --stat --oneline HEAD 與 git status --short。 驗收：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

02

寫出能說明改動的第二筆 commit

條件：依 README 實際開啟作品後，執行 git add README.md、git commit -m "補上功能與本機開啟方式"，再執行 git show --stat --oneline HEAD、git log --oneline -2 與 git status --short。 驗收：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

03

用 README 與三筆 history 說明排錯

條件：完成可重現的排錯紀錄後，執行 git add README.md、git commit -m "記錄 Git 排錯流程"、git log --oneline -3 與 git status --short，逐筆說明三個 commit 各自只完成哪一段交付。 驗收：排錯紀錄可重現，git log 顯示三筆範圍清楚且可說明的 commit，git status --short 顯示乾淨

進場檢核與作品接力

  • 具備第 13 章成果：在既有整合頁修正錨點、間距與手機版回歸，留下修補前後證據：不看答案，展示或口述第 13 章成果，並說出一項可見證據。 需要補強時從這裡接回
  • 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
  • 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件、乾淨 status 與預期可見結果。 需要補強時從這裡接回

輸入：第 13 章產物：在既有整合頁修正錨點、間距與手機版回歸，留下修補前後證據

本章輸出：具備清楚 README、可檢查 commit history 與可核對遠端版本的作品 repo

產物類型：mainline；後續用途：第 15 章、第 28 章

PROBLEM & ANALOGY

先理解責任，再寫語法

Git 像有標題的存檔點，GitHub 像遠端作品倉庫；README 是倉庫門口的導覽牌，三者責任不同。

本章要解決：作品只留在本機時無法交付；如果 commit 沒有範圍與說明，改壞後也找不到哪一步發生變化。

接住上一章：第 13 章完成的整合作品集資料夾。

合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。

把名詞對回畫面與程式

Git repository
保存檔案版本與變更關係的專案邊界。
README.md
讓陌生人知道作品用途、功能與啟動方式的入口。
git status
查看目前哪些檔案變更、尚未提交。
git log
查看提交順序、訊息與版本證據。
commit
把一個可理解、可回溯的變更範圍固定下來。

SCOPE

今天的學習邊界

必會

能自己完成

用 status、show、log 驗證三筆本機 history，並在已設定 remote 時核對 push 後的遠端 hash；寫出能說明改動的 commit message；完成可讓陌生人理解作品的 README。

辨識

看得懂即可

能辨識 main branch、origin 與 commit history。

不教

刻意延後

不教 rebase、強制推送、多人分支策略或正式部署。

本章術語：repository、working tree、staging、commit、remote、push。遇到英文先回到畫面責任，不要求背拼字。

CORE IDEAS

三個核心觀念

  1. 每下關鍵指令前先確認目前路徑與 git status。
  2. commit 是本機版本紀錄，push 才把紀錄送到 GitHub。
  3. 公開 repo 不可包含密碼、token、私密設定或個人資料。

DEBUG

錯誤觀察與排查順序

課堂刻意錯誤：在錯誤的上層資料夾執行 git status，藉由路徑與列出的檔案發現範圍不對；停止操作並回到作品資料夾，不用破壞性指令補救。

  1. nothing to commit：先用 status 確認檔案是否真的改過或已加入。
  2. remote origin already exists：先 git remote -v，不重複新增。
  3. push rejected：停下來比較本機與遠端歷史，不使用 force。

固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。

症狀 01

陌生人開不起來

先查：照 README 從零執行一次，檢查根目錄、路徑與開啟方式。

症狀 02

看不懂這次改了什麼

先查：用 git show 或 git log 對照 commit 範圍與訊息。

症狀 03

排錯無法重現

先查：補上症狀、檢查順序、根因與修復前後結果。

PRACTICE CONTRACT

Starter 到 Solution 是同一份骨架，任務一路加厚

開始前先確認這四件事

  • 我在正確 repository 根目錄。
  • README 有用途、讀者、真實功能與本機方式。
  • 我已用陌生人視角照 README 走一次。
  • 提交前看 git status，提交後看 git log。
TASK-01

寫清楚作品用途與目標讀者

檔案：README.md

位置：依任務文字搜尋對應元素或函式

結果：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

TASK-02

列出真實功能與本機開啟方式

檔案：README.md

位置：依任務文字搜尋對應元素或函式

結果：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

TASK-03

記錄排錯流程並驗證 commit 切分

檔案：README.md

位置：依任務文字搜尋對應元素或函式

結果：排錯紀錄可重現，git log 顯示三筆範圍清楚且可說明的 commit，git status --short 顯示乾淨

  1. 先讀任務 Starter 讀任務、先預測結果。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03，不重構既有骨架。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

這個作品給 ______ 使用；依 README 可用 ______ 開啟；本次排錯由 ______ 發現，commit ______ 固定修復。

不要把憑證、私人路徑或未完成功能寫成已完成；commit 訊息要如實描述範圍。

提供真實 repo URL、最新 commit hash、git status --short 乾淨畫面、GitHub commit history，以及遠端最新 hash 與本機 HEAD 的核對結果；確認公開 repo 不含 token、密碼或私人路徑；solution 不代填這些個人證據。

跨課次實作：前 60 分鐘在第 13 次課尾完成真實作品的 git init、status、add 與第一個 commit；後 180 分鐘再完成 push、README、乾淨 status 與遠端 hash 驗收。

交件前自我檢核 5 項 · 點選每一列完成自評

下一章：第 15 章會在已受版本控制的作品中加入第一段 JavaScript 互動。

下一步：前往第 15 章「JavaScript：變數、函數、事件與 DOM」，帶著本章輸出繼續累積作品。