---
# System prepended metadata

title: GitHub 協作入門工作坊

---

# 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 修改其他功能
![截圖 2026-03-09 上午10.32.11](https://hackmd.io/_uploads/B1WHW2jFZl.png)

如果沒有好的版本管理，很容易發生以下情況：

- 有人把別人的修改 **覆蓋掉**
- 不知道現在哪個版本才是最新版本
- 某個版本壞掉，但 **找不到之前的版本**

很多團隊會出現像這樣的檔名：

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 會形成一條 **版本歷史**。

![截圖 2026-03-09 上午10.33.16](https://hackmd.io/_uploads/r1es-niY-x.png)


如果某個版本壞掉，你可以回到之前的版本。

---

## 什麼是 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 帳號**。

![截圖 2026-03-09 上午10.35.33](https://hackmd.io/_uploads/SyPbf2iYWe.png)


例如：

原始專案（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 帳號**

![截圖 2026-03-09 凌晨1.21.08](https://hackmd.io/_uploads/r1ZQlVoKZg.png)


---

### Step 2：修改 Repository 名稱

在 Fork 的視窗中，你需要修改 repository 名稱。

Repository name 必須改成：

```
你的GitHub帳號.github.io
```

例如：

```
student123.github.io
```
![截圖 2026-03-09 凌晨1.22.03](https://hackmd.io/_uploads/HJoUg4oYWg.png)


⚠️ **這一步非常重要**

GitHub Pages 只有在 repository 名稱符合：

```
username.github.io
```

的時候，才會自動變成個人網站。

修改完成後，點擊：

```
Create fork
```

![截圖 2026-03-09 凌晨1.22.37](https://hackmd.io/_uploads/H1Rve4iKbg.png)


---

### Step 3：確認 GitHub Pages 已啟用

進入你剛 Fork 的 repository。

點擊上方：

```
Settings
```
![截圖 2026-03-09 凌晨1.23.59](https://hackmd.io/_uploads/SJGaxNsFZx.png)

然後進入：

```
Pages
```
![截圖 2026-03-09 凌晨1.24.21](https://hackmd.io/_uploads/B1UAeEsY-e.png)

確認以下設定：

Source

```
Deploy from a branch
```

Branch

```
main
```
![截圖 2026-03-09 凌晨1.25.00](https://hackmd.io/_uploads/S11bbNitWe.png)

Folder

```
/ (root)
```
![截圖 2026-03-09 凌晨1.25.19](https://hackmd.io/_uploads/HJbMZEotbe.png)

按下：

```
Save
```

---

### Step 4：等待網站部署

GitHub 會自動開始部署網站。

你可以到：

```
Actions
```

頁面查看部署狀態。

當 workflow 出現 **綠色勾勾**，代表部署完成。

通常需要：

```
1～2 分鐘
```
![截圖 2026-03-09 凌晨1.26.14](https://hackmd.io/_uploads/Hycrb4iFWl.png)
![截圖 2026-03-09 凌晨1.26.53](https://hackmd.io/_uploads/SJBd-VjKbe.png)

---

### 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（分支）可以理解為：

> 從主版本延伸出的一條「新的開發路線」

![截圖 2026-03-09 上午10.36.35](https://hackmd.io/_uploads/HJHSMhjFbx.png)


例如：

```
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
```

![截圖 2026-03-09 上午10.37.23](https://hackmd.io/_uploads/SyVuzhjYbl.png)


專案管理者可以：

- 查看你的修改
- 留言討論
- 要求修改
- 確認後合併（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** 中進行。
![截圖 2026-03-09 上午9.59.18](https://hackmd.io/_uploads/SJZ5KsiKZl.png)

---

### Step 2：建立 Branch

在你的 repository 中建立一個新的 branch。
![截圖 2026-03-09 上午10.00.05](https://hackmd.io/_uploads/HJkpYjiFbx.png)
![截圖 2026-03-09 上午10.00.36](https://hackmd.io/_uploads/BkUW5ijFbe.png)

建議命名：

```
feature-你的id
```

例如：

```
feature-kevin
```

不要直接修改 `main`。
![截圖 2026-03-09 上午10.01.01](https://hackmd.io/_uploads/HJZf5oiFbx.png)
![截圖 2026-03-09 上午10.02.14](https://hackmd.io/_uploads/HkiN5jsFZe.png)

---

### Step 3：新增 JSON 檔案

進入資料夾：

```
members/
```
![截圖 2026-03-09 上午10.03.01](https://hackmd.io/_uploads/ry_D5istZx.png)

複製 _template.json 內文或是以下文字：

```json
{
  "id": "yourname",
  "name": "Your Name",
  "title": "社員/鑽頭企鵝",
  "bio": "A short bio about yourself",
  "link": "https://github.com/youraccount"
}

```

然後新增一個檔案，名字為：

```
你的id.json
```

例如：

```
kevin.json
```
![截圖 2026-03-09 上午10.06.22](https://hackmd.io/_uploads/BkrNijsYZe.png)

貼上 _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：
![截圖 2026-03-09 上午10.08.09](https://hackmd.io/_uploads/S1j9jjoF-l.png)


填寫 commit message，像是：

```
Add member card for kevin
```
但應該會自動生成 commit message
![截圖 2026-03-09 上午10.08.49](https://hackmd.io/_uploads/S1z6osjYbg.png)

然後提交 commit。

---

### Step 6：發送 Pull Request

GitHub 會出現：

```
Compare & Pull Request
```
![截圖 2026-03-09 上午10.09.39](https://hackmd.io/_uploads/HyDxnjjFWx.png)

點擊後建立 PR。
![截圖 2026-03-09 上午10.11.00](https://hackmd.io/_uploads/BJf8njsYWg.png)
![截圖 2026-03-09 上午10.11.48](https://hackmd.io/_uploads/ryCdnijYWe.png)

當 PR 被合併後：

你的卡片就會出現在網站上！

---
### Step 7：接收、合併 Pull Request（我負責做，可以參考）

當接收到 PR：
![截圖 2026-03-09 上午10.16.20](https://hackmd.io/_uploads/SywK6jot-l.png)

會接到以下的合併請求：

![截圖 2026-03-09 上午10.15.55](https://hackmd.io/_uploads/HyZdTjjFWg.png)

點擊 merge pull request 開始合併：
![截圖 2026-03-09 上午10.17.39](https://hackmd.io/_uploads/S1IJ0oiYZx.png)


---

## 如果發生衝突怎麼辦？

有時候 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 %}