# iSpan 5. GitHub - 上課筆記本 + 整理

程式打一打想要做版本控管，想要可以知道我做過多少修改、什麼修改：

-> 最原始的方法就是每次改動前複製一份當前檔案，記錄成當前版本。

-> 管理麻煩又占空間，於是有了 Git 和 Github。

Git
1. 分散式版本控制系統。
2. 管理程式碼和追蹤文件的變更。
3. 有支援分支和合併功能。
4. 在本地操作。
:::success
:book:　有 Git 管理的位置會有一個隱藏資料夾.git，是為了記錄版本資訊。
:::

GitHub
1. 基於 Git 的程式碼代管服務平台。
2. 有助於團隊共同開發專案。
3. 可以設置權限和設定開源與否。
4. 遠端版本庫。
:::success
:book:　分散是指「每個開發者都擁有專案的完整版本歷史」，可以各自獨立進行操作。
集中式版本控制系統，不同於分散式版本控制系統，會有一個中央伺服器。
:::

Git Bash 是一個模擬 Unix 命令行環境的工具，適用於 Windows 系統。

<br><br><br><br>
## <font color="DodgerBlue">大略步驟</font>
### <font color="mistyrose">更新</font>
1. cmd到達 clone 出的目標位置。
* <font color="aquamarine">git status</font>，看有哪些變化(變更、新增、刪除)。
2. <font color="aquamarine">git add</font> 或 <font color="aquamarine">git rm</font> 來暫存。
* 再次 <font color="aquamarine">git status</font>，看是否變成綠字進入暫存區。
* <font color="aquamarine">git diff --staged</font>，比較暫存區和目前版本的差異。
3. <font color="aquamarine">git commit -m "提交訊息"</font> 來提交。
4. 如果Github上有新資料要先 <font color="aquamarine">git pull</font>更新。
* <font color="aquamarine">git log --oneline</font> 查看版本紀錄。
5. <font color="aquamarine">git push</font> 來推送。
* <font color="aquamarine">git log --oneline</font> 查看版本紀錄。

<br><br>
### <font color="mistyrose">回朔</font>
1. <font color="aquamarine">git log --oneline</font>查看紀錄並記下==當前==版本雜湊值(eq.d55ab3d)。
2. <font color="aquamarine">git revert -n 當前版本的雜湊值</font> ，撤銷當前的提交。
* <font color="aquamarine">git status</font> ，觀察狀態。
* <font color="aquamarine">git diff --staged</font> ，比較檔案。
3. git commit -m "提交訊息" ，提交檔案。
* git log --oneline 查看版本紀錄。
4. git push 來推送。
* git log --oneline 查看版本紀錄。

<br><br>
### <font color="mistyrose">分支</font>
1. <font color="aquamarine">git branch</font> 分支名稱，建立新分支
2. <font color="aquamarine">git checkout</font> 分支名稱，進入分支
* <font color="aquamarine">git branch</font> 查看分支
3. git add .
* git status
* git diff --staged
4. git commit -m "提交訊息"
5. git log --oneline
6. git checkout main
* git branch
7. <font color="aquamarine">git merge 分支名稱</font> ，把新分支合併進main。
* git status
* git log --oneline 查看版本紀錄。
8. git push ，推送。
* git log --oneline 查看版本紀錄。

<br><br>
### <font color="mistyrose">git pull</font>
1. Github更新和本地更新==無==衝突，<font color="aquamarine">git pull</font> -> <font color="aquamarine">git push</font>
2. Github更新和本地更新==有==衝突，<font color="aquamarine">git pull</font> -> <font color="aquamarine">git commit -m "解決衝突的訊息"</font> -> <font color="aquamarine">git push</font>

<br><br><br><br>
## <font color="DodgerBlue">結構</font>

放入暫存區時git就會開始管理，測試檔案多半連 git add 都不用。

<br><br><br><br>
## <font color="DodgerBlue">0. 環境設定</font>
<font color="gold">目標 : 檢查 Windows 認證，以及設定本機使用者資訊</font>
* 檢查windows認證
因為GitHub需要追蹤使用者來確定是誰改動，若windows認證不是自己的帳號需要先移除。
1. 至「控制台 → 使用者帳戶 → 認證管理員 → Windows 認證 → 一般認證」

