本文推薦 PC 端閱讀
本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」
複製程式碼前言： 在《初次接觸前端，我們要理解哪些名詞？》中，我們對版本管理系統、Git、GitHub 等有了初步的認識，那接下來的 2 篇文章將系統的詮釋版本管理系統的重要性，以及怎樣輕鬆入門 Git 和 GitHub。 後續文章只要涉及程式碼、工具的學習，我們都是先動起手來，不斷的試錯，然後在找問題過程中，解釋相對應和與之相聯絡的知識點。程式碼的學習，眼百遍、耳百遍，不如自己動手一遍。
1 再次熟悉相關概念
- Git 是一個免費、開源且新時代的“分散式版本控制系統”；
- “版本控制系統”是一種記錄一個或多個檔案內容變化，以便將來查閱特定版本修訂情況的系統；
- GitHub 是一個通過 Git 進行版本控制的軟體原始碼託管服務平臺。它是世界上最大的程式碼存放網站和開源社群。
2 程式開發為什麼需要“版本控制系統”，最好還得是分散式控制系統
對於前端開發工作者來說，我們主要的任務就是用一行行程式碼去實現不同的需求：
- 現實工作場景中，需求是會隨著市場反饋等相應變化的，與之同時，我們的程式碼也需要修改變化；
- 當我修改與需求對應的 A 功能的若干處程式碼後，我發現 B 功能沒法正常的執行了——被我改掛掉的。這時我常識性的需要回查我都修改了些什麼而導致 B 功能的掛掉；
- 此時，我迫切需要的是，把改後的程式碼與之前 B 功能還能正常執行時的程式碼作一個對比。這兩個不同時間、不同空間的程式碼，就是我們所說的“版本”。而“版本控制系統”就是一種記錄一個或多個檔案內容變化，以便將來查閱特定版本修訂情況的系統。
如果我們有了這個系統，那麼上邊第 3 步中，我們就能很輕鬆、精確的找到問題所在。並且此時，你可以選擇：
- 輕點幾下就回到之前未改動的版本；
- 也可以選擇儲存在本地（因為之前的所有版本和相關改動也都已經有序的儲存在這個版本控制系統中了）；
- 還可以選擇把這個專案託管到如 GitHub 一類的開源平臺上，邀請同事一起來共同開發，各不干涉，然後再把同事們所有的改動合併成一個共同的版本。
總結： 專案開發中，使用版本控制系統好處是相當多的。版本控制也是我們前端開發工作者一項必備的技能。
3 Git 在哪裡
在《Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建》中，我們安裝和配置了 Git 。我們知道，對於 Git 的運用，初次接觸時，我們一定要熟悉命令列的操作方式，這樣我們才能明白 Git 每一步操作的具體含義，這也對我們專案工作中少犯錯誤有很大的幫助。
那 Git 在哪裡？
用你的終端，以命令列去吩咐它（本系列的兩篇文章會以具體操作詳細談到具體命令）。?Git 中文使用文件
4 Git、GitHub 初嘗試
- 任務：在 GitHub 上新建一個專案，然後克隆這個專案到本地，最後把本地最新修改的內容再推送到 GitHub 的遠端倉庫上去。
4.1.1 第一步，在 GitHub 上建立一個倉庫（repository)
?註釋：repository 是“倉庫”的意思，可以直接理解為：一個放置專案的地方。
4.1.2 第二步，設定、描述這個倉庫
- 註釋1：寫上你的專案名稱；
- 註釋2：簡單描述你的專案（這會稍後直接顯示在專案下方）；
- 註釋3：個人使用者直接選擇免費、公開的；
- 註釋4：注意看下邊的英文：“如果你勾選這個框，那麼你可以隨即克隆這個專案到你的電腦本地；如果你不勾選，則意味著你是想隨後推送一個你電腦本地已經建立好的倉庫到 GitHub 線上。”—— 請注意我們本文的任務是：從 GitHub 上克隆一個線上專案到本地。所以，請勾選這個選項。
4.1.3 第三步，克隆這個專案到本地
在第二步中，我們建立好了一個倉庫，那麼我們就開始按照本節任務進行克隆這個專案到本地。
- 註釋1：這個 README.md 檔案其實我們很常見，我們工作生活中下載的很多軟體的資料夾裡基本都會有這麼一個文件，即使我們從來沒有開啟過一個。我們可以直接稱作：說明文件。這裡的 .md 格式就是我們之前提到過的 markdown 語法寫的文件，不熟悉的請參考《Web 前置知識——初次接觸前端，我們要理解哪些名詞？》。
- 註釋2：這裡是我們上一步中新增的專案描述，它直接顯示在了這裡；
- 註釋3：預設情況下我們點選這裡的 Clone or download ，會直接讓我們用 https 的協議來操作，但是我們知道 https 是一種進行加密的網路傳輸協議，如果用 https，那麼就會出現你以後的每一次操作，都會讓你去終端輸入使用者名稱、密碼，很麻煩。這裡我們選擇 SSH 協議——它用於計算機之間的加密登入，大多數 Git 伺服器都會選擇使用 SSH 公鑰來進行授權。
- 註釋4：在重新選擇了以 SSH 協議來 Clone 專案後，新彈出來的地址就是我們需要拷貝的地址。
4.1.4 第四步，嘗試“克隆”，檢查錯誤
拷貝第三步中的地址，開啟電腦的終端，命令列輸入：
git clone (剛才拷貝的SSH url)
複製程式碼- 註釋1：這一步中電腦給我們發出了錯誤提醒；
- 註釋2：當然也給我們了一些建議：“請確保你是有這個許可權來連結這個專案，或者確保這個倉庫是否是存在的”，那我們知道，我們倉庫肯定是存在的，那意思就是我們沒有這個許可權。為什麼我們沒許可權？——反推一下：如果人人都有這個許可權，那麼任何人在得到你的 GitHub 地址後，就都可以向你的 GitHub 推送東西，那簡直是特別恐怖的事情。所以，我們需要進行授權。
4.1.5 第五步，開始授權操作
開始授權操作，終端輸入以下命令並一直回車：
ssh-keygen -t rsa -b 4096 -C "GitHub註冊的郵箱"
複製程式碼- 註釋1：這個命令過後，將會在我們本地電腦的家目錄下生成兩個鑰匙：私鑰（id_rsa）和公鑰（id_rsa.pub）；
- 註釋2：一般我們把公鑰給別人（這裡指 GitHub），私鑰留給自己，當別人（GitHub）去訪問你的時候，它會拿著公鑰去訪問你，如果你們兩個鑰匙匹配上了，彼此才有許可權進行後續的操作。
4.1.6 第六步，拷貝公鑰
我們在第五步生成了鑰匙，那接下來，我們就要把這個公鑰的完整字元開啟後拷貝到 GitHub 。終端輸入以下命令檢視公鑰檔案的內容：
cat ~/.ssh/id_rsa.pub
複製程式碼4.1.7 第七步，複製鑰匙串
開啟 GitHub，貼上上一步複製的鑰匙串字元：
- 註釋：點選 SSH and GPG keys ，在彈出的介面裡點選 New SSH key 。然後：
4.1.8 第八步，再次試著操作第四步
在第七步末尾，當你點選了 Add SSH key 後，你便完成了 GitHub 上 SSH key 的新增。那也就意味著，你建立好了許可權。接著再次試著操作第四步：
git clone (你上邊拷貝的 SSH url)
複製程式碼4.1.9 第九步，在本地進行專案編輯
終端上執行相關命令列，在本地對克隆下來的專案進行編輯，相關命令列知識學習參考《Web 前置知識——做一次山大王，讓作業系統乖得像只小綿羊：命令列入門》。
ls
cd test
ls -al
複製程式碼- 註釋1：我們在把 GitHub 上的 test 專案克隆到了家目錄下；
- 註釋2：開啟 test 資料夾，我們看到了一個 .git 檔案，這個檔案裡管理著本地倉庫程式碼的各種狀態。這也是倉庫資料夾與電腦中普通資料夾的區別。
4.1.10 第十步，將編輯好了的專案再推送到倉庫
在本地的倉庫裡新增檔案，然後再推送到 GitHub 的遠端倉庫上去：
touch a.md
git add .
git commit -am "addfile"
git status
git push origin master
複製程式碼- 註釋1：
git add .這裡的.是指把當前資料夾下的所有新增和修改全部放到暫存區； - 註釋2：
git commit -am "addfile"這裡的-am是指把所有(all)進行提交(-m)。整個命令是指：把剛剛的修改新增(名字叫"addfile")全部都提交到本地庫； - 註釋3：
git status是指檢視相關狀態的意思，如上圖所示，當我們檢視狀態時：“有一個檔案已經被提交到本地庫了，它還建議我們用 git push 來推送、釋出這被提交到本地庫的檔案。”——所以這個命令將會是我們很常用的一個命令，用來常常檢視 git 倉庫的一些狀態； - 註釋4：
git push origin master這裡是指，把相關新增改動等推送到 GitHub 遠端倉庫的主分支上。這個遠端倉庫的名字是 “origin”——名字可以隨便取，只不過系統預設的，如果只有一個遠端倉庫時，名字就叫 “origin”。我們檢視目前有哪些遠端倉庫的命令是：
git remote -v
複製程式碼4.1.11 第十一步，檢視成果
再次返回 GitHub 頁面，重新整理後，你將會看到新的修改被推送到了。至此，我們的任務也圓滿完成。
後記： 以上我們算是初次見識了 Git 和 GitHub 的威力，這兩個傢伙將一直伴隨我們前端學習和工作的左右。所以，好好學習它，對待它。程式碼的世界永遠是你付出多少，它就會回饋你多少，絕對不會辜負你。
（本文版權歸 “Oli's 前端一萬小時” 所有，未經授權，請勿轉載）