如何使用GitHub和Deploy自動部署WordPress主題更改


您是否要自動將WordPress主題更改部署到您的網站? 大多數專業的Web開發人員都使用GitHub或BitBucket之類的版本控制系統,並將其更改自動部署到暫存或實時站點。 在本文中,我們將向您展示如何使用GitHub和Deploy自動部署WordPress主題更改。

使用GitHub和Deploy自動部署WordPress主題更改

為什麼要使用版本控制系統進行WordPress主題開發?

首先,我們需要了解什麼 版本控制 手段:

…記錄一段時間內對一個文件或一組文件的更改的系統,以便您以後可以調用特定版本 http://git-scm.com/book/en/v2/入門-關於版本控制

換句話說,每次我們更改WordPress主題模板,圖像或CSS文件時,版本控制系統都會跟踪這些更改。 在特定時刻,我們可以標記(提交)一批更改。 如果這些更改引起了問題,我們可以還原(或回滾)到我們的WordPress主題的現有“版本”。

Git是一個常見的版本控制系統,它允許多個用戶(Web開發人員)在同一代碼庫(例如WordPress主題)上工作。 如果兩個開發人員編輯同一文件,則Git會內置控件來處理這些問題(稱為合併衝突)。

託管的第三方Git版本控制系統(例如GitHub和BitBucket)允許用戶在發現您的代碼有問題時留下問題(或問題單)。 可以針對特定問題提交(標記)您的代碼更改,以顯示為解決問題而進行的確切代碼更改。 當您在6或12個月的時間裡回顧代碼並想知道為什麼以特定的方式做某件事時,這確實很有用。

為什麼使用部署系統?

與GitHub等服務集成的部署系統允許您自動或手動上傳對WordPress主題所做的更改。

您可以將其視為一種單向同步系統-例如,如果您從WordPress主題中刪除文件,則還必須記住也要通過FTP刪除它。 使用部署系統,當您將代碼更改提交到GitHub時,將自動為您完成此操作。

為您的WordPress主題設置GitHub存儲庫

首先,我們將在GitHub上設置一個帳戶,使用適用於Windows或Mac的GitHub客戶端將WordPress主題存儲在GitHub中。

前往https://github.com並註冊一個免費帳戶。

註冊並確認電子郵件地址後,點擊屏幕右上角的加號圖標,然後選擇 新資料庫 (存儲庫是您的代碼的容器–在本例中為我們的WordPress主題)。

在GitHub中添加新的存儲庫

首先設置 倉庫名稱 –您的WordPress主題的文件夾名稱是一個好主意。 然後,選擇這是否是 上市 要么 私人的 資料庫。 每個人都可以使用公共存儲庫查看您的代碼,但是他們不能對其進行更改。 專用存儲庫僅供您查看。

最後,勾選下面的複選框 使用自述文件初始化此存儲庫,然後單擊 創建倉庫 按鈕。

在GitHub上為您的WordPress主題創建一個新的存儲庫

如果一切正常,您應該在屏幕上看到新的存儲庫:

新的GitHub存儲庫

在Windows / Mac上安裝GitHub

接下來,我們需要將WordPress主題的代碼放入存儲庫中。 我們可以使用安裝在您計算機上的GitHub客戶端執行此操作。

只需訪問GitHub Desktop網站並下載適用於Windows和Mac的GitHub Desktop客戶端即可。

下載完成後,通過單擊開始安裝過程 繼續

GitHub桌面安裝歡迎屏幕

在下一個屏幕上,輸入您在GitHub上註冊時創建的GitHub登錄名(用戶名)和密碼。 點擊 登入 完成後點擊按鈕。

登錄到GitHub

如果登錄詳細信息正確,將顯示您的帳戶。 點擊 繼續 按鈕繼續:

登錄GitHub

我們可以離開 Git配置 部分作為默認設置。 確保點擊 安裝命令行工具 選項,然後單擊 繼續 按鈕:

配置git並安裝命令行工具

最後,單擊“完成”,您將看到GitHub屏幕。

讓我們添加我們之前創建的GitHub存儲庫。 為此,請點擊右上角的加號圖標,然後點擊 克隆 選項。 您將看到GitHub存儲庫的列表,包括我們之前創建的存儲庫:

克隆存儲庫

單擊您之前創建的存儲庫,然後單擊 克隆 按鈕。

選擇要在計算機上存儲此存儲庫的位置,然後單擊 克隆 選擇此按鈕後。

現在,我們已經將託管在GitHub上的存儲庫克隆(複製)到了我們的計算機上。

接下來,我們需要將WordPress主題代碼添加到存儲庫的文件夾中,然後提交該代碼並將其同步到GitHub。

首先在計算機上找到在上述步驟中選擇的文件夾。 它應該有一個 README.md 文件夾中的文件。 根據計算機的設置,您可能還會看到隱藏的 .git 夾:

在計算機上克隆存儲庫文件夾

將您的WordPress主題代碼複製並粘貼到此文件夾中:

將主題文件複製並粘貼到計算機上的存儲庫文件夾中

打開GitHub Mac或Windows應用程序,現在您將看到剛添加的文件出現在窗口中:

未完成的更改

