# GitHub 協作入門工作坊
這份教材是本次 **GitHub 協作入門 Workshop** 的課程筆記。
在這堂課中，我們會從最基礎開始，帶大家一步一步了解：
- Git 是什麼
- GitHub 如何用來協作開發
- 如何建立自己的 GitHub Pages 個人網站
- 如何透過 Fork、Branch、Pull Request 參與專案
- 最後一起完成一個簡單的協作專案
本課程的重點不是只介紹概念，而是希望大家 **實際操作 GitHub 的完整協作流程**。
---
## 今日目標
這堂課結束後，你會：
- 🛠️ 理解 Git 與 GitHub 的差異
- 🛠️ 知道 Repository、Commit、Branch、Fork 的用途
- ⭐️ 建立自己的 GitHub Pages 個人網站
- 🛠️ 學會使用 Branch 進行開發
- 🛠️ 發送 Pull Request（PR）
- ⭐️ 與他人一起完成一個協作專案
在課程中，我們會完成兩件主要的事情：
1️⃣ 建立 **自己的 GitHub Pages 個人網站**
2️⃣ 參與 **GDG Member Wall 協作專案**
---
## 課程資源
課程中會用到以下資源：
**課程簡報**
{%preview https://www.canva.com/design/DAHDQzhTlqY/0fB0Fikl5IWvwoJ_ZSl4Mg/view?utm_content=DAHDQzhTlqY&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h30cc404281 %}
**個人 GitHub Page 範例**
{%preview https://github.com/xujk0217/xujk0217.github.io.git %}
**協作 GitHub repository**
{%preview https://github.com/xujk0217/GDG-Member-Wall.git %}
**協作網站**
{%preview https://gdgoc-ntpu-member-wall.vercel.app/ %}
---
## 為什麼要學 GitHub？
想像一個情境：
三個人一起寫一個專案。
每個人都在修改不同的功能：
- A 修改登入功能（login）
- B 修改首頁畫面
- C 修改其他功能
如果沒有好的版本管理，很容易發生以下情況：
- 有人把別人的修改 **覆蓋掉**
- 不知道現在哪個版本才是最新版本
- 某個版本壞掉，但 **找不到之前的版本**
很多團隊會出現像這樣的檔名：
final
final_v2
final_final
final_fix
final_fix_login
final_real_final
看起來好像很多版本，但其實很難管理。
> 問題不是「誰寫錯」，而是 **沒有版本控制系統**。
---
## 什麼是 Git？
Git 是一種 **版本控制系統（Version Control System）**。
它的主要功能是：
- 記錄每一次修改
- 保存完整的修改歷史
- 可以回到任何過去版本
- 讓多人同時開發同一個專案
在 Git 中，每一次修改都會變成一個 **Commit**。
例如：
commit 1：建立專案
commit 2：新增 login 功能
commit 3：修正 bug
commit 4：修改 UI
這些 commit 會形成一條 **版本歷史**。
如果某個版本壞掉，你可以回到之前的版本。
---
## 什麼是 GitHub？
GitHub 是一個 **讓 Git 專案放在雲端的平台**。
簡單來說：
Git = 版本控制工具
GitHub = 協作平台
GitHub 提供很多功能：
- 儲存程式碼
- 團隊協作開發
- Pull Request
- Issue 討論
- 建立網站（GitHub Pages）
很多開源專案、公司專案都會放在 GitHub 上。
---
## Repository 與 Commit
### Repository 是什麼？
Repository（簡稱 Repo）就是一個 **專案資料夾**。
裡面可以包含：
- 程式碼
- 圖片
- 文件
- 設定檔
- 專案的所有版本歷史
例如一個網站專案可能長這樣：
project
├ `index.html`
├ `app.js`
├ `style.css`
├ `README.md`
└ `images/`
當你建立一個 repository，其實就是建立一個新的專案。
---
### Commit 是什麼？
Commit 可以理解為 **一次有意義的修改紀錄**。
例如：
- 新增一個功能
- 修正一個 bug
- 修改 UI
- 更新文件
每一次 commit 都會被 Git 記錄。
因此整個專案的歷史會變成一條時間線：
commit → commit → commit → commit
這樣我們就可以隨時知道：
- 誰修改了什麼
- 什麼時候修改的
- 修改了哪些檔案
---
## Fork 是什麼？
在 GitHub 上，如果你想要修改別人的專案，通常不會直接修改原始 repository。
而是先做一件事情：
**Fork**
Fork 的意思是：
> 把別人的 repository **複製一份到自己的 GitHub 帳號**。
例如：
原始專案（upstream）
↓ Fork
你的專案（your copy）
Fork 之後，你會得到一個 **自己的版本**。
在這個 repository 中，你可以：
- 自由修改程式
- 新增檔案
- 嘗試新的功能
而且這些修改 **不會影響原始專案**。
當你修改完成後，如果希望原專案也接受你的修改，你可以送出一個：
**Pull Request**
整個流程通常是：
Fork → 修改 → Pull Request
---
## Fork vs Clone
在學 GitHub 的時候，很多人會把 **Fork** 和 **Clone** 搞混。
但其實這兩個概念完全不同。
### Fork
Fork 是：
> 把別人的 repository **複製一份到自己的 GitHub 帳號**
流程是：
GitHub → GitHub
例如：
原始專案（upstream）
↓ Fork
你的 GitHub repository
Fork 之後，你會得到一個 **自己的版本**，可以自由修改，而不會影響原始專案。
---
### Clone
Clone 是：
> 把 GitHub 上的 repository **下載到自己的電腦**
流程是：
GitHub → 你的電腦
例如：
GitHub repository
↓ clone
你的本地電腦
Clone 主要用於：
- 在本地開發
- 修改程式碼
- 再把修改 push 回 GitHub
---
### Fork vs Clone 簡單比較
| 功能 | Fork | Clone |
|-----|-----|-----|
| 複製到哪裡 | GitHub 帳號 | 本地電腦 |
| 用途 | 參與別人的專案 | 本地開發 |
| 是否影響原專案 | 不會 | 不會 |
---
## GitHub 協作流程
在 GitHub 上協作時，通常會遵循一個固定流程。
這也是很多開源專案的標準流程。
基本流程如下：
```
Fork → Create Branch → 修改內容 → Commit → Pull Request
```
我們來看每一步在做什麼。
---
### 1 Fork repository
第一步是 **Fork 專案**。
這會把原始專案複製到你的 GitHub 帳號。
這樣你就可以自由修改專案，而不會影響原始 repository。
---
### 2 Create branch
接著建立一個 **branch（分支）**。
Branch 可以理解為：
> 在專案中建立一條新的開發線
例如：
```
main
├ feature-login
├ feature-ui
└ feature-card
```
這樣不同功能就可以在不同 branch 開發，不會互相影響。
---
### 3 修改內容
在自己的 branch 中修改內容。
例如：
- 新增一個功能
- 修改 UI
- 修正 bug
- 新增資料
在本次 workshop 中，你會新增一個 **自己的 member card**。
---
### 4 Commit
完成修改後，需要做 **commit**。
Commit 就是：
> 把這一次修改記錄到 Git 的歷史中。
例如：
```
Add member card
Fix typo
Update UI
```
每一次 commit 都會留下修改紀錄。
---
### 5 Pull Request（PR）
最後一步是送出 **Pull Request（PR）**。
Pull Request 的意思是：
> 向原始專案提出「請求合併修改」。
專案管理者可以：
- 查看你的修改
- 討論內容
- 決定是否合併
如果 PR 被接受，你的修改就會進入原始專案。
---
### 整體流程圖
完整流程可以簡化成：
```
Fork
↓
Create Branch
↓
Edit / Add Content
↓
Commit
↓
Pull Request
```
在接下來的實作中，我們會 **真的走一次完整流程**。
---
## 建立你的 GitHub Pages
接下來我們要建立 **自己的個人網站**。
我們會使用 GitHub 提供的免費服務：
**GitHub Pages**
GitHub Pages 可以讓你直接把 GitHub repository 變成一個網站。
網站網址會是：
```
https://你的GitHub帳號.github.io
```
例如：
```
https://student123.github.io
```
在這個課程中，我們會使用一個 **已經準備好的網站模板**，讓你不用從零開始寫 HTML。
---
### Step 1：Fork 個人網站模板
首先打開老師提供的 **個人網站模板 repository**。
{%preview https://github.com/xujk0217/xujk0217.github.io.git %}
在右上角點擊：
```
Fork
```
Fork 的意思是：
> 把這個 repository **複製一份到自己的 GitHub 帳號**
---
### Step 2：修改 Repository 名稱
在 Fork 的視窗中，你需要修改 repository 名稱。
Repository name 必須改成：
```
你的GitHub帳號.github.io
```
例如：
```
student123.github.io
```
⚠️ **這一步非常重要**
GitHub Pages 只有在 repository 名稱符合：
```
username.github.io
```
的時候，才會自動變成個人網站。
修改完成後，點擊：
```
Create fork
```
---
### Step 3：確認 GitHub Pages 已啟用
進入你剛 Fork 的 repository。
點擊上方：
```
Settings
```
然後進入：
```
Pages
```
確認以下設定：
Source
```
Deploy from a branch
```
Branch
```
main
```
Folder
```
/ (root)
```
按下：
```
Save
```
---
### Step 4：等待網站部署
GitHub 會自動開始部署網站。
你可以到：
```
Actions
```
頁面查看部署狀態。
當 workflow 出現 **綠色勾勾**，代表部署完成。
通常需要：
```
1～2 分鐘
```
---
### Step 5：打開你的網站
在瀏覽器輸入：
```
https://你的GitHub帳號.github.io
```
例如：
```
https://student123.github.io
```
如果看到網站畫面，代表成功了！
🎉 **恭喜，你已經有自己的網站了！**
---
## 修改你的個人網站
現在我們來修改網站內容。
打開 repository 裡的：
```
index.html
```
你會看到很多地方有：
```
✏️
```
這代表 **需要修改的地方**。
---
### 可以修改的內容
#### 1. 你的名字
修改網站上的名稱，例如：
```
你好，我是 Kevin
```
---
#### 2. 自我介紹
在 Hero 區塊修改介紹文字，例如：
```
我是國立臺北大學的學生，
喜歡探索技術、寫程式和做專案。
```
---
#### 3. 社群連結
修改你的社群網址：
GitHub
```
https://github.com/你的帳號
```
Instagram
```
https://instagram.com/你的帳號
```
YouTube
```
https://youtube.com/@你的頻道
```
Email
```
mailto:你的email@example.com
```
---
### 修改完成後
點擊右上角：
```
Commit changes
```
幾分鐘後重新整理網站，你就會看到更新內容。
---
### 小提醒
GitHub Pages 不是即時更新的。
每次修改後通常需要：
```
1～2 分鐘
```
網站才會重新部署完成。
---
## 什麼是 Branch？
在多人開發專案時，如果所有人都直接修改 `main`，很容易出現問題。
例如：
- A 正在修改首頁
- B 正在新增功能
- C 正在修 bug
如果大家都直接修改 `main`，可能會發生：
- 檔案被覆蓋
- 功能互相影響
- 很難知道哪個版本是正確的
因此在實際開發中，我們通常 **不會直接修改 main**。
---
### Branch 是什麼？
Branch（分支）可以理解為：
> 從主版本延伸出的一條「新的開發路線」
例如：
```
main
├ feature-login
├ feature-ui
└ feature-card
```
每個 branch 都可以：
- 獨立修改內容
- 新增功能
- 測試想法
而且 **不會影響主版本**。
---
### Branch 的基本流程
在 GitHub 協作中，常見的流程是：
```
main
↓
建立 branch
↓
在 branch 修改內容
↓
完成後合併回 main
```
也就是：
```
main
└ feature-new-feature
↓
修改內容
↓
Pull Request
↓
merge
↓
main
```
---
### 為什麼需要 Branch？
Branch 讓我們可以：
- 同時開發不同功能
- 不會影響其他人的修改
- 在完成之前保持主版本穩定
這也是幾乎所有軟體團隊都會使用的開發方式。
---
### 在這堂課中我們會怎麼用？
在接下來的協作專案中：
每個人都會：
1. 建立 **自己的 branch**
2. 在 branch 中新增 **自己的 member card**
3. 送出 **Pull Request**
最後我們會把大家的修改 **合併到主版本**。
這樣整個網站就會同時出現所有人的卡片。
接下來我們就來實際體驗一次 GitHub 的協作流程。
---
## 什麼是 Pull Request？
當你在自己的 branch 完成修改後，下一步通常是送出：
**Pull Request（PR）**
Pull Request 的意思是：
> 請求把你的修改合併到主版本（main）。
例如：
```
main
└ feature-card
```
當你完成 `feature-card` 的修改後，可以送出 PR：
```
feature-card → main
```
專案管理者可以：
- 查看你的修改
- 留言討論
- 要求修改
- 確認後合併（merge）
---
### 為什麼需要 Pull Request？
Pull Request 可以讓團隊：
- 檢查程式碼
- 討論修改內容
- 避免錯誤進入主版本
這也是 **開源專案與公司團隊常見的協作方式**。
---
### 在這堂課中會怎麼用？
在接下來的協作專案中：
每個人會：
1. Fork 專案
2. 建立 branch
3. 新增自己的 member card
4. 發送 Pull Request
最後我們會把大家的 PR **合併到主版本**。
---
## 團隊專案：GDG Member Wall
接下來我們要一起完成一個簡單的協作專案：
**GDG Member Wall**
專案網址：
{%preview https://github.com/xujk0217/GDG-Member-Wall %}
網站：
{%preview https://gdgoc-ntpu-member-wall.vercel.app/ %}
---
### 這個專案在做什麼？
這個網站會：
- 自動讀取每個成員的資料
- 產生個人介紹卡片
- 顯示在網站上
每個人只需要新增 **一個 JSON 檔案**，網站就會自動產生你的卡片。
---
### 專案結構
```
gdg-member-wall
│
├── index.html
├── assets/
│ ├── style.css
│ └── app.js
│
└── members/
├── _template.json
├── index.json
```
說明：
- `index.html` → 網站頁面
- `assets/` → 網站的 CSS 與 JavaScript
- `members/` → 所有成員資料
每個人的資料都是 **一個 JSON 檔案**。
---
## 新增你的專屬小卡片
### Step 1：Fork 這個專案
打開專案：
{%preview https://github.com/xujk0217/GDG-Member-Wall %}
點擊右上角：
```
Fork
```
這會把 repository **複製到你的 GitHub 帳號**。
接下來所有操作都在 **你 Fork 的 repository** 中進行。
---
### Step 2：建立 Branch
在你的 repository 中建立一個新的 branch。
建議命名：
```
feature-你的id
```
例如：
```
feature-kevin
```
不要直接修改 `main`。
---
### Step 3：新增 JSON 檔案
進入資料夾：
```
members/
```
複製 _template.json 內文或是以下文字：
```json
{
"id": "yourname",
"name": "Your Name",
"title": "社員/鑽頭企鵝",
"bio": "A short bio about yourself",
"link": "https://github.com/youraccount"
}
```
然後新增一個檔案，名字為：
```
你的id.json
```
例如：
```
kevin.json
```
貼上 _template.json 內文並修改成你的內容
---
### Step 4：填寫你的資料
參考模板，填入你的資料：
```json
{
"id": "yourname",
"name": "Your Name",
"title": "社員/鑽頭企鵝",
"bio": "A short bio about yourself",
"link": "https://github.com/youraccount"
}
```
請注意：
- 每個欄位都要有雙引號
- 最後一行不能多逗號
---
### Step 5：Commit 修改
按右上角 commit change：
填寫 commit message，像是：
```
Add member card for kevin
```
但應該會自動生成 commit message
然後提交 commit。
---
### Step 6：發送 Pull Request
GitHub 會出現：
```
Compare & Pull Request
```
點擊後建立 PR。
當 PR 被合併後：
你的卡片就會出現在網站上！
---
### Step 7：接收、合併 Pull Request（我負責做，可以參考）
當接收到 PR：
會接到以下的合併請求：
點擊 merge pull request 開始合併：
---
## 如果發生衝突怎麼辦？
有時候 GitHub 會顯示：
```
This branch has conflicts
```
這表示：
- 兩個人修改了同一個地方
- Git 不知道要保留哪個版本
需要手動選擇保留哪一段內容。
> 衝突不是錯誤，是協作開發中很正常的一部分。
---
## 今日總結
今天你學會了：
- Git 是版本控制系統
- GitHub 是協作平台
- Repository 是專案空間
- Commit 是修改紀錄
- Branch 是開發分支
- Pull Request 是協作核心
透過這個專案，你已經實際體驗了 **GitHub 協作流程**：
```
Fork
↓
Branch
↓
Commit
↓
Pull Request
```
這些技能是未來：
- 參與專案
- 參與開源
- 團隊開發
的重要基礎能力。
---
### 20260309 第2次社課【GitHub 協作入門工作坊】回饋表單：
{%preview https://forms.gle/e5XQYRSFexw6di2s9 %}
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet