Git 是什麼？
設計師都能懂的 Git 指令 — 1
Git 指令起手式 init、add、commit
之前接專案的時候，被工程師強迫背下指令，但完全不懂每個指令單字用意何在…，10 月下旬剛好看到六角的線上問答會說明了幾個指令的意義，洧杰老師說的蠻清楚，所以我終於知道那幾個指令在做什麼了！
說實在身為設計師好像不太需要會版控能力，但我記得 Sketch 有ㄧ個外掛好像就是用 Git 版控，多學一點不吃虧哈哈。
先打個預防針，本篇適合已經會 HTML 和 CSS 的人服用。
先備知識
網路上有很多介紹，這部分文章最下方有提供一些參考資料來源，這邊主要想講的是指令部分。如果安裝 Git 或設定的部分有問題可能盡量去找工程師幫忙，因為我的環境也是工程師幫我弄好的，這部分我完全幫不上忙，基本上有設定好之後都不太會再去動了。
然後可以先順便去下載 Sourcetree，他是利用圖形化介面操作 Git 的應用程式，連工程師都表示有時候看 Sourcetree 的圖形會比較清楚看到節點的狀態；還有可以先註冊 GitHub 這一定會用得到。結果我重點的部分都沒講是不是有點糟糕 QQ。
終端機
打 Git 指令會需要終端機，平常都是使用圖形化介面的設計師看到終端機應該都會有點害怕，這裡先說我都是使用 VS Code 內的終端機操作，所以建議去下載 VS Code。但會進來看這篇的應該大部分已經會用 VS Code 寫 HTML 和 CSS 的人吧？
這裡要提到對懶人有點幫助的小功能，在 Windows 系統安裝的時候一定要記得把開啟 VS Code 加入右鍵選單中！如下連結：
Mac 的部分則要自己去設定快速動作，照著下面連結內的步驟做應該不難！（不過不知道 MacOS 多少之後，「服務」變成「快速動作」了喔。）
使用者設定
裝好 Git 第一步是使用者設定，通常設定好後就不會再去更動了。可以用連結教學的方式，應該不算困難。
2021.03.30 補充
我在昨天重新設定 GitHub 的 SSH key 時，終於搞懂流程了，可以參考下方的網頁內容去設定：
本地端
第一個指令 git init
首先會需要一個新的專案資料夾，新增一個資料夾後按右鍵把資料夾用 VS Code 開啟，你也可以直接在你原先就有的資料夾按右鍵用 VS Code 開啟。會這樣操作的好處是你不用開 VS Code 再找資料夾，直接在資料夾位置就能開啟 VS Code！順帶補充：兩個作業系統在 VS Code 裡開啟終端機的快捷鍵都是 “Ctrl + ~”。
這裡我在桌面新增了一個叫 test 的資料夾，點選 test 資料夾用右鍵開啟並打開 VS Code 終端機後， 你會發現終端機目前的位置就是資料夾的位置不用打指令切換（萬歲～打 cd 能吃嗎 XDD），在這裡要讓 Git 開始對 test 這個資料夾進行版本控制，而 Git 需要有一個 Repository （資料庫的概念？）去紀錄檔案的變化，所以開始下指令（不用打 $）：
$ git init
下完指令你會發現資料夾內多了一個 .git 的資料夾，指令的意思是初始化空的 Git Repository 到 test 資料夾內，表示 Git Repository 可以開始對 test 資料夾做版控囉！（這個指令只有在一開始要對資料夾 Git 才需要下喔！）
.git 是個隱藏資料夾，Mac 開啟隱藏資料夾快捷鍵 “ Shift + Cmd + .”，Windows 10 開啟檔案總管，選擇檢視的那個 tab，勾選裡面隱藏的項目。
補充：當你不需要版控這個資料夾的時候把 .git 這個資料夾刪除就可以了，因為這個資料夾的版控紀錄全部都在 .git 資料夾裡面。
第二個指令 git add .
上一個步驟做完，我們可以開始對 test 資料夾進行版控了，但如果資料夾內本來就有檔案，或是你未來新增的檔案，會發現在 VS Code 側邊的檔案顯示會有個 U，代表這個檔案還未被 Git Repository 追蹤，目前檔案的狀態是 Untracked files，我們要先追蹤檔案才會有之後的 Git 紀錄。
這裡補充一個指令（這個指令需要熟記，隨時都可以使用）：
$ git status可以查看目前資料夾內檔案 Git 的狀態，如下圖：
文字提示我們還檔案還沒被加進 Git Repository 追蹤，所以我們可以使用：
$ git add .
add 是加檔案進 Git Repository 追蹤的意思，後面空格加上一個 . ，意思是所有檔案，如果資料夾內有很多個檔案都要進行追蹤就是使用 add .，個別追蹤檔案的方式是：
$ git add index.html（補充一點如果你的資料夾裡有 node_modules 這個資料夾，不要把它加進 Git 中，因為這個資料夾佔據的容量蠻大的，加上內容是 library 之類的檔案，不需要被版控！）
到這裡檔案只是開始被追蹤但目前還在暫存區中，還沒有進到 Git Repository 裡喔！（有點像把東西放進購物車裡，但你還沒結帳完成訂單的概念！）
第三個指令 git commit -m’文字說明’
想要把暫存區的檔案放進 Git Repository 需要使用：
$ git commit -m'first commit'
當你下了 commit 指令後才完成把檔案交給 Git Repository 紀錄的動作，Git 會留下一個節點還會有一串編碼代表你此次的紀錄，-m 是 message 的意思，在 ‘ ’ 引號內輸入此次 commit 的說明文字，盡量簡潔清楚的說明此次變更的內容。（但其實 Git commit message 的學問也很多，等哪天真的變成工程師再去研究一下哈哈。）
Sourcetree
我們完成上面三個指令後，對設計師而言一定很難想像指令到底做什麼了，所以現在先開啟 Sourcetree，然後把剛剛做完 Git 指令的 test 資料夾直接拖拉進 Sourcetree，在 Sourcetree 裡點選剛剛拉進去的 test，進去後會看到下面的畫面：
你會看到我們剛剛 commit 的「first commit」出現在界面中，前面一直提到的節點，就是 Graph 下的圓點，每一次的 commit 都會有一個節點，之後你修改檔案並下指令 git add . 和 git commit -m‘文字說明’ 就會看到一條線長出來上面的節點也跟著變多喔！
總結
來回顧一下剛剛介紹的內容，我們剛剛的 test 資料夾其實就是「工作目錄」，而因為我們是在自己的電腦操作沒有連到網路，所以本機端的 Git Repository 就叫做「本機儲存庫」，因為之後會用到「遠端儲存庫」所以這裡要先記起來。
在工作目錄下 git add，把檔案放入暫存區後，再下 git commit 後檔案才會加到本機儲存庫，如下圖所畫：（完成這兩個指令就能獲得一個節點！）
不知道以設計師的角度這樣解釋 Git 有沒有比較好理解，希望對大家有點幫助，後來六角老師直播完有將內容整理成文件，有興趣的我有放連結在下方。感謝同事借我「Git 團隊使用手冊」，裡面也有很多東西可以學習。
下一篇想講一下 master、origin、head 是什麼！（如果有時間生出來的話～
