# 任務七、使用費曼學習法來學習 Git 怎麼使用
###### tags: `Codeshiba`
用10個挑戰認識Git
- [x] 安裝Git
- [x] 建立第一個Git Respository
- [x] 熟悉Git基本指令，將Git加入開發流程
- [x] 認識Github並註冊Github帳號
- [x] 產生ssh key並上傳到Github讓Github認識你的電腦
- [x] 將Repository推送到Github上
- [x] 分支(Branch)基本操作，多個分支如何Merge與處理衝突(Conflict)
- [x] 使用Github Pages功能公開作品集
- [x] 甚麼是PR(Pull Request)? 發送第一個PR吧~
- [x] 認識很棒的Git資源

## 參考資訊
[Git Tutorial_By Luka Huang](https://github.com/codingluka/Git-Tutorial)

## Git V.S. GitHub
Git: 是一個版本控制系統(Version Control System)
Save&Load 先存下來，如果寫法沒有達到目的，可以再讀取進行修改
GitHub: 支援程式碼存取和遠端託管儲存庫的平台服務
Repository: 就是儲存庫的意思

### Git還是分散式的版本控制系統
多人協作的時候，每個人電腦裡都會有一套Git，Local端再進行的時候可以多次存檔，後續確認以後再上傳到Github進行協作，如有問題可以再針對版本進行調整

## Git相關語法說明
### 第一個Commit(存檔)

為了方便說明，咱先創個檔案試試看
創立一個資料夾hello_git來使用

mkdir hello_git

前往hello_git

cd hello_git 

指令初始化這個目錄，主要目的是要讓 Git 開始對這個目錄進行版本控制

git init

查看git的狀態

git status

把資料夾內的檔案加入staging area，並再次用git status查看狀態

git add 檔案名稱

接著，進行存檔，仍然使用git status來查看狀態
-m屬於messenger的意思

git commit -m "add new file hello.txt"

![](https://i.imgur.com/BfBW4xL.png)

#### git status 的三種狀態

**紅色** 為working directory的階段

**綠色** 為staging area的階段
透過git add把資料夾檔案加入staging area時會顯示

**working tree is clean** 代表東西已經加進去囉
透過git commit -m "檔案名稱" 來存檔後的結果

### 安裝Source Tree

https://www.sourcetreeapp.com/

### Modified 階段
在VS Code裡面撰寫程式碼後，如果沒有儲存
透過Gi透過git status可以得到modified的資訊

透過git add的指令，成功修改檔案

小訣竅，透過code .可以直接啟動vscode

code .

新增一個檔案後，顏色不一樣

使用git status會了解，有個檔案還未加入staging area的階段

使用commit -m "檔案名稱"的方式來存檔，並且用git status來確認

最後再來處理hi.txt

## Git挑戰456

挑戰 4 認識Github並註冊Github帳號
挑戰 5 產生ssh key並上傳到Github讓Github認識你的電腦
挑戰 6 將Repository(專案) 推送到Github上

### 認識Github並註冊Github帳號
用Github新增一個Repository


#### Git和Github的差別
Remote Stage是Github
Local Stage是用Git作業

### 產生SSH KEY讓Github認識電腦
介紹SSH
SSH分 `公鑰` 跟 `私鑰`

私鑰存在本機電腦中
公鑰則丟上去服務
當我們要存取服務時，服務會核對公鑰跟我們的私鑰有沒有一致。


Windows則透過Putty來產生SSH
https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

使用 putty 產生 ssh key pair

[參考資料](https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/create-with-putty/)

記得啟動putty時需要設定ip

產生 ssh key 的時候記得要在空白處移動滑鼠。

進入 ~/.ssh 資料夾 公鑰(public key) 另存新檔為 id_rsa.pub 私鑰(private key) 另存新檔為 id_rsa

進入Github輸入公鑰

創建好專案後，可以選擇SSH

錯誤訊息處理

**強烈建議不要用Putty,容易出現Bug!!**

https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent#adding-your-ssh-key-to-the-ssh-agent

### 挑戰7 分支 (Branch) 基本操作。多個分支如何合併 (Merge) 與處理衝突 (Conflict)

存檔前先切換branch

git branch 名稱

秀出現有的branch，新建的為dev

git branch

切換到新的branch dev(後方會出現一個括號(dev))

git branch dev


存檔!!

git add 
git commit -m "hey dev branch"
git status

![Uploading file..._8vo92efpi]()

可以把功能存在不同的分支，就不會讓檔案互相汙染

可以使用git merge來合併分支

git merge

會直接進入vim的編輯模式

git commit

#Vim指令介紹

:q `離開`
:wq `儲存離開`
:q! `不儲存離開`

### 挑戰 8 - 使用Github Pages功能公開作品集

github的gh-pages分支(需要創建)可以用來展示靜態網頁

建立新的branch

git branch gh-pages

推上github

git push origin gh-pages

需要注意的是首頁要命名為index.html

到[github name].github.io/[repository name]網址查看，你的網頁已經展示在這個網址。
以我們的範例


### 挑戰 9 - 甚麼是PR(Pull Request)? 發送第一個PR吧~

如何複製專案

git clone [e-mail]:你的帳號/Git-Tutorial.git

可以看到所有commit的狀態

git log

# 挑戰 10 - 帶你認識很棒的 Git 資源，讓你遇到Git 狀況迎刃而解。

- [5xruby 為你自己學 Git ](https://gitbook.tw/)
- [ihower 的 Git 教室](https://ihower.tw/git/index.html)
- [保哥 30 天精通 Git 版本控管](https://github.com/doggy8088/Learn-Git-in-30-days?fbclid=IwAR2tU7V7kmvVJJgZVJpyHu8ACiJPk7vifaQCKULHKCUrp7OUJwT8HeQy_j4)
- [連猴子都能懂得 Git 入門指南](https://backlog.com/git-tutorial/tw/intro/intro1_1.html)


# 加碼練習(Git指令篇)

步驟一: 開設一個資料夾，然後拉進cmder，就會自動跑出網址

步驟二: 輸入`git init`來初始化資料庫(此時就會出現master的字樣)


步驟三: 用`touch`來新增一個html的檔案

目前的檔案`工作目錄`

步驟四: 透過`git add .`就可以把檔案加到`索引`內

步驟五: 透過`git commit -m "文字內容"`來把檔案放入本地數據庫

步驟六: 此時我們可能透過`code .`來新增一些資料
我們把html檔增加一些內容，並且放入一個css檔案

步驟七: 此時透過`git status`來檢查現況

步驟八: 輸入`git add .`來放入索引

步驟九: 透過`git commit -m "文字"` 來把檔案放入本地數據庫

步驟十: 此時再針對程式碼做修改，插入h1(標題)，以及字體顏色

步驟十一: 輸入`git add .` 以及 `git commit -m "文字"`

步驟十二: 下載`Git Graph`的套件可以觀察到commit的紀錄

步驟十三: 打開Github，開啟一個新的Repository(為遠端數據庫)

步驟十四: 由於已經有了一個本地數據庫，所以採用第二種作法上傳
依序輸入上述語法

origin為遠端數據庫的名稱
main為遠端數據庫下的分支名稱

步驟十四: 確認是否資料都到github上面了~
嗯，整串都進來了

步驟十五: 此時，如果我再新增一個page.html的檔案，github不會同步更新

步驟十六: 用`git push`加上origin(遠端數據庫的名稱)以及main(分支)來上傳數據到遠端數據庫

## 加碼練習(開個新的Repo協作)

步驟0: 解讀語法
git remote add origin

1. git remote add: 新增一個遠端數據庫
2. origin: 遠端數據庫的名稱

步驟1: 創建一個新的repo，並且複製一個新的repo網址

步驟2: 此時希望能夠新增一個遠端資料庫，但發現遠端資料庫的名稱已經存在了

步驟3: 透過更改遠端資料庫名稱來成功新增資料庫
(可以透過git remote remove "遠端資料庫名稱"來移除)

步驟4: 使用git push時也需要調整名稱

## 加碼練習(如何clone)
情境: 如果要延續他人的專案來進行實作，該如何進行?
首先進入該專案頁面，點入"code"，複製該專案的網址

先用cd進入目的資料夾，輸入專案網址

git clone "專案網址"


此時會發現，程序跑完後，桌面就出現該專案資料夾
乾~ 剛剛這邊真的沒東西啦，他就會冒出來了