Git 入門課：概念、VS Code Source Control、GitHub 帳號到 push／clone

4. Part 1：Git 概念

📂 本段背景：EP01 你已經用過 git init、git add、git commit，也用 Git Graph 看過圖。但「會操作」不等於「懂在幹嘛」。這一段把版本控制的觀念講透，因為它是面試必考、工作必用。

4-1. Git 是什麼（為什麼要版本控制）

用一句話講：Git 就是程式碼的『時光機 + 存檔點』。 你玩遊戲會存檔，存壞了讀檔重來。Git 就是讓你的程式碼可以這樣存檔、讀檔、看每一個存檔點改了什麼。

沒有 Git	有 Git
project_v1.zip project_final_真的最終版.zip	完整歷史一目了然
改壞了找不回來	可以回到任何一個版本
不知道誰改了什麼	每行變化都看得到

為什麼不用 Google Drive / Dropbox 管程式碼？

📣 「這題面試官真的會問：『你怎麼管理程式碼？』答 Google Drive 或隨身碟，心裡就先扣分了。」

	Google Drive	Git
紀錄「為什麼改」	❌ 只存檔案	✅ 每次 commit 都有說明
看「改了哪幾行」	❌ 整個檔案覆蓋	✅ 逐行比對（diff）
多人改同一個檔案	❌ 互相蓋掉	✅ 自動合併、衝突提示
回到「三天前那版」	❌ 很難	✅ 一個操作搞定
只復原「某一個檔案」	❌ 全部一起	✅ 精準到單檔單行

📣 「Google Drive 是『同步檔案』，Git 是『管理歷史』。Drive 只知道『現在長怎樣』，Git 知道『一路怎麼演變過來的』。」

業界使用率： Git 是世界上最主流的版本控制工具，根據 Stack Overflow 開發者調查，超過 90% 的開發者日常使用。所有資料工程職缺都把 Git 列為必備——「會不會 Git」幾乎等於「是不是專業開發者」。

4-2. Git 三區模型（最重要的觀念）

📣 「這是 Git 最重要、也最容易搞混的觀念。理解三區，後面所有操作都通了。EP01 我們做過 add / commit，但不一定知道檔案在背後是怎麼搬的。」

Git 把你的檔案分成三個「區域」。檔案會從左邊一路搬到右邊：改 → 加 → 存。

📸 截圖 B1：Git 三區示意圖（做成投影片或手繪）

 你在改的檔案          準備要存的            已存好的歷史
┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│  Working    │    │  Staging    │    │ Repository  │
│  Tree       │ ──→│  Area       │ ──→│  (.git/)    │
│  (工作區)   │stage│  (暫存區)   │commit│  (倉庫)    │
└─────────────┘    └─────────────┘    └─────────────┘
       ↑                  ↑                  ↑
   你正在編輯的       挑好要打包的        永久存檔的
   檔案現況         （還沒定案）        （回得去的版本）

為什麼要分三區？為什麼不能改完直接存？

📣 「想像你在打包行李。Working Tree 是你房間裡所有東西，Staging Area 是你『挑出來要放進行李箱』的東西，commit 就是把行李箱封箱。你可以挑選只打包『這次要的』，不是房間裡全部都塞進去。」

這個「中間挑選」的步驟（Staging Area）讓你可以：改了 5 個檔案，但只把其中 2 個相關的 commit 起來，分成兩次有意義的 commit。

動作	GUI 操作（VS Code）	檔案搬到哪	做什麼
改檔案	（編輯存檔）	Working Tree	你正在編輯，Git 還沒管它
準備要存（stage）	Source Control 面板點檔案旁的 +	→ Staging Area	挑出這次要打包的檔案
確認存起來（commit）	上面打 message 按 ✓	→ Repository	封箱，變成一個歷史紀錄點
看狀態	Source Control 面板的 Changes 區	（讀全部三區）	哪些改了、哪些 stage 了
看歷史	Git Graph 面板	（讀 Repository）	看所有 commit 的軌跡

