一個從零開始設置 Git 和 GitHub 的教程

Git 是一個非常有價值的工具。

它允許我們在項目上工作數月或數年,但仍然能夠回到我們在代碼庫上做出的每一次個別變更。在團隊中,你還可以找出是進行了更改。

每次我們進行更改、添加新功能或修復錯誤時,我們都會添加一個小的解釋,然後我們提交這些更改。

它還允許我們與團隊合作,因為每個人都可以將提交推送到代碼庫,Git 會負責確保與其他人所做的更改沒有衝突。

在繼續之前,你需要在你的電腦上安裝 Git

最簡單的方法是安裝GitHub Desktop應用程序。

它適用於 Windows 和 Mac,你可以在這裡下載它:

GitHub Desktop

這將安裝一個用於使用 Git 的圖形用戶界面,同時也安裝了 Git 本身。

它與 GitHub 緊密集成。

GitHub 是什麼?🤔 它是一個用於托管代碼並讓你在開源項目上協作的網站,你將在這個項目的所有實例中使用它,而且這也是你將看到我發佈的項目代碼的地方。

安裝完畢後,打開應用程序。

Screen Shot 2022-04-13 at 09.22.50.png

點擊“Create your free account”。你會被帶到 GitHub 上創建一個帳戶:

Screen Shot 2022-04-13 at 09.24.00.png

明智地選擇用戶名,你將擁有一個公開的 GitHub 頭像,就像我在這裡: https://github.com/flaviocopes

確認你的電子郵件後,你會看到一個畫面,點擊“Skip personalization”並選擇自由計劃:

Screen Shot 2022-04-13 at 09.24.38.png

Screen Shot 2022-04-13 at 09.25.05.png

最後,你進入了:

Screen Shot 2022-04-13 at 09.25.34.png

現在回到 GitHub Desktop 應用程序,點擊“Sign in to GitHub.com”,即藍色按鈕:

Screen Shot 2022-04-13 at 09.25.41.png

Screen Shot 2022-04-13 at 09.25.46.png

最後,你準備配置 Git。接受這一點以設置 Git 的用戶名和電子郵件,這是你創建提交所需要的。點擊“Finish”。

Screen Shot 2022-04-13 at 09.25.57.png

Screen Shot 2022-04-13 at 09.26.09.png

安裝此應用程序同時也安裝了 Git,所以你不需要再做其他任何操作。

注意:如果你喜歡,你可以從這裡下載“只有 Git”https://git-scm.com/downloads,這將跳過 GitHub 的集成。使用這種方法,你需要使用下面這兩個命令在終端中設置你的名字和電子郵件:

git config --global user.name "你的名字"
git config --global user.email "[[email protected]](/cdn-cgi/l/email-protection)"

確保輸入的是你的真實名字和電子郵件,不要輸入虛假的!

現在讓我們看看如何在 VS Code 中使用 Git。

在你的用戶主目錄中創建一個名為 dev 的文件夾,這將是你存儲所有項目的地方。

在其中創建一個 testgit 文件夾。

現在將此文件夾拖動到 VS Code 圖標上以在 VS Code 中打開它,或者使用 File → Open Folder... 菜單。

Screen Shot 2021-12-18 at 11.54.25.png

通過點擊 File → New File 菜單或者在左側邊欄右鍵點擊(在你看到 TESTGIT 行下方),創建一個 test.js 文件。向其中添加一些內容,比如 alert('test')

Screen Shot 2021-12-18 at 12.12.06.png

按下 cmd-Sctrl-S,或者使用 File -> Save 菜單保存。

現在點擊工具欄中的源代碼控制圖標:

Screen Shot 2021-12-18 at 12.14.27.png

你會看到類似這樣的內容:

Screen Shot 2021-12-18 at 12.20.07.png

這是因為我們尚未在項目中配置 Git。每個不同的項目都必須配置 Git。

我們首先需要初始化一個源代碼庫

點擊“Initialize Repository”,你會看到這個:

Screen Shot 2021-12-18 at 12.21.13.png

右側的文件仍然是相同的,但左側的側邊欄已經更改,顯示了您存儲庫中所做更改的文件列表。

現在,存儲庫已經準備好進行首次提交

什麼是提交?它是將您對代碼庫所做的一系列更改聚合在一個單獨、原子性的更改下的一種方式。

試一試吧:在“消息”框中寫上“我的第一次提交”,然後按下 cmd-Enter / ctrl-Enter,或者按下 ✔ 圖標:

Screen Shot 2021-12-18 at 12.25.57.png

你會看到一個彈出窗口,說“沒有待提交的更改。你想要將所有更改添加到暫存區並直接提交它們嗎?”

Screen Shot 2022-04-13 at 09.11.51.png

我建議在這裡點擊“Always”。

如果這是你第一次使用 Git,你可能會收到這條錯誤信息:

Screen Shot 2022-04-13 at 09.12.00.png

在這裡點擊“Cancel”按鈕,並完成 這裡 描述的步驟(或者根據本課程一開始解釋的方法安裝和配置 GitHub Desktop)。然後重複此步驟。

現在,我們要將此存儲庫發布到 GitHub

點擊“Publish Branch”藍色按鈕。我們將一起完成將 VS Code 連接到 GitHub 的程序,這只需要做一次:

Screen Shot 2021-12-18 at 12.51.11.png

Screen Shot 2021-12-18 at 12.51.23.png

Screen Shot 2021-12-18 at 12.51.44.png

Screen Shot 2021-12-18 at 12.51.53.png

Screen Shot 2021-12-18 at 12.51.55.png

Screen Shot 2021-12-18 at 12.52.02.png

現在,你可以選擇是公開還是私有地發布此項目。

我通常對所有項目進行私有化,除非我覺得它們已經足夠好要公開分享。你總是可以稍後更改這一點。

Screen Shot 2021-12-18 at 12.52.09.png

Screen Shot 2021-12-18 at 12.52.12.png

這個過程將你的提交推送到 GitHub

這意味著它們現在保存在 github.com 上(你還可以看到這也是你的代碼的一個方便備份,以防萬一在你的計算機上出現了什麼問題)。

就是這樣:

Screen Shot 2021-12-18 at 12.52.15.png

這個頁面上有很多東西,但我們首先看的是一個帶有時鐘和 1 數字的小圖標:

Screen Shot 2021-12-18 at 12.52.15.png

點擊它,你將看到所有提交到這個存儲庫的變更的視圖。

Screen Shot 2021-12-18 at 13.06.47.png

隨著時間的推移,這個視圖將有一個很長的提交列表,點擊右側的提交 ID 會顯示每個提交中所做的具體更改。

Screen Shot 2021-12-18 at 13.07.32.png

你可以使用命令行與 Git 進行交互(我們將在下一課中看到命令行)。有些人喜歡這種方式,但對於這個 bootcamp 來說不是必需的。

我強烈建議使用 GitHub Destktop,因為它使事情變得更簡單。

如果你有興趣了解更多關於 Git 和 GitHub 的訊息,我可以推薦你閱讀我自己的教程: