web_06 | Web 前置知識——Git 和 GitHub：① Git、GitHub初認識

時間 2019-11-06

標籤 web 前置知識 git github 認識欄目 HTML 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

本知識點常見於「招聘要求」中——熟練使用 git。
複製代碼

前言： 在《初次接觸前端，咱們要理解哪些名詞？》中，咱們對版本管理系統、Git、GitHub 等有了初步的認識，那接下來的 2 篇文章將系統的詮釋版本管理系統的重要性，以及怎樣輕鬆入門 Git 和 GitHub。
後續文章只要涉及代碼、工具的學習，咱們都是先動起手來，不斷的試錯，而後在找問題過程當中，解釋相對應和與之相聯繫的知識點。代碼的學習，眼百遍、耳百遍，不如本身動手一遍。前端

1 再次熟悉相關概念

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

2 程序開發爲何須要「版本控制系統」，最好還得是分佈式控制系統

對於前端開發工做者來講，咱們主要的任務就是用一行行代碼去實現不一樣的需求：git

現實工做場景中，需求是會隨着市場反饋等相應變化的，與之同時，咱們的代碼也須要修改變化；
當我修改與需求對應的 A 功能的若干處代碼後，我發現 B 功能無法正常的運行了——被我改掛掉的。這時我常識性的須要回查我都修改了些什麼而致使 B 功能的掛掉；
此時，我迫切須要的是，把改後的代碼與以前 B 功能還能正常運行時的代碼做一個對比。這兩個不一樣時間、不一樣空間的代碼，就是咱們所說的「版本」。而「版本控制系統」就是一種記錄一個或多個文件內容變化，以便未來查閱特定版本修訂狀況的系統。

若是咱們有了這個系統，那麼上邊第3步中，咱們就能很輕鬆、精確的找到問題所在。而且此時，你能夠選擇：面試

輕點幾下就回到以前未改動的版本；
也能夠選擇存儲在本地（由於以前的全部版本和相關改動也都已經有序的存儲在這個版本控制系統中了）；
還能夠選擇把這個項目託管到如 GitHub 一類的開源平臺上，邀請同事一塊兒來共同開發，各不干涉，而後再把同事們全部的改動合併成一個共同的版本。

總結： 項目開發中，使用版本控制系統好處是至關多的。版本控制也是咱們前端開發工做者一項必備的技能。bash

3 Git 在哪裏

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

那 Git 在哪裏？markdown

用你的終端，以命令行去吩咐它（本系列的兩篇文章會以具體操做詳細談到具體命令）。
💡Git 中文使用文檔網絡

4 Git、GitHub 初嘗試

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

4.1.1 第一步，在 GitHub 上建立一個倉庫（repository)

💡註釋：repository 是「倉庫」的意思，能夠直接理解爲：一個放置項目的地方。ssh

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

註釋1：寫上你的項目名稱；
註釋2：簡單描述你的項目（這會稍後直接顯示在項目下方）；
註釋3：我的用戶直接選擇免費、公開的；
註釋4：注意看下邊的英文：「若是你勾選這個框，那麼你能夠隨即克隆這個項目到你的電腦本地；若是你不勾選，則意味着你是想隨後推送一個你電腦本地已經創建好的倉庫到 GitHub 線上。」—— 請注意咱們本文的任務是：從 GitHub 上克隆一個線上項目到本地。因此，請勾選這個選項。

4.1.3 第三步，克隆這個項目到本地

在第二步中，咱們創建好了一個倉庫，那麼咱們就開始按照本節任務進行克隆這個項目到本地。分佈式

註釋1：這個 README.md 文件其實咱們很常見，咱們工做生活中下載的不少軟件的文件夾裏基本都會有這麼一個文檔，即便咱們歷來沒有打開過一個。咱們能夠直接稱做：說明文檔。這裏的 .md 格式就是咱們以前提到過的 markdown 語法寫的文檔，不熟悉的請參考《初次接觸前端，咱們要理解哪些名詞？》。
註釋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)
複製代碼

註釋：看到這個，則證實咱們在 GitHub 上創建那個名叫 test 的倉庫已成功克隆到電腦本地。接下來，咱們就能夠在本地進行編輯，以後再推送到線上。

4.1.9 第九步，在本地進行項目編輯

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

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」。咱們查看目前有哪些遠程倉庫的命令是：