💡 GUI 對照指令：點 + stage = git add；按 ✓ commit = git commit。本集你只要會按按鈕，但知道它背後等於哪個指令，未來看別人打指令也不會慌。

4-3. local vs remote（本地 vs 遠端）

📣 「上面三區全部都在『你的電腦』裡，這叫 local（本地）。GitHub 在雲端，叫 remote（遠端）。Git 的另一半工作流，就是把 local 的歷史同步到 remote。」

   你的電腦 (local)                       GitHub 雲端 (remote)
┌──────────────────────────┐         ┌──────────────────────┐
│ Working → Staging → Repo │ ──push→ │  origin (de-projects) │
│                          │ ←pull── │                       │
└──────────────────────────┘         └──────────────────────┘

方向	GUI 操作	意思
本地 → 雲端	Source Control 面板的「Sync / Push」	把本地 commit 上傳到 GitHub
雲端 → 本地	Source Control 面板的「Pull」	把 GitHub 上別人推的更新拉下來

📣 「Lab 2 會做第一次 push（用 Publish Branch 按鈕）。pull 在團隊協作時很重要——隊友推了東西，你 pull 下來才會同步到。」

4-4. branch（分支）是什麼

📣 「branch 是 Git 最強的功能之一。今天先建立『概念』，實際協作 EP 後面會深入。」

branch（分支）讓你可以「開一條平行線開發新功能，不影響主線」。

• main：主線，永遠保持可運作的版本
• 開新功能時：從 main 開一條 feature/xxx 分支去改
• 改好測好：再把分支「合併（merge）」回 main

📣 「想像主線是一棵樹幹，每個新功能是一根分出去的樹枝。樹枝上實驗壞了也不會傷到樹幹。改好了再接回去。」

在 VS Code 裡，左下角的 Status Bar 會顯示目前分支名，點它就能切換或建立分支——一樣不用打指令。

---

5. Lab 1：Git GUI 操作（VS Code Source Control）

📂 現在在：~/projects/（你自己的 repo，EP01 已 git init + commit 過）。 老師的 ~/serial-course 範例要到 Lab 5 才登場。

📣 「Terminal 和圖形介面效果一樣，這集我們全程用 GUI。團隊裡兩種人都有，但 GUI 對新手更直觀——看得到檔案狀態、看得到 diff、看得到歷史。」

Step 1：打開 Source Control 面板

1. 點左邊 Activity Bar 的「Source Control」圖示（分叉的線條圖案），或按 Ctrl+Shift+G

📸 截圖 B7：VS Code Source Control 面板總覽

• 紅框①標出 Activity Bar 的 Source Control 圖示位置
• 紅框②標出 Changes 區（修改的檔案會列在這）
• 紅框③標出 commit message 輸入欄
• 紅框④標出「✓ Commit」按鈕

📣 「這個面板就是你的 Git 控制台。左邊一整排都是按鈕，不用記任何指令。」

Step 2：改一個檔案，看它出現在 Changes 區

1. 在 VS Code 裡打開 app.py（按 Ctrl+P 打 app 快速開檔）
2. 把內容改成：

def greet(name):
    return f"Hello, {name}! Welcome to Data Engineering."

if __name__ == "__main__":
    print(greet("Dex"))

3. 存檔（Ctrl+S）

✅ 預期：回到 Source Control 面板，app.py 出現在「Changes」區，旁邊有個 M 標記（Modified，被修改過）

📸 截圖 B2：Changes 區出現 app.py（標出 M 標記）

📣 「檔案一改，Git 馬上知道——它出現在 Changes 區，代表它在 Working Tree（工作區），還沒被 stage。這就是三區模型的第一區。」

Step 3：看 diff（點檔案就看到）

1. 在 Source Control 面板，直接點一下 app.py

✅ 預期：右邊開啟一個「並排比對」畫面——左邊是舊版、右邊是新版

📸 截圖 B3：VS Code 的 diff 比對畫面

