# Re:從零開始的Git WorkShop
###### tags: `系計中` , `Git` , `簡報`, `教學`
<style>
.reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
font-family:Arial, Microsoft JhengHei;}
</style>
---
<!-- .slide: data-transition="zoom" -->
## 前言
現在 Git 儼然已成為必備技能,你真的懂 Git 嗎?
Git 的發明原本是用來管理 Linux Kernel 的,這樣子的分散式版本控管程式是如何滿足存在於世界各地廣大的 Linux 開發者的,它的優勢在哪,為何逐漸熱門起來了呢?
---
<!-- .slide: data-transition="zoom" -->
## Git 是一種易學難精的工具
---
<!-- .slide: data-transition="zoom" -->
## 80/20 法則
20% 的 git 指令就足以應付平日 80% 的工作了
\- 高見龍
---
<!-- .slide: data-transition="zoom" -->
:::warning
※ 本次教學使用的圖片或內容都是從 [掌握 Git & Github 程式時光機](https://www.udemy.com/learninggit/learn/v4/overview) 教學中取出的。
:::
**※ 所以本簡報單純僅供本次 WorkShop 使用,如需轉載請自行研究相關授權問題。**
---
<!-- .slide: data-transition="zoom" -->
WorkShop 須知:
- 已經你的開發環境安裝並可以執行 git。
- 先辦好 GitHub。
- 教學會已 command line 為主 GUI Tool 只單純用來看 Brnach 用。
---
<!-- .slide: data-transition="convex" -->
## 基本 command 指令
- 移動路徑:cd 路徑
- 回上一層:cd \.\. PS:是兩個\.\. 不是一個 .
- 展開列表:ls
- 開新資料夾: mkdir 資料夾名稱
- 開新檔案: touch 檔案名稱
※ MAC 終端機沒有高亮效果,這邊可以使用 [Oh My Zsh](https://gist.github.com/kevin-smets/8568070)
---
<!-- .slide: data-transition="convex" -->
## 建立 Local Repository
起手式:
```shell
git init
```
----
<!-- .slide: data-transition="concave" -->
## Git 環境設定
```shell
git config --list
git config --global user.email "你的mail"
git config --global user.name "君の名は"
```
---
<!-- .slide: data-transition="convex" -->
## Git 操作流程
<img src="https://i.imgur.com/BybXEws.png" style="width: 80%">
\- 來源:[掌握 Git & Github 程式時光機](https://www.udemy.com/learninggit/learn/v4/overview)
---
<!-- .slide: data-transition="concave" -->
## 工作目錄、加入索引、提交版本流程介紹
---
<!-- .slide: data-transition="convex" -->
```shell
git add . // 加入所有檔案索引
git status // 檢查狀態
git commit -m '修改紀錄' //提交更新
git log // 查詢紀錄
```
1. 當檔案要加進 Local Respository 前要先使用 `git add 檔案` 新增進索引。
2. 這邊可以使用 `git status` 來觀察索引的狀態。
3. 在來使用 `git commit -m '修改紀錄'` 來加進 Local Respository 內。
4. 如果需要查看先前的 commit 可以使用 `git log` 來做紀錄的查詢。
---
<!-- .slide: data-transition="concave" -->
## gitignore - 忽略檔案
---
<!-- .slide: data-transition="convex" -->
使用 .gitignore 來忽略不想 commit 的檔案
```shell
test.html #
*.html # 忽略全部的 HTML 檔案
css/ # 忽略 css 資料夾
```
[gitignore大全](https://github.com/github/gitignore) - 這邊有官方提供的各種例子
---
<!-- .slide: data-transition="concave" -->
## 工作狀態還原技巧分享
---
<!-- .slide: data-transition="convex" -->
```shell
# 取消索引
git reset HEAD // 全部檔案取消索引
git reset HEAD 檔案名稱 // 單一檔案取消索引
# 還原檔案
git checkout 檔案名稱 // 恢復單一檔案到最新的 commit
git reset --hard
```
---
<!-- .slide: data-transition="convex" -->
# GitHub 介紹
---
<!-- .slide: data-transition="zoom" -->
# Git !== GitHub
---
<!-- .slide: data-transition="concave" -->
## 世界上最大的工程師交友平台
![GitHub](https://www.socialtalent.co/wp-content/uploads/2015/03/github-logo.jpg)
---
<!-- .slide: data-transition="convex" -->
Github 就是遠端的 Respository
Github 免費的帳號只能開 public 的 Respository,如果需要 private 的 Respository,則需要收錢,這邊介紹了一個免費可以開私人數據庫的網站 [Bitbucket](https://bitbucket.org/),但依然有其限制,
---
<!-- .slide: data-transition="concave" -->
## git push - 推送數據庫到 Github
---
<!-- .slide: data-transition="convex" -->
1. 在 Github 上 New respository 後使用 `git clone URL` 將遠端 Respository 複製到本地端
2. 新增檔案後一樣使用 `git add` 和 `git commit` 將此版本加入本地的 Respository
3. 接下來要將本地端的 Respository 更新到遠端的 Respository,這邊使用 `git push` 這指令,這樣 github 上的 Respository 就會出現你剛剛新增檔案的那個版本了
---
<!-- .slide: data-transition="concave" -->
## 從 Github 找出實用插件流程
---
<!-- .slide: data-transition="convex" -->
使用 github 來找函示庫跟插件的好處在於,可以清楚知道他是否還有在維護,也可以從星星數來看該專案的熱門程度
---
<!-- .slide: data-transition="concave" -->
## Github Pages - 存放網頁空間流程
---
<!-- .slide: data-transition="convex" -->
GitHub 可以直接顯示靜態網頁,在 Settings > GitHub Pages 選擇 Source 為網頁所在的分支,這樣就 OK 了 :smiley:
範例:[我的個人頁面](http://vagrantpi.github.io/)
---
<!-- .slide: data-transition="concave" -->
# Git 分支 (branch) 簡介
---
<!-- .slide: data-transition="convex" -->
<img src="http://nvie.com/img/git-model@2x.png" style="width: 40%">
\- [範例分支圖網址](http://nvie.com/posts/a-successful-git-branching-model/)
---
<!-- .slide: data-transition="concave" -->
![黑人頭問號](http://i.imgur.com/u4N3wpJ.jpg)
## WTF?
---
<!-- .slide: data-transition="convex" -->
先給先觀念:
- branch 很便宜。
- 在多人開發環境下通常不會直接使用 master 分支。
- 在多人開發時,溝通很重要。
- 多人協作專案進行時,很多時候遇到的問題都不是工程問題。
- 溝通的成本很高!!
衍生提醒:
1.變數命名的重要性 2.Coding Style 的重要性 ...
---
<!-- .slide: data-transition="concave" -->
## HEAD - 瞭解目前所在位置
---
<!-- .slide: data-transition="convex" -->
```shell
HEAD:目前所在位置的指標
git branch // 瀏覽目前分支
git checkout // commit前4碼
// ex: 要查看的 commit 紀錄 id 為 ca6c374ac6d4b4afd19ec885a07b3f75a44b0ec6
// 只要下 git checkout ca6c 就好
git checkout master // 切換回 master
```
---
<!-- .slide: data-transition="concave" -->
## git branch - 分支創立
---
<!-- .slide: data-transition="convex" -->
```shell
git branch 分支名 // 建新的分支
git checkout 分支名 // 切換到該分支
git checkout -b 分支名 // 建立新的分支後直接切換到該分支
```
---
<!-- .slide: data-transition="concave" -->
## git merge - fast-forward
---
<!-- .slide: data-transition="convex" -->
```shell
git merge 別的bramch // 將別的 branch 合併到當前分支
```
<br>
講一個環境比較單純的,在 master 未做任何 commit 時將 branch 合併回來,使用一些 git GUI 來看會是一條線。
---
<!-- .slide: data-transition="concave" -->
## Mac or Linux 自動合併細節提醒
---
<!-- .slide: data-transition="convex" -->
> 如果你是 Mac 或 Linux 開發者,在下一篇會需要使用到編輯器來寫 merge 的更新訊息,
>
> 在未指定編輯器的情況下,會出現 vim 的編輯器 此時已會預設帶好 commit 的內容,只要依序輸入以下文字:
>
> :wq!
>
> 就可離開
---
<!-- .slide: data-transition="concave" -->
## git merge - 自動合併篇
---
<!-- .slide: data-transition="convex" -->
當分支切出去後 master 有 commit,這時如果要 merge 分支時,在沒衝突的情況下會自動合併,使用 command line 執行的情況下,會跳出 merge 時的 commit 資訊,此時如上面提到的使用 `:wq` 離開後就 OK 了,如果需要更改 commit 資訊也可以直接在這邊修改。
---
<!-- .slide: data-transition="concave" -->
## git merge - 解決衝突篇
---
<!-- .slide: data-transition="convex" -->
在合併時如果修改到一樣的行數,就會跳出 `conflicts` ,這時點開衝突的檔案會看到
```shell
<<<<<<< HEAD
衝突程式(目前所在分支)
=======
衝突程式(分支上的)
>>>>>>> YourBranch
```
修改完後儲存,新增索引後在 commit 就完成合併了(最好 commit 時註明這是 merge)
---
<!-- .slide: data-transition="concave" -->
## git tag - 標籤
---
<!-- .slide: data-transition="convex" -->
標籤的功能可以讓你在眾多的 commit 當中知道重要的 commit,也能夠直接 checkout 過去。
```shell
git tag // 查詢標籤(只看到有哪些標籤)
git tag -n // 查詢詳細標籤(還能看到標籤備註)
git tag -d 標籤名稱 // 刪除標籤
git tag 標籤名稱 // 新增輕量標籤
git tag -am "備註內容" 標籤名稱 // 新增標示標籤
git checkout 標籤名稱 // 切換到標籤的 commit
```
---
<!-- .slide: data-transition="concave" -->
## git stash - 暫存檔案
---
<!-- .slide: data-transition="convex" -->
開發過程中如果突然需要先做其他事情,但還沒 commit 不能切換分支,所以可以先把暫存暫存下來,等到其他事情做完後,切回來此分支後就可以再拿出來繼續做。
```shell
git stash // 暫時儲存當前目錄
git stash list // 瀏覽 git stash 列表
git stash pop // 還原暫存
git shash drop // 清除最新暫存
git stash clear // 清除全部暫存
```
---
<!-- .slide: data-transition="concave" -->
# Git、Github 團隊協作篇
## git remote - 遠端數據庫
---
<!-- .slide: data-transition="convex" -->
遠端數據庫預設名稱是 origin,可以使用 `git remote` 來查看,所以當你直接使用 `git push` 時他會不知道你要推到哪一個,所以平常在 push 時我都會使用,`git push origin master`。
前面教學之所以使用 `git push` 能夠成功,是因為預設會追蹤 master,所以 `git push` 時他會使用預設的 master,但當你在分支時就無法直接這樣推。
```shell
# 如何推送分支到遠端數據庫
git remote // 查詢遠端數據庫
git remote rename 原名稱 修改名稱 // 修改遠端數據庫名稱
git push origin master
[預設遠端主機名稱] [分支名稱]
```
---
<!-- .slide: data-transition="concave" -->
## git pull - 下載遠端數據庫
---
<!-- .slide: data-transition="convex" -->
- 要將遠端數據庫的資料更新到目錄時,使用 `git pull`。
- 要將遠端數據庫的資料更新到當前數據庫時,使用 `git fetch`。
※ 兩者的差異會在後續最進一步說明
---
<!-- .slide: data-transition="concave" -->
## git pull - 衝突篇
---
<!-- .slide: data-transition="zoom" -->
## DEEMO
---
<!-- .slide: data-transition="concave" -->
## 小型團隊分支協作篇
---
<!-- .slide: data-transition="convex" -->
<img src="https://i.imgur.com/98WpjjK.png" style="width:80%">
---
<!-- .slide: data-transition="convex" -->
實作上會在 feature 做完你負責的部分後再 merge 回 develop 後,當這部分進度都完成後,才會將 develop merge 回 master。
<br>
**※ 溝通很重要!!**
---
<!-- .slide: data-transition="concave" -->
## git pull = git fetch + git merge
---
<!-- .slide: data-transition="convex" -->
當練習完 pull 時,可以知道他就是將遠端的分支將你的本地分支進行合併 merge 的動作,但有時候你不希望 pull 下來導致自己的數據庫太亂又擔心有衝突時,可以先使用下面這個指令。
```shell
git fetch origin(遠端數據庫) branch1(遠端分支)
```
此時你的分支會多一個 FETCH_HEAD 的分支,這個就是遠端數據庫的分支,可以等到你看過沒問題後,再合併 FETCH_HEAD 也 ok。
---
<!-- .slide: data-transition="concave" -->
# GitHub - 參與一個專案
---
<!-- .slide: data-transition="convex" -->
如果你想要參與一個你沒有推送權限的專案,你可以「fork」一份。這代表說 GitHub 會複製一份這個專案的副本給你,並且你對這副本有全部的權限。這副本會存在於你的帳號下,你可以對它進行推送。
(來源:[GitHub - 參與一個專案](https://git-scm.com/book/zh-tw/v2/GitHub-%E5%8F%83%E8%88%87%E4%B8%80%E5%80%8B%E5%B0%88%E6%A1%88))
---
<!-- .slide: data-transition="concave" -->
一般情況下就是照著下面的程序運作的:
1. 從 master 建立一個主題分支。
2. 加入一些變更來改善這個專案。
3. 把這個分支推送到你的 GitHub 專案。
4. 在 GitHub 上建立一個 `Pull Request`。
5. 討論,並在需要的時候加入新的變更。
6. 專案擁有者視情況決定要把這個 Pull Request 合併進原始專案,或是關閉它。
---
<!-- .slide: data-transition="convex" -->
你可能會遇到的問題:
我 Fork 後,如果那個專案更新了,那我該如何更新我自己的專案。
---
<!-- .slide: data-transition="concave" -->
A:設定 upstream
```shell
git remote add upstream https://github.com/otheruser/repo.git
```
---
<!-- .slide: data-transition="convex" -->
再看一次 remote
```shell
git remote -v
origin https://github.com/user/repo.git (fetch)
origin https://github.com/user/repo.git (push)
upstream https://github.com/otheruser/repo.git (fetch)
upstream https://github.com/otheruser/repo.git (push)
```
---
<!-- .slide: data-transition="concave" -->
更新 upstream
```shell
git fetch upstream
git fetch upstream feature/test // 更新特定分支
```
---
<!-- .slide: data-transition="convex" -->
當你改完 code 後,就可以 push 回 "你的" 遠端數據庫。
這時點選在 GitHub 上的 `Pull Request` 按鈕(記得推回去的分支要選好)。
最後等作者 review 後覺得 OK 了,就可以把你的 PR Merge 回那個專案了。
---
<!-- .slide: data-transition="zoom" -->
## 延伸教學資源
- [連猴子都能懂得 Git 入門指南](https://backlogtool.com/git-guide/tw/)
- [保哥 30 天 Git 教學](https://github.com/doggy8088/Learn-Git-in-30-days/blob/master/zh-tw/README.md)
- [Git 官方繁體教學](https://git-scm.com/book/zh-tw/v1)
---
<!-- .slide: data-transition="zoom" -->
# GitHub 相關補充
- GitHub 上的 issues 通常用來回報一些問題,當開完 fix 分支修完 BUG 後,在 commit 實在訊息打上 issues 代號(ex: #1234),這 commit 就會記錄在該 issue 裡。
- 當想參與專案時,流程通常都是先 Fork 回自己的 GitHub,當時作完成後 push 回自己的 GitHub Respository,再發PR(Pull Requests)回原始專案。
---
<!-- .slide: data-transition="zoom" -->
# Git 指令相關補充
本次 WorkShop 教了些基礎的 Git 指令,但 Git 還有更多的功能可以使用,這便舉個小例子
```shell
git cherry-pick commit編號
```
---
<!-- .slide: data-transition="zoom" -->
# Q & A
---
<!-- .slide: data-transition="zoom" -->
# 感謝您的參與! :smile:
{"metaMigratedAt":"2023-06-14T12:41:14.044Z","metaMigratedFrom":"Content","title":"Re:從零開始的Git WorkShop","breaks":true,"contributors":"[{\"id\":\"69ade472-3ed3-499d-8a69-767243a31621\",\"add\":140,\"del\":140}]"}