用於 Web 開發的 Git:了解項目的典型工作流程

Git 是控制我們製作的應用程序版本的軟體。它被獨立開發者、大公司,甚至是世界上最大的開源項目 Linux 使用。

作為一名 Web 開發人員,了解如何正確使用 Git 進行 Web 開發非常重要。我們不只是在談論「git add」、「git commit」和「git push」。您應該了解使用 Git 創建 Web 項目的整個工作流程。

還不相信?開始吧!

為什麼使用 Git?

這些只是開始使用 Git 的一些原因:

  • 組織:您無需在 v1、v2、v3 等文件夾中管理您的項目,而是擁有一個帶有特殊資料庫的項目,該資料庫存儲文件的所有版本
  • 協作:Git 允許您和其他人同時處理同一個項目,而不會產生衝突。
  • 開源:Git 是開源的,但它也是我們用來協作和創建優秀開源軟體的工具。任何人都可以在 GitHub 或 Bitbucket 等平台上向開源項目提出拉取請求。
  • 平台靈活性:如今,您有許多不同的 Git 託管服務可供選擇,例如 Gitlab、GitHub、Bitbucket 和 SourceForge。您甚至可以為所有項目使用自託管解決方案。
  • 輕鬆備份:輕鬆撤消錯誤,並且永遠不會丟失您的項目代碼庫。

body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;- webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border- left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:塊;字體大小:18px;行高:27px;邊距底部:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt。 novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{字體大小:16px;行高:16px;垂直對齊:中間}body a.novashare-ctt。novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height: 18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9 ;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4 }body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare -ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}是時候了解更多不僅僅是「git add」、「git commit」和 ‘git push’ 👩‍💻 在本指南中深入了解有關典型 Git 工作流程的所有信息 👇點擊推文

我們已經提到過 GitHub 這個詞一兩次了,那麼 Git 和 GitHub 有什麼區別呢?

如果您對 Git 完全陌生,這可能會讓您感到困惑。簡單來說,Git 和 GitHub 是相關但不同的工具。

Git 是我們用來控制文件更改的版本控制系統 (VCS),而 GitHub 是我們用來在線存儲項目文件及其 Git 歷史記錄的服務(位於項目的 .git/ 文件夾中) .

Git 安裝在本地,在您的機器上,如果沒有 GitHub 或 GitLab 等託管服務,與其他開發人員協作將非常困難。

GitHub 通過添加其他改進協作的功能(如克隆、分叉和合併)來增強 Git。這兩個工具結合在一起,為您帶來了一個相對友好的生態系統來開發、管理和向其他人展示您的項目。

用於 Web 開發工作流程的基本 Git

在接下來的部分中,您將通過動手實踐了解更多關於用於 Web 開發的 Git 工作流程。

安裝要求

如果您還沒有安裝 Git,那麼這是一個完美的時機。它易於安裝並且可在大多數操作系統上使用。

從官方下載頁面下載它,或者如果您使用的是 Linux 或 macOS,請使用包管理器安裝它:

Git 下載頁面,顯示 macOS、Windows 和 Linux/Unix 的選項。Git 下載頁面。

要測試安裝是否一切正常,請在 Linux 或 macOS 上通過在應用程序菜單中搜索「終端」或在 Windows 上打開 Git bash(默認情況下與 Git 一起安裝)來啟動終端。

然後輸入:

git –version
Linux 終端中顯示的 Git 版本 2.33。Git 版本。

如果你得到一個 Git 版本作為響應,你就可以開始了。

我們還需要一個 GitHub 帳戶,因此請務必註冊或登錄 GitHub:

帶有文字的 GitHub 註冊頁面 GitHub 註冊頁面。

一旦你安裝了 Git 並登錄到你的 GitHub 帳戶,你可以繼續下一部分。

協作項目的基本 Git 工作流程

如前所述,大多數時候您不會開發單獨的項目。協作是一項關鍵技能,Git 和 GitHub 幫助我們使其成為一個簡單而有效的過程。

Git 項目的典型工作流程如下所示:

  1. 通過克隆存儲庫或 repo 獲取項目的本地副本。如果你正在合作,你應該先分叉回購。
  2. 使用您將要處理的功能的代表名稱創建一個分支。
  3. 編輯項目。
  4. 將更改提交到本地計算機。
  5. 將更改推送到遠程倉庫。
  6. 創建對原始存儲庫的拉取請求。
  7. 合併和解決原始倉庫主分支中的衝突。

教程

現在是時候弄髒我們的手了!

在本指南中,您將創建一個簡單的 HTML 網站。出於實際目的,您會將基礎項目從 HTML 站點存儲庫分叉到您的 GitHub 帳戶。這可以為所有公共可用的存儲庫完成。

信息

復刻是存儲庫的單獨副本,您可以在不影響原始項目的情況下對其進行管理和修改。另一方面,克隆 repo 只會創建文件的本地副本。

要創建 HTML 站點,請轉到此 GitHub 存儲庫,然後單擊頁面右上角的 Fork 按鈕:

GitHub 頁面專註於 GitHub 分叉。

現在你有一個原始 repo 的分支,它只在你的 GitHub 帳戶上可用。這是完全相同的存儲庫——直到您開始提交更改。

如您所見,分叉一個公共回購只需幾秒鐘。這對於開源項目來說非常有用,但請記住,如果您的組織有一個私人倉庫,您需要在嘗試分叉之前作為貢獻者加入。

是時候把你的叉子帶到你的本地機器上了。為此,您需要使用命令 git clone 克隆它,該命令從遠程伺服器檢索 Git 存儲庫:

git 克隆 remote_url

您需要將 remote_url 替換為 fork 的 URL。要獲取 GitHub 存儲庫的確切 URL,請轉到其頁面並單擊代碼。然後選擇 SSH,並複製它提供給您的鏈接:

SSH repo URL 下 SSH 網址。

您將運行以克隆分叉存儲庫的命令是:

git clone [電子郵件保護]:yourusername/HTML-site.git

當你克隆一個 repo 時,你會得到一個帶有它的名字的文件夾。該文件夾內是項目的源代碼(在本例中為 HTML 站點)和 Git 存儲庫,位於名為 .git 的文件夾內。

您可以通過在圖形文件管理器中打開新文件夾來查看新目錄中的文件列表,或者使用 ls 或 dir 命令直接從終端列出它們:

# Linux/macOS
ls HTML-site/
# Windows
目錄 HTML-site
.git images .gitignore index.html LICENSE README.md styles.css

這個 HTML 網站非常簡單。它使用 Bootstrap 用於實際目的,並使用 Unsplash 的一些圖片,您可以在其中為您的網站下載免費圖片。

如果您在瀏覽器中打開 index.html 文件,您將看到一個包含一些圖像的簡單頁面:

我們正在創建的簡單網頁,其中顯示了技術設備的圖像,包括幾台筆記本電腦和一台舊相機。我們正在創建的簡單網頁。

是時候玩這個項目了。感覺很空洞,也許帶有站點名稱的標題可以增強用戶體驗。

為此,請輸入 HTML 站點目錄並創建一個名為 header 的分支。在這個新分支中,我們可以編輯所有文件並實現儘可能多的代碼,因為它不會影響主(原始)分支。

運行以下命令:

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎?

加入 20,000 多人的行列,他們會通過 WordPress 內幕技巧獲得我們的每周時事通訊!

現在訂閱

git checkout -b 標頭

這將創建一個名為「header」的分支,並在此之後立即切換到它。它相當於:

git 分支頭
git checkout 頭

要確認一切正常,請運行:

git status
# 在分支頭
# 沒有提交,工作樹榦凈

你會看到你已經從「main」分支轉移到了「header」分支,但是工作樹仍然是乾淨的,因為我們沒有編輯任何文件。

在您喜歡的代碼編輯器中,打開分支項目中的 index.html 文件。該文件包含一些指向 Bootstrap 5 的鏈接,因此我們可以利用框架的現成組件。

將以下代碼添加到 <body> 標記內和圖像容器上方的 index.html 文件中:

<header>
<nav class=”navbar navbar-light bg-light”>
<div class=”container-fluid”>
<span class=”navbar-brand mb-0 h1″>HTML 站點</span>
</div >
</nav>
</header>
我們的網頁有一個新的 帶有新標題的網頁。

好看多了!隨意進行您希望的其他分支和更改。

完成項目編輯後,是時候將所有更改提交到本地存儲庫了。在項目目錄中,在終端中鍵入以下內容:

git add –all
git commit -m “在 index.html 文件中添加了簡單的標題”

重要的

所有 Git 提交消息都必須清晰且有意義。每次添加提交時,您和您的團隊成員都應該能夠識別該提交中發生了什麼,這樣如果出現錯誤,您可以輕鬆修復它。

當你第一次開始一個項目時,通常會有描述性的提交消息,但隨著時間的推移和焦點的轉移,消息的質量往往會下降。確保跟上良好的命名習慣。

現在您已經提交了本地存儲庫(它仍然只在您的計算機上可用),是時候將其推送到遠程存儲庫了。

如果您嘗試正常推送提交,它將無法正常工作,因為您當前正在處理標題分支。您需要為標頭設置上游分支:

git push –set-upstream 原始標頭

從 2021 年 8 月 13 日開始,GitHub 要求使用 SSH 身份驗證,因此請確保您的密鑰設置正確。