• 紅框①標出左邊紅色背景（被刪除/改掉的舊程式碼）
• 紅框②標出右邊綠色背景（新加的程式碼）

📣 「紅色 = 改掉前的，綠色 = 改掉後的。這就是『逐行比對』，Google Drive 永遠做不到的事。commit 之前先點開看一眼，確認『我到底改了什麼』，避免存錯東西。」

Step 4：stage（把檔案放進暫存區）

1. 在 Changes 區，把滑鼠移到 app.py 上，右邊會出現一個「+」圖示
2. 點這個「+」

✅ 預期：app.py 從「Changes」移到「Staged Changes」區

📸 截圖 B4：app.py 移到 Staged Changes 區（標出 + 按鈕和移動後的位置）

📣 「點 + 就是『把這個檔案挑進行李箱』——對應指令的 git add。檔案現在在 Staging Area（第二區）。如果改了多個檔案，你可以只挑要的那幾個 stage。」

Step 5：commit（封箱存檔）

1. 在面板上方的訊息欄輸入 commit message：feat: 新增 greet 函式
2. 按上方的「✓ Commit」按鈕（或 Ctrl+Enter）

✅ 預期：Changes / Staged 區清空，代表這次修改已封箱成一個歷史紀錄點

📸 截圖 B5：輸入 message + 按 ✓ Commit

• 紅框①標出 message 輸入欄
• 紅框②標出 ✓ Commit 按鈕

📣 「按 ✓ 就是 git commit。message 格式建議：feat: 新功能、fix: 修 bug、docs: 改文件。message 寫清楚，三個月後的你會感謝現在的你。」

Step 6：用 Git Graph 看歷史

📣 「commit 完了，怎麼確認？打開 EP01 裝的 Git Graph extension，用『圖』看整個歷史，比文字直觀多了。」

1. 按 Ctrl+Shift+P 打開命令面板，輸入 Git Graph，選「Git Graph: View Git Graph」 （或點底部狀態列的 Git Graph 圖示）

✅ 預期：開啟一個分頁，用節點 + 線條畫出你所有 commit 的時間軸，最上面是最新那筆

📸 截圖 B6：Git Graph 視圖

• 紅框①標出最新的 commit「feat: 新增 greet 函式」
• 紅框②標出 main 分支標籤
• 紅框③標出每筆 commit 的作者與時間

2. 點任一個 commit 節點，下方會展開這次 commit 改了哪些檔案，再點檔案就看到 diff

📣 「Git Graph 是你的『歷史地圖』。每個點是一次存檔，線條是分支的流向。以後分支多了、合併多了，這張圖會幫你看清整個專案怎麼長大的。」

Step 7：（選做）體驗 branch 的 GUI 操作

📣 「想感受分支？全部用 GUI：點左下角分支名 → 建分支 → 改檔案 commit → 切回 main 看變化。」

1. 點 VS Code 左下角 Status Bar 的分支名（目前是 main）
2. 選「Create new branch…」，輸入 feature/add-comment，Enter

✅ 預期：左下角分支名變成 feature/add-comment

📸 截圖 B8：左下角 Status Bar 分支名變成 feature/add-comment

3. 在 app.py 最上面加一行註解（選取後 Ctrl+/ 可快速註解），存檔
4. 回 Source Control 面板，stage（點 +）→ 打 message docs: 加上函式註解 → ✓ Commit
5. 點左下角分支名，切回 main

✅ 預期：回到編輯區看 app.py，剛才加的註解不見了——因為它只存在於 feature 分支

📣 「看到了嗎？同一個檔案在不同分支長得不一樣。這就是分支的威力——你可以在分支上大膽實驗，main 永遠乾淨。打開 Git Graph，還能看到這條分支分出去的軌跡。」

---

6. Part 2：GitHub 概念

6-1. Git vs GitHub（工具 vs 平台）

📣 「最常見的混淆：以為 Git 和 GitHub 是同一個東西。Git 是『工具』（裝在你電腦），GitHub 是『平台』（網站）。就像 Word 是工具，Google Drive 是平台。」

	Git	GitHub
