Do you want to automatically deploy WordPress theme changes to your website? Most professional web developers use a version control system like GitHub or BitBucket and automatically deploy their changes to staging or live site. In this article, we will show you how to automatically deploy WordPress theme changes using GitHub and Deploy.
您是否要自动将WordPress主题更改部署到您的网站？ 大多数专业的Web开发人员使用GitHub或BitBucket之类的版本控制系统，并将其更改自动部署到暂存或实时站点。 在本文中，我们将向您展示如何使用GitHub和Deploy自动部署WordPress主题更改。
为什么要使用版本控制系统进行WordPress主题开发？ (Why Use Version Control System for WordPress Theme Development?)
First, we need to understand what version control means:
首先，我们需要了解版本控制的含义：
… a system that records changes to a file or set of files over time so that you can recall specific versions later http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control
…一个记录一段时间内对一个文件或一组文件的更改的系统，以便您以后可以调用特定版本http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control
In other words, every time we change a WordPress theme template, image or CSS file, a version control system keeps track of these changes. At particular points, we can label (commit) a batch of changes. If those changes cause an issue, we can revert (or roll back) to an existing ‘version’ of our WordPress Theme.
换句话说，每次我们更改WordPress主题模板，图像或CSS文件时，版本控制系统都会跟踪这些更改。 在特定时刻，我们可以标记(提交)一批更改。 如果这些更改引起了问题，我们可以还原(或回滚)到我们的WordPress主题的现有“版本”。
Git is a common version control system, and allows multiple users (web developers) to work on the same code base (such as a WordPress Theme). If two developers edit the same file, Git has built in controls to deal with these issues (known as merge conflicts).
Git是一个常见的版本控制系统，它允许多个用户(Web开发人员)在同一代码库(例如WordPress主题)上工作。 如果两个开发人员编辑同一文件，则Git会内置控件来处理这些问题(称为合并冲突)。
Hosted, third party Git version control systems, such as GitHub and BitBucket, allow users to leave issues (or tickets) if they spot a problem with your code. Your code changes can be committed (labelled) against a particular issue, to show the exact code changes made to fix an issue. This is really useful when you look back on code in 6 or 12 months time and want to know why you did something in a particular way.
托管的第三方Git版本控制系统(例如GitHub和BitBucket)允许用户在发现您的代码有问题时留下问题(或问题单)。 可以针对特定问题提交(标记)您的代码更改，以显示为解决问题而进行的确切代码更改。 当您在6或12个月的时间里回顾代码并想知道为什么以特定的方式做某件事时，这确实很有用。
为什么使用部署系统？ (Why Use a Deployment System?)
A deployment system, which integrates with services such as GitHub, allows you to automatically or manually upload changes you have made to your WordPress theme.
与GitHub等服务集成的部署系统允许您自动或手动上传对WordPress主题所做的更改。
You can see it as a one way synchronisation system – for example, if you delete a file from your WordPress Theme, you’d have to remember to delete it via FTP too. With a deployment system, this is automatically done for you when you commit your code changes to GitHub.
您可以将其视为一种单向同步系统-例如，如果您从WordPress主题中删除文件，则还必须记住也要通过FTP删除它。 使用部署系统，当您将代码更改提交到GitHub时，将自动为您完成此操作。
为您的WordPress主题设置GitHub存储库 (Setting up a GitHub Repository for Your WordPress Theme)
First we’ll setup an account on GitHub, use the GitHub client for Windows or Mac to store our WordPress Theme in GitHub.
首先，我们将在GitHub上设置一个帐户，使用适用于Windows或Mac的GitHub客户端将WordPress主题存储在GitHub中。
Head over to https://github.com and sign up for a free account.
前往https://github.com并注册一个免费帐户。
Once you’ve registered and confirmed your email address, click the plus icon towards the top right corner of the screen, and choose New Repository (a repository is a container for your code – in this case, our WordPress Theme).
注册并确认电子邮件地址后，请单击屏幕右上角的加号图标，然后选择“ 新建存储库” (存储库是您的代码的容器–在本例中为WordPress主题)。
Start by setting the repository name – your WordPress Theme’s folder name is a good idea. Then, choose whether this is a Public or Private repository. Public repositories are available for everyone to see your code, but they can’t make changes to it. Private repositories are available just for you to see.
首先设置存储库名称 -WordPress主题的文件夹名称是一个好主意。 然后，选择这是公共存储库还是私有存储库。 每个人都可以使用公共存储库查看您的代码，但是他们不能对其进行更改。 专用存储库仅供您查看。
Finally, tick the checkbox below Initialize this repository with a README, and then click the Create repository button.
最后，选中下面的复选框， 以使用README初始化此存储库 ，然后单击“ 创建存储库”按钮。
If everything has worked, you should see your new repository on screen:
如果一切正常，您应该在屏幕上看到新的存储库：
在Windows / Mac上安装GitHub (Install GitHub for Windows / Mac)
Next, we need to put our WordPress Theme’s code into our repository. We can do this using the GitHub client, which installs onto your computer.
接下来，我们需要将WordPress主题的代码放入存储库中。 我们可以使用安装在您计算机上的GitHub客户端执行此操作。
Simply visit GitHub Desktop website and download GitHub Desktop client available for Windows and Mac.
只需访问GitHub Desktop网站并下载适用于Windows和Mac的GitHub Desktop客户端即可。
Once downloaded, start the installation process by clicking Continue
下载完成后，单击“ 继续”开始安装过程。
On the next screen, enter your GitHub Login (Username) and Password, which you created when you registered on GitHub. Click the Sign In button when done.
在下一个屏幕上，输入您在GitHub上注册时创建的GitHub登录名(用户名)和密码。 完成后，单击“ 登录”按钮。
If the login details are correct, your account will be displayed. Click the Continue button to proceed:
如果登录详细信息正确，将显示您的帐户。 单击继续按钮继续：
We can leave the Git Config section as the default settings. Make sure you click the Install Command Line Tools option, before clicking the Continue button:
我们可以将Git Config部分保留为默认设置。 在单击“ 继续”按钮之前，请确保单击“ 安装命令行工具”选项。
Finally, click Done, and you’ll be presented with the GitHub screen.
最后，单击“完成”，您将看到GitHub屏幕。
Let’s add our GitHub repository that we created earlier. To do this, click the plus icon on the top right hand corner, and then the Clone option. You will see a list of your GitHub repositories, including the one we created earlier:
让我们添加我们之前创建的GitHub存储库。 为此，请单击右上角的加号图标，然后单击“ 克隆”选项。 您将看到GitHub存储库的列表，包括我们之前创建的存储库：
Click the repository you created earlier, and then click the Clone button.
单击您之前创建的存储库，然后单击“ 克隆”按钮。
Choose where on your computer you want to store this repository, and click the Clone button once you’ve chosen this.
选择要在计算机上存储此存储库的位置，然后选择“ 克隆”按钮。
We’ve now cloned (copied) our repository hosted on GitHub to our computer.
现在，我们已经将托管在GitHub上的存储库克隆(复制)到了我们的计算机上。
Next, we need to add our WordPress Theme code to the repository’s folder, and then commit and sync this code to GitHub.
接下来，我们需要将WordPress主题代码添加到存储库的文件夹中，然后提交此代码并将其同步到GitHub。
Start by finding the folder you selected in the above step on your computer. It should have a README.md file in the folder. Depending on your computer’s settings, you may also see the hidden .git folder:
首先在计算机上找到在上述步骤中选择的文件夹。 该文件夹中应该有一个README.md文件。 根据计算机的设置，您可能还会看到隐藏的.git文件夹：
Copy and paste your WordPress Theme’s code into this folder:
将您的WordPress主题代码复制并粘贴到此文件夹中：
Open the GitHub Mac or Windows app, and you’ll now see the files you’ve just added appear in the window:
打开GitHub Mac或Windows应用程序，现在您将看到刚添加的文件出现在窗口中：
You will see the changes highlighted in green. These are the changes that you have saved in local repository but you haven’t yet committed those changes.
您将看到以绿色突出显示的更改。 这些是您保存在本地存储库中的更改，但尚未提交这些更改。
Next, we need to commit (upload) these files to GitHub. To do this, enter some text into the Summary box to explain the changes we’ve made (e.g. My first commit), and click the Commit to master button.
接下来，我们需要将这些文件提交(上传)到GitHub。 为此，请在“ 摘要”框中输入一些文本来解释我们所做的更改(例如，“ 我的第一次提交” )，然后单击“ 提交给主用户”按钮。
This commits the changes you’ve made to the repository. To upload those changes to GitHub, click the Sync button on the top right hand corner of the GitHub application window.
这将提交您对存储库所做的更改。 要将这些更改上传到GitHub，请单击GitHub应用程序窗口右上角的同步按钮。
To check your commit has been uploaded to GitHub, visit your repository on GitHub website. If everything worked, you’ll see your code:
要检查您的提交已上传到GitHub，请访问GitHub网站上的存储库。 如果一切正常，您将看到代码：
设置部署 (Setting up Deploy)
So far, we’ve setup GitHub and committed our WordPress Theme’s code to your GitHub repository. The final step is to upload any changes on your GitHub repository to your WordPress website.
到目前为止，我们已经设置了GitHub并将WordPress主题的代码提交到您的GitHub存储库。 最后一步是将GitHub存储库上的所有更改上传到WordPress网站。
DeployHQ or simply Deploy, is a web based service which will monitor changes to your GitHub repository, and automatically or manually upload just those changes to your WordPress website.
DeployHQ或简称Deploy是一项基于Web的服务，它将监视对GitHub存储库的更改，并自动或手动将这些更改自动上传到WordPress网站。
Imagine it as a connection in the middle of your code and web server:
想象一下它是代码和Web服务器中间的连接：
First you need to visit Deploy website and signup. Deploy is a paid service, but it offers a free account for one project and 10 deployments per day.
首先，您需要访问Deploy网站和注册。 部署是一项付费服务，但它为一个项目提供免费帐户，每天提供10个部署。
After finishing sign up, you can login to your Deploy dashboard. Click on create a new project to get started.
完成注册后，您可以登录到Deploy仪表板。 单击创建一个新项目开始。
Next you need to provide a name for your project and select your code hosting platform, GitHub. Click on the create project button to continue.
接下来，您需要为您的项目提供一个名称，然后选择代码托管平台GitHub。 单击创建项目按钮继续。
Deploy will now redirect you to GitHub. If you are not already signed in, then you will be asked to login. After that, you will be asked to allow Deploy to access your GitHub account.
部署现在会将您重定向到GitHub。 如果尚未登录，则将要求您登录。 之后，将要求您允许Deploy访问您的GitHub帐户。
Click on ‘Authorize application’ button to continue.
单击“授权应用程序”按钮继续。
Deploy will fetch the list of your repositories from GitHub and will ask you to select a repository for this project.
Deploy将从GitHub上获取您的存储库列表，并要求您为此项目选择一个存储库。
Simply click on your WordPress theme repository and Deploy will import it for you.
只需单击您的WordPress主题存储库，Deploy就会为您导入它。
In the next step, Deploy will ask you to provide server information. This is where you tell Deploy how to upload files to your WordPress server.
在下一步中，Deploy将要求您提供服务器信息。 在这里，您可以告诉Deploy如何将文件上传到WordPress服务器。
You will need your FTP credentials for that.
为此，您将需要FTP凭据。
- Name: Provide a name for this connection名称：为此连接提供名称
- Protocol: FTP or if you have SFTP or SSH then you can use those as well协议： FTP，或者如果您具有SFTP或SSH，则也可以使用它们
- Hostname: Your web site’s SFTP/FTP host.主机名：您网站的SFTP / FTP主机。
- Port: Your web site host’s SFTP/FTP port (typically SFTP = 22, FTP = 21)端口：您的网站主机的SFTP / FTP端口(通常SFTP = 22，FTP = 21)
- Username and Password: FTP username and password.用户名和密码 ：FTP用户名和密码。
- Deployment Path: The path you’d navigate to before uploading your WordPress theme files. For example, 部署路径：上载WordPress主题文件之前导航到的路径。 例如， public_html/example.com/wp-content/themes/MyTheme, where public_html / example.com / wp-content / themes / MyTheme ，其中MyTheme is the WordPress theme you have committed to GitHub.MyTheme是您已提交给GitHub的WordPress主题。
Click on the save button to continue.
单击保存按钮继续。
Deploy will now test your server connection and if everything works correctly, then it will show you a success message.
部署现在将测试您的服务器连接，如果一切正常，那么它将显示一条成功消息。
You can now click on the Deploy Now button to upload your GitHub files to your website.
现在，您可以单击立即部署按钮将GitHub文件上传到您的网站。
Deploy will show you the details of this deployment. Simply click on the Deploy button at the bottom.
部署将向您显示此部署的详细信息。 只需单击底部的“部署”按钮。
You will now see the progress of deployment. Once Deploy has finished, you will see a success message.
现在，您将看到部署进度。 部署完成后，您将看到成功消息。
You have successfully deployed changes from GitHub to your website using Deploy. Now when you make changes to your WordPress theme on your computer, you need to commit them to GitHub. After that you need to visit Deploy website to start the deployment manually.
您已使用Deploy成功将更改从GitHub部署到网站。 现在，当您在计算机上更改WordPress主题时，需要将它们提交到GitHub。 之后，您需要访问Deploy网站以手动开始部署。
Let’s see how to setup automatic deployment so that any changes you commit to GitHub are automatically deployed to your website.
让我们看看如何设置自动部署，以便将您对GitHub所做的任何更改自动部署到您的网站。
设置自动部署 (Setting Up Automatic Deployment)
First you need to visit your Deploy dashboard and go to Projects page. Click on the name of your project.
首先，您需要访问Deploy仪表板并转到Projects页面。 单击您的项目的名称。
From your project page take the mouse to the Settings menu and then select Servers & Groups.
在项目页面上，将鼠标移到“设置”菜单，然后选择“服务器和组”。
Click on the edit icon next to your server.
单击服务器旁边的编辑图标。
This will bring you to edit server screen. In the right hand column you will find the Automatic deployment settings.
这将带您编辑服务器屏幕。 在右侧列中，您将找到“自动部署”设置。
Make sure that it is turned on. Below that you will see a URL. Copy this URL as you will need it in the next step.
确保已打开。 在其下，您将看到一个URL。 复制此URL，因为下一步将需要它。
Log into your GitHub account in a new browser tab. Click on your repository and then click on Settings. Click on the Webhooks and Services link.
在新的浏览器选项卡中登录您的GitHub帐户。 单击您的存储库，然后单击“设置”。 单击“ Webhooks和服务”链接。
Click on the Add Webhook button.
单击添加Webhook按钮。
Paste the URL you copied from Deploy server settings page in Payload URL field. Select application/x-www-form-urlencoded as the Content type and hit Add webhook.
将您从“部署服务器设置”页面复制的URL粘贴到“有效负载URL”字段中。 选择application / x-www-form-urlencoded作为内容类型，然后单击添加webhook。
That’s all, your GitHub repository will now notify Deploy when there are new changes to your repository. Deploy will then automatically deploy those changes to your website.
就是这样，当您的存储库有新更改时，您的GitHub存储库现在将通知Deploy。 然后，部署将自动将这些更改部署到您的网站。
测试自动部署 (Testing Automatic Deployment)
To test automatic deployment simply make some changes to your WordPress theme repository on your computer.
要测试自动部署，只需对计算机上的WordPress主题存储库进行一些更改。
Open the GitHub desktop app and then commit those changes.
打开GitHub桌面应用程序，然后提交这些更改。
Don’t forget to click on the sync button.
不要忘记单击同步按钮。
Now visit your project on Deploy dashboard. Click on the deployments and you will find your automatic deployment listed there.
现在，在“部署”仪表板上访问您的项目。 单击部署，您将在其中找到自动部署。
That’s all, we hope this article helped you learn how to automatically deploy WordPress theme changes Using GitHub and Deploy. You may also want to see our guide on how to create staging environment for a WordPress site.
仅此而已，我们希望本文能帮助您学习如何使用GitHub和Deploy自动部署WordPress主题更改。 您可能还想查看有关如何为WordPress网站创建过渡环境的指南。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
扫一扫
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