厭倦了沒有答案的 1 級 WordPress 託管支持?試試我們世界級的支持團隊!查看我們的計劃

在此之後,您應該能夠在您的分叉存儲庫中看到一個名為 header 的新分支(例如 https://github.com/yourusername/HTML-site/branches):

這 「標題」分支。

要創建對原始存儲庫的拉取請求,請單擊「活動分支」部分中的「比較」。

這將引導您進行拉取請求,您需要在其中選擇要合併的分支(原始分支或您的分支)。默認情況下,它顯示與基礎存儲庫合併的選項:

在 GitHub 上創建帶有標題的拉取請求 在 GitHub 上創建拉取請求。

單擊拉取請求選項後,您需要編寫所做更改的簡短描述,就像您之前的提交一樣。再一次,盡量簡潔而具有描述性:

這 編寫拉取請求消息。

單擊創建拉取請求按鈕並等待基礎存儲庫所有者接受或向您提供有關更改的反饋。

恭喜——您剛剛完成了用於 Web 開發的通用 Git 工作流程的所有步驟!

這是一個非常基本的示例,但其邏輯適用於各種規模的項目。確保您也在更大的協作項目中密切實施此工作流程。

如何在 Kinsta 使用 Git

如果您是 Kinsta 用戶,您已經有兩種方法可以從 MyKinsta 門戶中使用 Git 和 GitHub。

讓我們從第一個選項開始。您可以輕鬆地從任何 Git 託管服務(如 GitHub、Gitlab 或 Bitbucket)通過 SSH 進入並拉取存儲庫。

為此,請轉到您的站點選項卡,選擇一個站點,然後轉到您的 SSH 詳細信息部分,然後複製 SSH 終端命令。

MyKinsta 站點信息頁面顯示 SSH 詳細信息和命令部分。SSH 詳細信息部分。

通過 SSH 登錄到您的站點,方法是將上面的命令粘貼到您的終端中,然後進入您站點的公共文件夾(位於 /www/yoursitename/ 下)。這是您所有 WordPress 文件所在的位置,因此您可以使用您一直在處理的自定義主題或插件下載 Git 存儲庫。

以下是您如何通過一個簡單的命令來下載 Git 存儲庫:

ssh [電子郵件保護] -p PORT “cd /www/my_site/public && git pull https://github.com/user/repo.git”

重要的

高級用戶應該使用 SSH。如果您不精通此操作,請不要猶豫,首先聯繫 Kinsta 支持。

現在,在 Kinsta 引入新的 GitHub 部署功能,您可以從 GitHub 存儲庫部署完整的 WordPress 站點。

您的 GitHub 存儲庫應包含 WordPress 核心文件的副本,當然還有 wp-content 文件夾中的站點內容。

讓我們快速看一下這個選項。

轉到您公司的一個站點並創建一個登台環境。這不會超過幾分鐘。

Kinsta 的站點頁面登台環境選項。登台環境。

進入臨時站點後,轉到「部署」選項卡並單擊「開始設置」按鈕。您將看到一個 GitHub 模式,它可以讓 Kinsta 連接到您的 GitHub 帳戶。

帶有指向「開始設置」按鈕的箭頭的 GitHub 部署。GitHub 部署選項卡。

現在,選擇您要從中提取網站的存儲庫。

使用包括「完成」按鈕在內的多個選項將 Kinsta 連接到 GitHub 模式。將 Kinsta 連接到 GitHub。

最後,部署您的站點並通過您的臨時站點 URL 訪問它。

立即部署按鈕。立即部署按鈕。

此功能仍處於測試階段,但很快每個 Kinsta 用戶都可以使用它。

如果您知道如何很好地使用 Git 和 Kinsta,那麼使用它們可能是一個強大的組合。雖然我們這裡的教程只是一個簡單的示例,但您可以從我們的 Git 知識庫文章中了解更多信息。

通過本指南了解典型項目工作流程,提升您的 Git 知識✅點擊推文摘

如今,Git 是 Web 開發的必備工具,因為大多數時候您將與他人合作以創建您能做的最好的項目。

在本文中,我們討論了在您的項目中使用 Git 的一些重要原因,並向您展示了在 Git 存儲庫中協作的基本工作流程。

Git 是一個如此強大的工具,您甚至可以將其使用擴展到 WordPress 託管,因此學習和實施它作為您的 Web 開發技能庫的一部分只會讓您受益。

對於改進這個用於 Web 開發的基本 Git 工作流程,您還有其他建議嗎?請在評價部分留下您的意見!

通過以下方式節省時間、成本並最大限度地提高站點性能:

  • 來自 WordPress 託管專家的即時幫助,24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 29 個數據中心。
  • 通過我們內置的應用程序性能監控進行優化。

所有這些以及更多,在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章