2-1. 檢查是否已經有 git 或 gitHub 字樣的認證。

2-2. 如果有，但不是自己的 GitHub 帳號，請先移除。

* 設定本機使用者資訊
在cmd內檢查使用者名稱和信箱，若有其他人的清除掉，設定成自己的(名稱和信箱盡量和GitHub帳戶一致)。
1. 請確認已安裝 Git。
2. 查看是否已經有使用者資訊，分別輸入以下指令:
`git config --global user.name`
`git config --global user.email`
3. 如有顯示資訊，請確認是否為自己的 GitHub 帳號資訊。
如果不是，請分別輸入以下指令移除:
`git config --global --unset user.name`
`git config --global --unset user.email`
4. 設定與 GitHub 帳戶相同的使用者資訊，分別輸入以下指令:
`git config --global user.name "你的名稱"`
`git config --global user.email "你的信箱"`
:::success
:book:　指令的 `--global` 代表全域特性
:::

<br><br><br><br>
## <font color="DodgerBlue">1. 數據庫建立和下載</font>
<font color="gold">目標 : 建立 GitHub 數據庫，並複製(下載)數據庫到本機</font>

* 建立 GitHub 數據庫

1. 前往 GitHub 官網並登入帳號 ( https://github.com/ )。
2. 在 dashboard 頁面點選綠色「Create repository」或「New」按鈕 建立數據庫。
3. 在 Repository name 輸入框，輸入數據庫名稱 ( 以 ==iSpan_test== 為例 )。
4. 其餘選項維持預設，點擊最下方綠色「Create repository」按鈕建立。

* 複製(下載) GitHub 數據庫到本機。( 在「命令提示字元 | 終端機」輸入指令 )

1. 在桌面建立測試資料夾，準備存放 Github 數據庫。
2. 確認測試資料夾的路徑，終端機切換到該資料夾的位置。
3. ==git clone 數據庫位址==複製( ==下載== ) Github 上的目標數據庫。

:::success
:book: cd，Change Directory 切換目錄的意思，只能在同顆硬碟內移動。
&emsp;&nbsp;若要移動到D槽，直接輸入 D: 。
:::

<br><br><br><br>
## <font color="DodgerBlue">2. 暫存、提交、推送</font>
<font color="gold">目標 : 練習「編輯檔案 → 追蹤檔案 → 提交新版本 → 推送到GitHub」的流程</font>

* 觀察工作目錄目前的狀態
1. 使用 Visual Studio Code 開啟 GitHub 下載的資料夾。
2. 點選上方功能表列 → 終端機 → 新增終端機。
3. 從終端機面板右上角的下拉按鈕，選擇 Command Prompt。
4. 在終端機輸入 ==git status== 指令，觀察訊息。

* 新增檔案
1. 新增 pokemon.html，輸入內容並存檔 ( 檔名旁的 U ，代表未追蹤 untracked )。
2. 在終端機輸入 ==git status== 指令，觀察訊息。

* 將檔案放到暫存區列管|追蹤
1. 輸入 ==git add== pokemon.html。
2. 輸入 ==git status== 指令，觀察訊息。

* 提交檔案
1. 輸入 ==git commit -m "新增皮卡丘"==。
2. 輸入 git log，查看版本紀錄。
-> ==git log==：雜湊值ID，位置，作者，上傳日期，提交訊息。
-> ==git log --oneline==：雜湊，位置，提交訊息。

* 推送到 GitHub 數據庫
1. 請至 GitHub 頁面確認已登入帳號。
2. 輸入 ==git remote -v==，查詢==origin==指向的 GitHub 數據庫位址。
:::success
:book:　fetch 為獲取資料的遠端儲存庫 URL；push 則為推送資料的。
:::
3. 輸入 ==git push 數據庫位址 分支名稱==，若出現 "Connect to GitHub" 視窗，點選 "Sign in with your browser"
:::success
:book:　若`git remote -v` 確認 origin 正確，可省略為`git push origin 分支名稱`。
`git push` 則是會識別當前所在本地分支，推送到對應的對應的遠端儲存庫和分支。
:::
:::success
:book:　只要連接一次，就可以到控制台看Windows認證會多一個github，之後就不必再連接。
:::
4. 輸入 ==git log --oneline==，觀察訊息
60. 在 GitHub 頁面查看數據庫變化。

<br><br><br><br>
## <font color="DodgerBlue">3. 新增元素v1</font>
<font color="gold">目標 : 編輯檔案，推送新版本(第二版)</font>
1. 編輯檔案。
2. 將所有異動的檔案放到暫存區列管，==git add .==。
3. 在本機比較檔案
* 在終端機輸入 ==git diff --staged== 指令，比較暫存區和目前版本的差異。
:::success
:book:　出現(end)代表顯示結束，按Q可以返回輸入模式。
:::
:::success
:book:　==git diff --cached==和git diff -staged是完全一樣的功能。
:::
* 在 Visual Studio Code 左側的 "Activity Bar" 點選 "原始檔控制"，找到放入暫存區的檔案，點選檔案比較內容差異。
4. 提交檔案，再推送到 GitHub 數據庫。

<br><br><br><br>
## <font color="DodgerBlue">4. 回到以前版本</font>
<font color="gold">目標 : 回到第一版的內容 (捨棄第二版修改的內容)</font>
* 查看版本紀錄
1. 接續 "3. 新增元素v1" 的結果。
2. 在終端機輸入 `git log --oneline`。
3. 記下目前版本的雜湊值 ： f61babd。
* 回到上一個版本。
1. ==git revert -n 目前版本的雜湊值==，觀察檔案變化。
2. 輸入 ==git status==，觀察狀態。
3. 輸入 ==git diff - -staged==，比較檔案。
4. 輸入 `git commit -m "新增左上區塊(捨棄)"`，提交檔案。
5. 輸入 `git log --oneline`，查看紀錄。
6. 輸入 `git push`，推送到 GitHub 數據庫，`git log --oneline`，查看紀錄
7. 在 GitHub 頁面查看數據庫變化
* 使用 git revert 後的變化會直接放在暫存區，所以不用 `git add` 指令。

<br><br><br><br>
## <font color="DodgerBlue">5. 開新分支</font>
<font color="gold">目標 : 建立新的分支 cat，在 cat 開發新功能並提交新的版本</font>
* 建立分支
1. ==git branch cat==，建立 cat 分支。
2. ==git branch==，查看 cat 分支是否建立成功，以及查看目前所在分支。
3. ==git checkout cat==，切換到 cat 分支。
4. 輸入 ==git branch==，查看目前所在分支。
* 編輯檔案。
* 將所有異動的檔案放到暫存區列管。
* 在本機比較檔案
1. 在終端機輸入 `git diff --staged` 指令，比較暫存區和最近一次提交版本的差異。
2. 在 Visual Studio Code 左側的 "Activity Bar" 點選 "原始檔控制"，找到放入暫存區的檔案，點選檔案比較內容差異。
* 提交檔案並查看版本紀錄
==> git commit -m "新增中間彈出視窗"。
==> git log --oneline。

<br><br><br><br>
## <font color="DodgerBlue">6. 合併分支</font>
<font color="gold">目標 : 將 cat 分支合併回 main 分支</font>
* 切換分支
1. 接續 "5. 開新分支" 的結果。
2. ==git checkout main==，切換回 main 分支。
3. 輸入 `git branch`，查看目前所在分支。
* 合併分支
1. ==git merge cat==。
2. 輸入 `git status`，查看訊息。
3. 輸入 `git log --oneline`，查看紀錄。
* 輸入 `git push`，推送到 GitHub 數據庫，輸入 ==git log --oneline==，查看紀錄。
* 在 GitHub 頁面查看數據庫變化。

<br><br><br><br>
## <font color="DodgerBlue">7. 提取檔案</font>
<font color="gold">目標 : 使用 git pull 指令提取新版本</font>
* 請在 GitHub 開啟數據庫頁面
1. 請先確認左上方的 "Switch branches/tags" 選單 已選取 main。
2. 點選右上方 "Add file" 選單，選擇 "Create new file" 按鈕 新增檔案。
3. 在上方 "Name your file..." 輸入框，輸入檔案名稱 apple.txt。
4. 在下方編輯框輸入以下內容:
"皮卡丘 => 這是在 GitHub 頁面編輯的內容，模擬在教室電腦編輯檔案"。
5. 在右上點選 "Commit changes..." 按鈕。
6. 輸入提交訊息，點選 "Commit directly to the main branch"，點選右下角 "Commit changes"。
* 在 Visual Studio Code 開啟 Lab_B 資料夾
1. 在終端機輸入 `git branch` 查看目前所在分支，若不在 main，請輸入指令 `git checkout main` 切換分支。
2. 輸入 ==git pull== 指令，提取 GitHub 上的檔案。
3. 輸入 `git log --oneline`，查看紀錄。

<br><br><br><br>
## <font color="DodgerBlue">8. 提取檔案，本地/Github皆有更改(不同檔案)</font>
<font color="gold">在 GitHub 及 本機皆有新版本的情況下使用 git pull 指令</font>
* 請在 GitHub 開啟數據庫頁面
1. 請先確認左上方的 "Switch branches/tags" 選單 已選取 main。
2. 點選 apple.txt，在編輯框右上點選 "Edit this file" (筆的圖示)。
3. 在下方編輯框輸入以下內容:
"伊布 => 這是在 GitHub 頁面編輯的內容，模擬在教室電腦編輯檔案"。
4. 在右上點選 "Commit changes..." 按鈕。
5. 輸入提交訊息，點選 "Commit directly to the main branch"，點選右下角 "Commit changes"。
* 在 Visual Studio Code 開啟 Lab_B 資料夾
1. 在終端機輸入 git branch 查看目前所在分支，若不在 main，請輸入指令 git checkout main 切換分支。
2. 新增檔案 bee.txt，輸入以下內容:
"小火龍 => 這裡是在 VS Code 編輯的內容，是在家裡電腦編輯的檔案"。
3. 將檔案放到暫存區列管。
-> `git add bee.txt`。
4. 提交檔案並查看版本紀錄。
-> `git commit -m "新增bee及小火龍(本機)"`。
-> `git log --oneline`。
5. 輸入 `git push`，推送到 GitHub 數據庫。
6. 推送失敗，請輸入 `git pull` 指令，先提取 GitHub 上的檔案。
-> 進入 vim文字編輯器，需要留下合併的提交訊息。
:::success
:book:　選擇使用預設訊息或編輯新的提交訊息
1. 輸入 :qa 會使用預設訊息
2. 輸入 i 後開始編輯，編輯完成用 esc 鍵離開編輯模式，最後輸入 ：wqa 離開
3. 可能不同電腦使用不同編輯器，這時候要用對應的指令
:::
7. 再次輸入 `git push`。
8. 在 GitHub 頁面查看數據庫變化。

<br><br><br><br>
## <font color="DodgerBlue">9. 衝突(本地/Github更改都在同份檔案)</font>
<font color="gold">目標 : 解決 git pull 之後的衝突</font>
* 請在 GitHub數據庫頁面
1. 請先確認左上方的 "Switch branches/tags" 選單 已選取 main 。
2. 點選 bee.txt，在編輯框右上點選 "Edit this file" (筆的圖示)。
3. 在下方編輯框輸入以下內容:
"伊布 => 這是在 GitHub 頁面編輯的內容，模擬在教室電腦編輯檔案"。
4. 在右上點選 "Commit changes..." 按鈕。
5. 輸入提交訊息，點選 "Commit directly to the main branch"，點選右下角 "Commit changes"。
* 在 Visual Studio Code 開啟測試資料夾
1. 在終端機輸入 `git branch` 查看目前所在分支，若不在 main，請輸入指令 `git checkout main` 切換分支。
2. 在 apple.txt 輸入以下內容:
"皮卡丘 => 這裡是在 VS Code 編輯的內容，是在家裡電腦編輯的檔案"。
3. 將檔案放到暫存區列管，以及提交檔案並查看版本紀錄。
-> `git add apple.txt`。
-> `git commit -m "編輯apple及新增胖丁(本機)"`。
-> `git log --oneline`。
4. 輸入 `git push`，推送到 GitHub 數據庫。
5. 推送失敗，請輸入 `git pull` 指令，提取 GitHub 上的檔案。
==CONFLICT (content): Merge conflict in bee.txt==。
6. 出現衝突，在編輯畫面右下角 選擇 "在合併編輯器中解析"。
:::success
:book:　衝突使用 vscode 來編輯可以迅速解決。
:::
7. 解決衝突之後，點選右下角 "完成合併"。
8. 提交合併結果。
==> ==git commit -m "解決衝突之後的apple"==。
29. 輸入 `git push`，推送到 GitHub 數據庫，在 GitHub 頁面查看數據庫變化。
<br><br><br><br>
## <font color="DodgerBlue">自己想列出來的對比</font>
### <font color="mistyrose">git status，全空</font>
1. 起始( 全空 )。
2. 有變化。
3. git add 後。
4. git commit 後。
現在這個分支 ( main ) 是基於遠端分支 origin/main 建立的，但目前遠端儲存庫中並找不到 origin/main 這個分支。
5. git push 後。

<br><br>
### <font color="mistyrose">git status，不空</font>
1. 起始( 不空 )。
2. 有變化。
3. git add 後。
4. git commit 後。
5. git push 後。

>[!IMPORTANT] 相異
>和遠程倉庫接觸前
>1. 顯示 ==No commits yet==；
>2. `git commit` 後會表示 ==the upstream is gone==。
>
>接觸後
>1. 顯示 ==Your branch is up to date with 'origin/main'==；
>表示當前本地分支和遠端儲存庫的分支（origin/main）是同步的。
>2. `git commit` 後會表示 ==Your branch is ahead of '分支' by 提交數量 commit.==
>
>兩者差異在於是否有對應的遠端分支。

<br><br>
### <font color="mistyrose">git status，分支</font>
1. 起始。
2. 有變化。
3. git add 後。
4. git commit 後。
>[!IMPORTANT] 相異
>少一行 「Your branch is up to date with 'origin/main'.」
>因為這個本地分支還沒有和遠端分支建立關聯。
>若想要關聯，輸入 「`git branch --set-upstream-to=origin/分支名`」。

<br><br>
### <font color="mistyrose">git status，使用 revert</font>
1. 起始。
2. revert 最新版本後。

<br><br>
---
### <font color="mistyrose">git log - -oneline，分支情況一</font>
1. 分支 commit 後。
2. 合併分支後。
3. push main 後。

<br><br>
### <font color="mistyrose">git log - -oneline，分支情況二</font>
1. 分支 commit 後。
2. 分支 push origin 自己分支 後。
* main 分支
* dog 分支，更改 travel.html
3. 合併分支後。
4. push main 後。

>[!IMPORTANT] 結論
>1. `git checkout` 會移動 Head 指標指向的本土分支。
>2. 在 main 分支上的合併分支，就可以把 main 版本更新該分支最新提交。
>3. origin / 分支 只會在 push 後才會影響，也就是 github 上的變化。

<br><br>
### <font color="mistyrose">git log - -oneline，本地無變化 / 遠端有變化</font>
1. git pull 前。
2. git pull 後。

<br><br>
### <font color="mistyrose">git log - -oneline，本地/ 遠端有變化在不同檔案</font>
1. 本地提交後，git pull 前。
2. git pull 後 ( 使用預設訊息 )。
3. git push 後。

<br><br>
### <font color="mistyrose">git log - -oneline，本地/ 遠端有變化在相同檔案</font>
1. 本地提交後，git pull 前。
2. git pull 後 ( 已解決衝突 )。
3. 衝突解決並提交後。
4. git push 後。

>[!IMPORTANT] 結論
>1. git pull 後，origin / main 遠端分支必在自己的遠端拉下來的版本上。
>2. git pull 後，若不用處理合併資訊，則 head 指標和 main 分支在拉下來的遠端版本。
>3. git pull 後，若要處理合併資訊，則 head 指標和 main 分支在解決訊息合併後的版本。

:::success
:book:　git pull 其實是 git fetch -> git merge ，兩個 git 指令形成的複合指令。
所以提交使用預設訊息時，會是血 Merge branch 'main' of <repository-url>。
:::
:::success
:book:　git fetch：將遠端儲存庫的更新下載到本地，但不會自動將它們合併到你當前的分支。
:::