是什麼	版本控制工具	雲端程式碼託管平台
在哪裡	你的電腦（local）	網路上（github.com，remote）
誰做的	開源軟體（Linus Torvalds）	公司（被微軟收購）
用途	記錄每次修改	備份 + 分享 + 協作
對應操作	commit	push（推到 GitHub）
替代品	幾乎沒有	GitLab、Bitbucket

📸 截圖 C0：Git vs GitHub 對比圖（做成投影片）

📣 「Git 在你電腦上記錄歷史，GitHub 是把歷史推到雲端。面試官和團隊看到的是 GitHub。沒有 GitHub 帳號的工程師，等於沒有作品集。」

6-2. GitHub 的主要功能

📣 「GitHub 不只是『程式碼網路硬碟』，它是整個開發協作的中心。先知道有哪些功能，後面會陸續用到。」

功能	做什麼	什麼時候用
Repository（repo）	存放專案的程式碼倉庫	每個專案一個 repo
README	repo 首頁的說明書	別人打開第一眼看到
Issues	記錄待辦、bug、討論	團隊追蹤工作
Pull Request（PR）	把分支的修改提出來請人 review 後合併	團隊協作的核心流程
Actions	自動化（push 後自動跑測試、部署）	CI/CD（後面集數會碰到）
Pages	把 repo 變成免費網站	放作品集、文件

📣 「今天我們先建 repo、push、clone。Issues / PR / Actions 是團隊協作和自動化才會深入，但你要先知道它們存在。」

6-3. GitHub 認證方式

📣 「第一次 push 一定會卡『認證』。GitHub 早就不接受用登入密碼推程式碼了。好消息是：用 VS Code 的 GUI，它會自動幫你開瀏覽器授權，多數情況不用手動弄 token。」

方式	怎麼認證	適合
VS Code 內建授權（GUI）	按 Publish 時自動彈瀏覽器，點 Authorize	新手、課堂 ✅ 我們優先用這個
HTTPS + Personal Access Token	手動輸入 token（不是密碼）	GUI 授權失敗時的備案
SSH key	一次設定金鑰，之後免輸入	進階、長期用同一台電腦

📣 「我們優先用 VS Code 內建授權（最省事）。萬一它要你輸入 token，Lab 2 也會帶你產一個。」

---

7. Lab 2：GitHub（帳號 → repo → push → clone）

Step 1：建 GitHub 帳號

如果已經有帳號，跳到 Step 2。

1. 打開瀏覽器，前往 github.com
2. 點右上角「Sign up」

📸 截圖 C3：GitHub 首頁（紅框標出 Sign up 按鈕）

3. 依序填入：
   • Email
   • Password
   • Username（會出現在你的 repo URL，選一個專業的）

📸 截圖 C4：Sign up 表單（標出 username 欄位，提醒「這會公開」）

4. 完成 email 驗證 → 登入

Step 2：在 GitHub 建新 Repository

1. 登入後，點右上角「+」→「New repository」

📸 截圖 C5：右上角 + 選單（紅框標出 New repository）

2. 填寫表單：

欄位	填什麼	說明
Repository name	de-projects	你喜歡的名字
Description	Data Engineering 學習專案	選填
Visibility	Public	選 Public，面試用
Add a README	❌ 不要勾	本地已有 commit，避免衝突
Add .gitignore	❌ 不要勾	我們自己寫

📸 截圖 C6：Create repository 表單

• 紅框①標出 Repository name 欄位
• 紅框②標出 Public 選項
• 紅框③標出「❌ 不要勾」的 README 和 .gitignore
• 紅框④標出綠色「Create repository」按鈕

3. 點「Create repository」

✅ 預期：GitHub 顯示一頁「Quick setup」，先別動它，我們用 VS Code 來推

Step 3：在 VS Code 裡 push（用 Publish Branch）

📣 「重點來了——我們不打 git remote add / git push 那串指令，改用 VS Code 的一鍵發布。」