您將看到以綠色突出顯示的更改。 這些是您已保存在本地存儲庫中的更改,但尚未提交這些更改。

接下來,我們需要將這些文件提交(上傳)到GitHub。 為此,請在 概要 框說明我們所做的更改(例如 我的第一次提交),然後點擊 致力於掌握 按鈕。

提交變更

這將提交您對存儲庫所做的更改。 要將這些更改上傳到GitHub,請單擊GitHub應用程序窗口右上角的同步按鈕。

同步您的本地和GitHub存儲庫

要檢查您的提交已上傳到GitHub,請訪問GitHub網站上的存儲庫。 如果一切正常,您將看到代碼:

更改成功上傳到GitHub

設置部署

到目前為止,我們已經設置了GitHub,並將WordPress主題的代碼提交到了GitHub存儲庫。 最後一步是將GitHub存儲庫上的所有更改上傳到WordPress網站。

DeployHQ或簡稱Deploy是一項基於Web的服務,它將監視對GitHub存儲庫的更改,並自動或手動將這些更改自動上傳到WordPress網站。

可以將其想像為代碼和Web服務器中間的連接:

首先,您需要訪問Deploy網站和註冊。 部署是一項付費服務,但它為一個項目提供免費帳戶,每天提供10個部署。

完成註冊後,您可以登錄到Deploy儀表板。 單擊創建一個新項目開始。

在部署中添加新項目

接下來,您需要為項目提供一個名稱,然後選擇代碼託管平台GitHub。 單擊創建項目按鈕繼續。

部署項目名稱和代碼託管

部署現在將您重定向到GitHub。 如果您尚未登錄,則將要求您登錄。 之後,將要求您允許Deploy訪問您的GitHub帳戶。

授予Deploy權限以訪問您的GitHub帳戶

單擊“授權應用程序”按鈕繼續。

Deploy將從GitHub中獲取您的存儲庫列表,並要求您為此項目選擇一個存儲庫。

選擇你的倉庫

只需單擊您的WordPress主題存儲庫,Deploy便會為您導入它。

在下一步中,Deploy將要求您提供服務器信息。 在這裡,您可以告訴Deploy如何將文件上傳到WordPress服務器。

為此,您將需要FTP憑據。

部署FTP詳細信息

  • 名稱: 提供此連接的名稱
  • 協議: FTP,或者如果您具有SFTP或SSH,則也可以使用它們
  • 主機名: 您網站的SFTP / FTP主機。
  • 港口: 您的網站主機的SFTP / FTP端口(通常SFTP = 22,FTP = 21)
  • 用戶名和密碼:FTP用戶名和密碼。
  • 部署路徑: 在上傳WordPress主題文件之前,您導航到的路徑。 例如, public_html / example.com / wp-content / themes / MyTheme,在哪裡 我的主題 是您致力於GitHub的WordPress主題。

單擊保存按鈕繼續。

部署現在將測試您的服務器連接,如果一切正常,那麼它將顯示一條成功消息。

添加的服務器繼續部署

您現在可以單擊立即部署按鈕將GitHub文件上傳到您的網站。

新部署

部署將向您顯示此部署的詳細信息。 只需單擊底部的“部署”按鈕。

現在,您將看到部署進度。 部署完成後,您將看到一條成功消息。

成功部署

您已使用Deploy成功將更改從GitHub部署到您的網站。 現在,當您在計算機上更改WordPress主題時,需要將它們提交到GitHub。 之後,您需要訪問Deploy網站以手動開始部署。

讓我們看看如何設置自動部署,以便將您對GitHub所做的任何更改自動部署到您的網站。

設置自動部署

首先,您需要訪問Deploy儀表板並轉到Projects頁面。 單擊您的項目的名稱。

部署項目

在項目頁面上,將鼠標移到“設置”菜單,然後選擇“服務器和組”。

項目設置-服務器和組

單擊服務器旁邊的編輯圖標。

編輯服務器

這將帶您編輯服務器屏幕。 在右側列中,您將找到“自動部署”設置。

確保已打開。 在其下,您將看到一個URL。 複製此URL,因為下一步將需要它。

自動部署設置

在新的瀏覽器選項卡中登錄您的GitHub帳戶。 單擊您的存儲庫,然後單擊“設置”。 單擊“ Webhooks和服務”鏈接。

GitHub Webhooks和服務

單擊添加Webhook按鈕。

將您從“部署服務器設置”頁面複製的URL粘貼到“有效負載URL”字段中。 選擇 應用程序/ x-www-form-urlencoded 作為內容類型,然後點擊添加webhook。

添加webhook

如此,您的GitHub存儲庫現在將在存儲庫有新更改時通知Deploy。 然後,部署將自動將這些更改部署到您的網站。

測試自動部署

要測試自動部署,只需對計算機上的WordPress主題存儲庫進行一些更改。

打開GitHub桌面應用程序,然後提交這些更改。

通過將提交添加到GitHub來測試自動部署

不要忘記單擊同步按鈕。

現在,在“部署”儀表板上訪問您的項目。 單擊部署,您將在此處找到自動部署。

部署

僅此而已,我們希望本文能幫助您學習如何使用GitHub和Deploy自動部署WordPress主題更改。 您可能還希望查看有關如何為WordPress網站創建過渡環境的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。