---
# System prepended metadata

title: 5th-GitHub 練習
tags: [GitHub, Git, 六角學院]

---

# 任務 1 ：環境初始化

## 你可以掌握的技術

1. **Repository 的建立與設定：** 在 GitHub 上創建新的 Repository，並能夠添加、編輯檔案，如 README.md 和 .gitignore。
2. **權限管理與協作：** 能夠授予其他使用者存取 Repository 的權限，並瞭解 Collaborators 的邀請流程。
3. **版本控制的基本操作：** 使用 git clone, git commit, git push, 和 git pull 指令來管理和更新 Repository。
4. **Markdown 文件的編輯：** 熟悉如何在 README.md 檔案中使用 Markdown 語法和 HTML 標籤。
5. **Commit 訊息的管理：** 能夠撰寫有意義的 commit 訊息，並瞭解如何查看 Repository 的 commit 歷史。

## 任務流程
- [x]  1-1：A 成員先到 GitHub 建立一個新 Repo
- [ ]  1-2：A 成員在 GitHub 建立 Repo 介面中，添加 `空白的 README.md`。
- [x]  1-3：A 成員增加 `.gitignore` 忽略清單，忽略掉 `node_modules/`
- [x]  1-4：A 成員提供 GitHub Repo 權限給 B 成員，位置在 `Settings > Collaborators`

    ### Ariel
- [x]  1-5：B 成員收 Email 審核同意 Repo 權限，並將 GitHub Repo Clone 下來
- [x]  1-6：B 成員在 `READMD.md` 將內容全部清空，新增一個 h2，內容為 `團隊成員`
- [x]  1-7：B 成員在團隊成員標題下方，增加一個 ul li 列表，並新增自己的名字在第一個 li 上
- [x]  1-8：B 成員進行 commit， comment 內容為 `新增團隊成員區塊`
- [x]  1-9：B 成員完成一個 commit 更新後，進行 push 動作
    ### Emma
- [x]  1-5：B 成員收 Email 審核同意 Repo 權限，並將 GitHub Repo Clone 下來
- [x]  1-6：B 成員在 `READMD.md` 將內容全部清空，新增一個 h2，內容為 `團隊成員`
- [x]  1-7：B 成員在團隊成員標題下方，增加一個 ul li 列表，並新增自己的名字在第一個 li 上
- [x]  1-8：B 成員進行 commit， comment 內容為 `新增團隊成員區塊`
- [x]  1-9：B 成員完成一個 commit 更新後，進行 push 動作

- [x]  1-10：A 成員 clone Repo，並用 vscode 開啟專案資料夾
- [x]  1-11：A 成員在 `READMD.md` 新增第二個 li，並寫上自己的名字
- [x]  1-12：A 成員進行 commit， comment 內容為 `新增成員名字`
- [x]  1-13：A 成員完成一個 commit 更新後，進行 push 動作
- [x]  1-14：B 成員再次將內容 Pull 下來，確保有接收到 `READMD.md` 的團隊成員有兩個名字





## 通關檢核點

- [x]  A、B 成員與 GitHub Repo 都有相同的 commit 數量
- [x]  GitHub Repo 上的 `READMD.md`，都擁有所有團隊成員的名稱
- [x]  GitHub Repo 上有忽略清單 `.gitignore`