1. 回到 VS Code，打開 Source Control 面板
2. 你會看到一個藍色按鈕「Publish Branch」（或「Publish to GitHub」），點它

📸 截圖 C7：Source Control 面板的 Publish Branch 按鈕

3. 第一次用會跳出 GitHub 授權：
   • VS Code 彈出提示 → 點「Allow / Sign in with GitHub」
   • 瀏覽器開啟授權頁 → 點「Authorize」
   • 授權完成後自動跳回 VS Code

📸 截圖 C8：瀏覽器 GitHub 授權畫面（標出 Authorize 按鈕）

4. VS Code 可能會問你要推到哪個 repo / 公開或私有：
   • 如果你已在 Step 2 建好 de-projects，選擇推到既有的 repo
   • （若你跳過 Step 2，VS Code 也能直接幫你建新 repo，選 Public 即可）

✅ 預期：右下角出現「Successfully published」之類的通知，分支已推上 GitHub

📸 截圖 C9：發布成功通知

⚠️ 如果要求輸入 Token（GUI 授權失敗時的備案）：見本 Lab 末尾的「補充：手動建 Personal Access Token」。

Step 4：在 GitHub 網頁確認

1. 回到瀏覽器，前往 github.com/你的帳號/de-projects
2. 重新整理頁面

📸 截圖 C10：GitHub repo 頁面

• 紅框①標出檔案列表（app.py 等）
• 紅框②標出最新 commit message
• 紅框③標出分支名「main」

✅ 預期：看到你的檔案和 commit message——你的程式碼上雲端了！

📣 「這就是別人打開你 GitHub 第一眼看到的東西。之後每次改完 code，在 Source Control 面板按一下『Sync』（或 push）就能更新雲端，一樣不用打指令。」

Step 5：git clone 練習（把 repo 抓回來）

clone 是 push 的反向操作——把 GitHub 上的 repo 整個抓到你的電腦。clone 是少數「用指令比較直接」的操作（你需要貼 repo URL），所以這裡會打一行指令。

什麼時候會用 clone？

場景	操作
加入新團隊，要拿他們的 code	git clone <repo URL>
換電腦，要把自己的 repo 拉下來	git clone <repo URL>
Lab 5 要拿老師的 serial-course 範例	git clone <老師的 repo URL>
想參考別人的開源專案	git clone <開源 repo URL>

實作：clone 你自己剛 push 的 repo

1. 在 GitHub repo 頁面，點綠色的「Code」按鈕，複製 HTTPS URL

📸 截圖 C11：GitHub Code 按鈕（標出 HTTPS URL 和複製按鈕）

