《Oli-Zhao的前端一萬小時》之：離不開的Git和GitHub（1）——版本控制、Git、GitHub初認識

02-19

本知識學慣用時：3小時，總第7/10000小時

前言：在《Oli-Zhao的前端一萬小時》之：初次接觸前端，我們要理解哪些名詞？中，我們對版本管理系統、Git、GitHub等有了初步的認識，那接下來的2篇文章將系統的詮釋版本管理系統的重要性，以及怎樣輕鬆入門Git和GitHub。

後續文章只要涉及代碼、工具的學習，我們都是先動起手來，不斷的試錯，然後在找問題過程中，解釋相對應和與之相聯繫的知識點。代碼的學習，眼百遍、耳百遍，不如自己動手一遍。

一、再次熟悉相關概念

Git是一個免費、開源且新時代的」分散式版本控制系統「；
「版本控制系統」是一種記錄一個或多個文件內容變化，以便將來查閱特定版本修訂情況的系統；
GitHub是一個通過Git進行版本控制的軟體源代碼託管服務平台；它是世界上最大的代碼存放網站和開源社區。

二、程序開發為什麼需要「版本控制系統」，最好還得是分散式控制系統？

對於前端開發工作者來說，我們主要的任務就是用一行行代碼去實現不同的需求：

1. 現實工作場景中，需求是會隨著市場反饋等相應變化的，與之同時，我們的代碼也需要修改變化；
2. 當我修改與需求對應的A功能的若干處代碼後，我發現B功能沒法正常的運行了——被我改掛掉的。這時我常識性的需要回查我都修改了些什麼而導致B功能的掛掉；
3. 此時，我迫切需要的是，把改後的代碼與之前B功能還能正常運行時的代碼作一個對比。

這兩個不同時間、不同空間的代碼，就是我們說的「版本」。而「版本控制系統」就是一種記錄一個或多個文件內容變化，以便將來查閱特定版本修訂情況的系統。

如果我們有了這個系統，那麼上邊的第3步中，我們就能很輕鬆、精確的找到問題所在。並且此時，你可以選擇：

1. 輕點幾下就回到之前未改動的版本；
2. 也可以選擇存儲在本地（因為之前的所有版本和相關改動也都已經有序的存儲在這個版本控制系統中了）；
3. 還可以選擇把這個項目託管到如GitHub一類的開源平台上，邀請同事一起來共同開發，各不干涉，然後再把同事們所有的改動合併成一個共同的版本。

總結：項目開發中，使用版本控制系統好處是相當多的。版本控制也是我們前端開發工作者一項必備的技能。

三、Git在哪裡？

在《Oli-Zhao的前端一萬小時》之：工欲善其事，必先利其器——軟體安裝、環境搭建中，我們安裝和配置了Git，我們知道，對於Git的運用，初次接觸我們一定要熟悉命令行的操作方式，這樣我們才能明白Git每一步操作的具體含義，這也對我們項目工作中少犯錯誤有很大的幫助。

那Git在哪裡？

用你的終端，以命令行去吩咐她（本系列的2篇文章會以具體操作詳細談到具體命令）。

四、Git、GitHub初嘗試

任務：在GitHub上新建一個項目，然後克隆這個項目到本地，最後把本地最新修改的內容再推送到GitHub的遠程倉庫上去。

第一步：在GitHub上創建一個倉庫（repository)

注釋：repository是倉庫的意思，可以直接理解為：一個放置項目的地方。

第二步：設置、描述這個倉庫

-- 注釋1:寫上你的項目名稱；

-- 注釋2:簡單描述你的項目（這會稍後直接顯示在項目下方）；
--注釋3:個人用戶直接選擇免費、公開的；
--注釋4:注意看下邊的英文：「如果你勾選這個框，那麼你可以隨即克隆這個項目到你的電腦本地；如果你不勾選，則意味著你是想隨後推送一個你電腦本地已經建立好的倉庫到GitHub線上。"—— ——請注意我們本文的任務是：從GitHub上克隆一個線上項目到本地。所以，請勾選這個選項。

第三步：在第二步中，我們建立好了一個倉庫，那麼我們就開始按照本節任務進行克隆這個項目到本地。

