5th-GitHub 練習

# 任務 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` 分支的頁面是否有出現預期網頁畫面