## 預期線圖
![](https://hackmd.io/_uploads/HkMizm6ga.png)



## 提交 Git Repo 連結

* [Chloe-練習用 Git Repo 連結](https://github.com/ChloeTseng064/5th-PR.practice)

---
# 任務二：單一 branch 更新與衝突
## 關卡提醒
1. 請沿用 `任務 1 ：環境初始化` 的 GitHub Repo 即可，或要新增一個 Repo 重新做也 ok


## 你可以掌握的技術
1. **合併和更新**：在 git push 時遭遇因其他成員已經更新而引發的錯誤。使用 `git pull` 進行合併前的更新，這時可能會產生版本衝突。
2. **版本衝突識別與解決**：當兩位成員修改了同一檔案的同一部分，將會在 `git pull` 時發生版本衝突。學習如何手動解決這些衝突，並合併版本。重新加入索引並使用 git commit 完成合併。


## 任務流程

- [x]  1-1：A 成員新增一個空的 `index.html` **，進行 git push 動作**
- [x]  1-2：B 成員 Clone 下來，將 `index.html` 網頁內容加入下方折疊處後 **，進行 git push 動作**

::: spoiler HTML 內容
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>標題</h1>
</body>
</html>
```
:::
- [ ] 1-3：**<span style="color:blue">A 成員進行 git pull 抓最新 `index.html` 版本下來</span>**
- [ ] 1-4：A 成員修改 head 的 `title`，文字設為 `修改 title`，並 commit 一個版本，comment 內容為 `修改 head title`**，進行 git push 動作**
- [x]  1-5：B 成員進行 `git pull` 抓最新版本下來
- [x]  1-6：B 成員修改 h1 的文字設為 `修改標題`，並 commit 一個版本，comment 內容為 `修改 h1 文字`**，進行 git push 動作**
- [ ]  1-7：A 成員修改 head 的 `title`，文字設為 `再次修改 title`，並 commit 一個版本，comment 內容為 `調整 head 文字`
- [ ] **1-8：<span style="color:blue">A 成員進行 `git push`，引發更新錯誤</span>**
- [ ] 1-9：A 成員執行 `git pull` 合併版本後 **，進行 git push 動作**
- [x] 1-10：B 成員進行 `git pull` 抓最新版本下來
- [x] 1-11：B 成員修改 h1 的文字設為 `修改標題 B`，並 commit 一個版本，comment 內容為 `修改 h1 文字，增加 B 資訊`**，進行 git push 動作**
- [ ] 1-12：A 成員修改 h1 的文字設為 `修改標題 A`，並 commit 一個版本，comment 內容為 `修改 h1 文字，增加 A 資訊`
- [ ] **1-13：<span style="color:blue">A 成員執行 `git pull` 引發版本合併衝突**</span>
- [ ] 1-14：A 成員只保留一個 h1，文字設為 `修改標題 AB`，重新加入索引，並執行 `git commit` 來合併版本 **，進行 git push 動作**
- [ ] 1-15：B 成員也進行 git pull 抓最新版本下來



## 通關檢核點

- [ ]  A、B 成員與 GitHub Repo 都有相同的 commit 數量
- [ ]  藍字步驟，都有顯示預期結果
```
## 關鍵步驟講解
1-3：本地 Fast-forward (快轉) 合併成功
1-8：遠端 Fast-forward (快轉) 合併被拒絕 - 
     需執行 Pulling and Merging (拉取並合併)
1-13：Merge Conflict (合併衝突)
```

---
# 任務三：多分支管理與 git reset 還原
## 任務流程

- [ ]  1-1：A 成員新增一個新的 Repo，增加 `index.html`、`all.css`，並在 `index.html` 加上一個 h1 標題，並在 `all.css` 將 h1 設計文字為藍色 **，進行 git push 動作**
- [ ]  1-2：A 成員開 `dev` 分支 **，將 dev 分支進行 git push 動作**
- [x] 1-3：B 成員 clone 下來，並故意在 main 分支，將 all.css 的標題文字顏色變成綠色，並 commit 一個版本
- [x] 1-4：B 成員使用 reset 語法還原後，切換 `dev` 分支 commit 一個版本 **，將 dev 分支進行 git push 動作**
- [ ] 1-5：A 成員進行 git pull 抓 `dev` 最新版本下來
- [ ] 1-6：A 成員修改 head 的 `title`，文字設為 `修改 title`，並 commit 一個版本，comment 內容為 `修改 head title`**，將 dev 分支進行 git push 動作**
- [ ]  1-7：B 成員進行 `git pull` 抓 `dev` 最新版本下來
- [ ]  1-8：B 成員修改 h1 的文字設為 `修改標題`，並 commit 一個版本，comment 內容為 `修改 h1 文字`**，將 dev 分支進行 git push 動作**
- [ ] 1-9：B 成員透過 GitHub ，申請一個 main 合併 dev 進度的 PR，並指派 A 成員進行審核
- [ ] 1-10：A 成員審核成功後，用 GitHub Pages 觀看 `main` 分支的頁面是否有出現預期網頁畫面

---
# 任務四：GitHub PR 管理
## 你可以掌握的技術
- 非同步更新進度
- 審核 PR 通過、退 PR 的應對


## 任務流程

- [ ]  1-1：A 成員新增一個新的 Repo，增加 `index.html`，並在 `index.html` 加入以下內容，在 `main` commit 一個版本，**進行 git push 動作，B 成員也將進度 clone 下來**

::: spoiler HTML 內容
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>成員列表</h1>
    <ul>
        <li>成員一名稱：</li>
        <li>成員二名稱：</li>
        <li>成員三名稱：</li>
    </ul>
</body>
</html>
```
:::
- [ ] 1-2：A 成員在 `main` 分支進度上，開一個 `feature/newAmember` 的分支 ，在成員一名稱寫上自己名字，commit 一個版本後， **將`feature/newAmember`分支進行 git push，並發 PR 合併到 `main`，並指派 B 成員 review**
- [x] 1-3：B 成員在 `main` 分支進度上，開一個 `feature/newBmember` 的分支 ，在成員二名稱寫上自己名字，commit 一個版本後， **將`feature/newBmember`分支進行 git push，並發 PR 合併到 `main`，並指派 A 成員 review**
- [ ] 1-4：B 成員到 A 成員發的 PR 進行檢視，並留言「你確認名字要改嗎？」、A 成員回覆：「想了下還是調整下好了」，於是退回 PR
- [ ] 1-5：A 成員 git fetch `feature/newBmember` 分支，檢視無誤後，審核通過 B 成員的 PR
- [ ]  1-6：A 成員進行 `git fetch origin main` 指令抓最新版本下來
- [ ] 1-7：A 成員 git checkout 到`feature/newAmember`，在成員一名稱重新寫上自己調整的名字，再 commit 一個版本後，並合併 `origin/main` 進度，合併發生衝突需解衝突， **將`feature/newAmember`分支進行 git push，並發 PR 合併到 `main`，並指派 B 成員 review**

- [ ] 1-8：B 成員 PR 直接審核成功

- [ ] 1-9：B 成員進行 `git fetch origin main` 指令抓最新版本下來後，git checkout 到`origin/main`，開一個新分支為`feature/editTitle `，並 checkout 過去修改 `index.html`的 title 為 `修改 title B`， **將`feature/editTitle`分支進行 git push，並發 PR 合併到 `main`，指派 A 成員審核**

- [ ] 1-10：A 成員審核 PR 成功後，透過 GitHub Pages 觀看最後結果是否如預期
---
# 任務五：GitHub PR 衝突解決
## 你可以掌握的技術
- GitHub PR 衝突時的解決方式



## 任務流程

- [ ]  1-1：A 成員新增一個新的 Repo，增加 `index.html`，並在 `index.html` 加入以下內容，在 `main` commit 一個版本，**進行 git push 動作，B 成員也將進度 clone 下來**

::: spoiler HTML 內容
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>
```
:::
- [ ] 1-2：A 成員在 `main` 分支進度上，開一個 `feature/editTitleA` 的分支 ，在`index.html` 的 title 調整為 `修改 Title A`， **將`feature/editTitleA`分支進行 git push，並發 PR 合併到 `main`，並指派 B 成員 review**
- [ ] 1-3：B 成員在 main 分支進度上，開一個 `feature/editTitleB` 的分支 ，在`index.html` 的 title 調整為 `修改 Title B`， 將`feature/editTitleB`分支進行 git push，並發 PR 合併到 main，並指派 A 成員 review
- [ ] 1-4：B 成員審核 A 成員的 PR 通過

# 以下有兩個版本
## 版本一：B 開發者自行處理(業界傾向此種流程)
- [ ] 1-5：A 成員檢視 B 的 PR 會發生衝突，於是退回 PR 或留言請 B 成員修好
- [ ]  1-6：B 成員進行 `git fetch origin main` 指令抓最新版本下來後，git checkout 到`feature/editTitleB`，並合併 `origin/main` 進度，合併發生衝突需解衝突。並將 title 改為 `修改 title AB`， **將`feature/editTitleB`分支進行 git push，並請 A 成員 review**
- [ ] 1-7：A 成員審核成功後，用 GitHub Pages 觀看 `main` 分支的頁面是否有出現預期網頁畫面
## 版本二：幫忙 Review 的 A 開發者，fetch 下來解衝突(除非你主管跟同事是好人，才是此版本)
- [ ] 1-5：A 成員檢視 B 的 PR 會發生衝突
- [ ]  1-6：A 成員進行 `git fetch origin main`、`git fetch origin feature/editTitleB` 指令抓最新版本下來後，git checkout 到`feature/editTitleB`，並合併 `origin/main` 進度，合併發生衝突需解衝突。並將 title 改為 `修改 title AB`， **將`feature/editTitleB`分支進行 git push，並審核通過 PR**
- [ ] 1-7：A 成員審核成功後，用 GitHub Pages 觀看 `main` 分支的頁面是否有出現預期網頁畫面
---
# 任務六：實務團隊開發流程
## 你可以掌握的技術
* GitHub 多人團隊協作方式
    * main：正式環境
    * dev：開發環境
    * feature/功能：新功能開發

## 任務流程

- [ ]  1-1：A 成員新增一個新的 Repo，增加 `index.html`、`all.css`，並在 `index.html` 加上一個 h1 標題，並在 `all.css` 將 h1 設計文字為藍色後 **，commit 一個版本**
- [ ]  1-2：A 成員在 `main` 分支上也開 `dev` 分支，**並同時將 `main`、`dev` 都 push 上去**
- [ ] 1-3：B 成員 clone 下來，在 `dev` 分支上開一個新 feature，名為 `feature/addStyle`，新增一個 h2，並將他的文字顏色變成綠色，commit 一個版本後 **，將 `feature/addStyle` 分支進行 git push 動作**
- [ ] 1-4：B 成員透過 GitHub ，申請一個 `dev` 合併 `feature/addStyle` 進度的 PR，並指派 A 成員進行審核
- [ ] 1-5：A 成員進行 git fetch ，將 `feature/addStyle` 抓最新版本下來，並在本機上確認成員進度
- [ ] 1-6：A 成員確認沒問題後，審核 PR 通過
- [ ]  1-7：A 成員 git fetch `dev` 後，開一個新的 `feature/editTitle` 分支，修改 `head` 標題為 `修改標題`，commit 一個版本後便 **，將 `feature/editTitle` 分支進行 git push 動作**
- [ ] 1-8：A 成員透過 GitHub ，申請一個 `dev` 合併 `feature/editTitle` 進度的 PR，並指派 B 成員進行審核
- [ ]  1-9：B 成員 git fetch `dev` 後，開一個新的 `feature/editColor` 分支，修改 h1 標題顏色為紅色，commit 一個版本後便 **，將 `feature/editColor` 分支進行 git push 動作**
- [ ] 1-10：B 成員透過 GitHub ，申請一個 `dev` 合併 `feature/editColor` 進度的 PR，並指派 A 成員進行審核 
- [ ] 1-11：B 成員進行 git fetch ，將 `feature/editTitle` 抓最新版本下來，並在本機上確認成員進度
- [ ] 1-12：B 成員確認沒問題後，審核 PR 通過
- [ ] 1-13：A 成員進行 git fetch ，將 `feature/editColor` 抓最新版本下來，並在本機上確認成員進度
- [ ] 1-14：A 成員確認沒問題後，審核 PR 通過
- [ ] 1-15：A 成員審核成功後，申請一個 `main` 合併 `dev` 進度的 PR，用 GitHub Pages 觀看 `main` 分支的頁面是否有出現預期網頁畫面


