零基礎前端課程

CHAPTER 14 · 240 MINUTES

Git、GitHub、README 與版本交付

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

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

LEARNING GOALS

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

01

用 status 驗證 add、commit、push 三個狀態

不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。

02

寫出能說明改動的 commit message

不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。

03

完成可讓陌生人理解作品的 README

不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。

PROBLEM & ANALOGY

先理解責任，再寫語法

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

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

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

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

把名詞對回畫面與程式

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

SCOPE

今天的學習邊界

必會

能自己完成

用 status 驗證 add、commit、push 三個狀態；寫出能說明改動的 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 說明作品用途，git log 顯示第一筆範圍清楚的 commit

TASK-02

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

檔案：README.md

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

結果：陌生人能開啟作品，history 新增第二筆功能文件 commit

TASK-03

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

檔案：README.md

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

結果：排錯紀錄可重現，git log 顯示至少三筆有意義的 commit

  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 乾淨畫面與 GitHub commit history；solution 不代填這些個人證據。

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

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

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