-- 注釋1:這個README.md文件其實我們很常見，我們工作生活中下載的N多軟體的文件夾基本都會有這麼一個文檔，即使我們從來沒有打開過一個，我們可以直接稱作：說明文檔。這裡的.md格式就是我們之前提到過的markdown語法寫的文檔，不熟悉的請參考《Oli-Zhao的前端一萬小時》之：初次接觸前端，我們要理解哪些名詞？
-- 注釋2:這裡就是我們上一步中添加的項目描述，它直接顯示在了這裡；
-- 注釋3:默認情況下我們點擊這裡的 Clone or download ,會直接讓我們用 http的協議來操作，但是我們知道https 是一種進行加密的網路傳輸協議（詳細請再閱讀《Oli-Zhao的前端一萬小時》之：老生常談的從URL輸入到頁面展現背後發生的事），如果用https，那麼就會出現你以後的每一次操作，都會讓你去終端輸入用戶名、密碼，很麻煩。這裡我們選擇 SSH協議——它用於計算機之間的加密登錄，大多數Git伺服器都會選擇使用SSH公鑰來進行授權。
-- 注釋4:在重新選擇了以SSH協議來Clone項目後，新彈出來的地址就是我們需要拷貝的地址。

第四步：拷貝第三步中的地址，打開電腦的終端，命令行輸入：

git clone (剛才拷貝的SSH url)

-- 注釋1:這一步中電腦給我們發出了錯誤提醒；
--注釋2:當然也給我們了一些建議：「請確保你是有這個許可權來鏈接這個項目，或者確保這個倉庫是否是存在的」，那我們知道，我們倉庫肯定是存在的，那意思就是我們沒有這個許可權。
為什麼我們沒許可權？——反推一下：如果人人都有這個許可權，那麼任何人在得到你的GitHub地址後，就都可以向你的GitHub推送東西，那簡直是特別恐怖的事情。所以，我們需要授權。

第五步：開始授權操作，終端輸入以下命令並一直回車：

ssh-keygen -t rsa -b 4096 -C "GitHub註冊的郵箱"

-- 注釋1:這個命令過後，將會在我們本地電腦的家目錄下生成兩個鑰匙：私鑰(id_rsa)和公鑰(id_rsa.pub);
-- 注釋2:一般我們把公鑰給別人（這裡指GitHub），私鑰留給自己，當別人（GitHub）去訪問你的時候，它會拿著公鑰去訪問你，如果你們兩個鑰匙匹配上了，彼此才有許可權進行後續的操作。

第六步：我們在第五步生成了鑰匙，那接下來，我們就要把這個公鑰的完整字元打開後拷貝到GitHub。終端輸入以下命令查看公鑰文件的內容：

cat ~/.ssh/id_rsa.pub

--注釋：完整複製這一連串的字元。

第七步：打開GitHub，粘貼上一步複製的鑰匙串字元：

--注釋：點擊SSH and GPG keys，在彈出的界面里點擊New SSH key。然後：

第八步：在第七步末尾，當你點擊了Add SSH key 後，你便完成了GitHub上SSH key的添加。那也就意味著，你建立好了許可權。接著再次試著操作第四步：

git clone (你上邊拷貝的SSH url)

-- 注釋：看到這個，則證明我們在GitHub上建立那個名叫test的倉庫已成功克隆到電腦本地。接下來，我們就可以在本地進行編輯，之後再推送到線上。

第九步：終端上執行相關命令行，在本地對克隆下來的項目進行編輯，相關命令行知識學習參考《Oli-Zhao的前端一萬小時》之：做一次山大王，讓你的操作系統乖得像個小綿羊——命令行入門。

ls cd testls -al

--注釋1:我們在把GitHub上的test項目克隆到了家目錄下；
--注釋2:打開test文件夾，我們看到了一個.git文件，這個文件里管理著本地倉庫代碼的各種狀態。這也是倉庫文件夾與電腦中普通文件夾的區別。

第十步：在本地的倉庫里新增文件，然後再推送到GitHub的遠程倉庫上去：

touch a.mdgit add .git commit -am "addfile"git statusgit 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

第十一步：再次返回GitHub頁面，刷新後，你將會看到新的修改被推送到了。至此，我們的任務也圓滿完成。

後記：以上我們算是初次見識了Git和GitHub的威力，這兩個傢伙將一直伴隨我們前端學習和工作的左右。所以，好好學習她，對待她。代碼的世界永遠是你付出多少，她就會回饋你多少，絕對不會辜負你。so,學無止境，她值得你我用後邊的10000小時來對待。

歡迎繼續關注下文：

《Oli-Zhao的前端一萬小時》之：離不開的Git和GitHub（2）——Git、GitHub進階（提交代碼+團隊合作）

（本文版權歸Oliver所有，轉載需說明來源）