2. 回到 VS Code Terminal（Ctrl+`），切到臨時資料夾練習：

cd /tmp
git clone https://github.com/你的帳號/de-projects.git clone-test
ls clone-test

✅ 預期：clone-test 裡看到你剛 push 上去的所有檔案

💡 也能用 GUI clone：按 Ctrl+Shift+P → 輸入「Git: Clone」→ 貼上 URL → 選存放位置。效果一樣。

3. 確認完成後，刪掉這個練習用的 clone（你的正本在 ~/projects）：

rm -rf /tmp/clone-test

💡 push 把本地推上去、clone 把雲端抓下來、pull 把雲端的更新拉到已有的本地 repo。三個一起記。

Step 6：.gitignore 是什麼 + 範本

📣 「不是所有檔案都該推上 GitHub。密碼、暫存檔、虛擬環境——這些要用 .gitignore 擋掉。」

為什麼需要 .gitignore？

檔案類型	例子	為什麼不該進版控
機密資料	.env（API key、密碼）	推上去就外洩了，超危險
自動產生的檔	__pycache__/、*.pyc	Python 自動生成，沒必要存
虛擬環境	.venv/、venv/	體積大，別人重建即可（後半段會用到）
系統檔	.DS_Store（Mac）、Thumbs.db	作業系統垃圾檔

.gitignore 是一個放在專案根目錄的檔案，一行寫一個要忽略的規則。被列入的檔案，Source Control 面板不會理它、stage 全部時也不會加進去。

建立 .gitignore（用 VS Code）：

1. 在檔案總管（Explorer）右鍵 → New File，命名 .gitignore
2. 貼入：

# Python
__pycache__/
*.pyc
.venv/
venv/

# 機密
.env

# 系統
.DS_Store

驗證它有效：

1. 用 Terminal 建一個假的機密檔：

cd ~/projects
touch .env

2. 回 Source Control 面板看 Changes 區

✅ 預期：Changes 列出 .gitignore，但不會出現 .env（被擋掉了）

📸 截圖 C12：Source Control Changes 區（標出有 .gitignore，但沒有 .env）

📣 「.env 一定要 ignore！這集如果你只記得一件事，就記這個：含密碼、API key 的 .env 檔，絕對不能推上 GitHub。新聞上『某公司 API key 外洩』十之八九就是忘了 ignore。」

3. 把 .gitignore stage（點 +）→ commit（message：chore: 新增 .gitignore）→ Sync 推上 GitHub

---

補充：手動建 Personal Access Token（GUI 授權失敗時才需要）

只有 VS Code 的瀏覽器授權卡住、Terminal 改要你輸入密碼時，才需要做。

1. GitHub 右上角頭像 → Settings
2. 左邊欄最下面 → Developer settings
3. Personal access tokens → Tokens (classic) → Generate new token (classic)
4. 填寫：

欄位	填什麼
Note	課堂用
Expiration	90 days
Scopes	☑️ repo（整個區塊打勾）

5. 點「Generate token」→ ⚠️ 立刻複製！ 離開頁面就看不到了
6. 回到要求密碼的地方，貼上 token（不是密碼），Enter

📸 截圖 C13：Token 產生頁面（標出複製按鈕 + 「現在不複製就沒了」）

---

8. VS Code Extension 推薦

📣 「VS Code 的靈魂是 extension。EP01 裝了 WSL / Python / Git Graph 三個基本的，今天再補幾個讓你寫 code 更舒服的。」

怎麼裝：點左邊 Activity Bar 的「Extensions」圖示（四個方塊），或 Ctrl+Shift+X，搜尋名稱 → 點 Install。

Extension	做什麼	為什麼推薦
Python（Microsoft，已裝）	語法高亮、自動完成、debug、跑測試	寫 Python 的標配，沒有它寸步難行
GitLens	每一行 code 旁顯示「是誰、什麼時候、哪個 commit 改的」	看歷史、查 bug 來源神器，把 Git 歷史融進編輯器
Error Lens	把錯誤/警告直接顯示在出錯的那一行行末	不用滑到底下看 Problems 面板，紅字直接跳出來
autoDocstring	在函式下打 """ 自動產生 docstring 樣板	寫文件超省事，自動列出參數、回傳
Markdown Preview Mermaid Support	讓 VS Code 的 Markdown 預覽能渲染 Mermaid 圖	在本地就看到架構圖，不用 push 上 GitHub 才看得到
indent-rainbow	用顏色標出縮排層級	Python 靠縮排，顏色化避免縮排錯誤

📸 截圖 D1：Extensions 面板搜尋並安裝 GitLens

• 紅框①標出搜尋欄
• 紅框②標出 Install 按鈕

GitLens 實際感受一下：

1. 裝好 GitLens 後，打開 app.py
2. 把游標停在任一行

✅ 預期：那行行末會淡淡顯示「你, 幾分鐘前 · feat: 新增 greet 函式」

📸 截圖 D2：GitLens 行末的 blame 提示

📣 「GitLens 把『這行是誰寫的、為什麼寫的』直接攤在你眼前。以後接手別人的專案、或回頭看自己三個月前的 code，這個超有用。」

📣 「Error Lens 也試一下：故意打錯一個變數名，紅字會直接出現在那行——不用再瞇眼找問題在哪。」

---