May 19, 2022 . 8 MIN READ
GitHub — along with Git itself — helps you implement version control for your codebase, which can be really handy for WordPress development and project collaboration. Additionally, GitHub Pages provides a convenient free hosting space for a WordPress site, as long as you’re ok with using a static WordPress approach.
There are a lot of ways in which a WordPress GitHub integration can be helpful. But if you aren’t a GitHub power user, you might not be sure where to start when it comes to GitHub and WordPress.
That’s what this post is here for. We’ll review two ways that you can set up a WordPress GitHub integration:
Let’s get started with GitHub for WordPress development.
If you want to use GitHub for WordPress development, you’ll typically want to focus on two areas:
Using GitHub to manage the codebase for your entire site usually isn’t optimal for a few reasons:
However, it can be very helpful to use GitHub to manage your WordPress site’s theme and plugins, especially if you’re using custom themes and plugins.
You can manage the codebase of your WordPress themes and plugins on GitHub and then deploy directly from GitHub to your live WordPress site.
Here’s a step-by-step guide for how to set it up.
To get started, set up a local WordPress development site. This is the site where you’ll work on your projects and make changes. Then, you’ll version control and commit those changes using Git and GitHub.
To create your local development site, you have a number of options.
First, you can use one of the WordPress-specific development tools. Here are three popular options:
Second, you can use a general local development tool such as one of the following:
For this example, we’ll use Local as it makes it very easy to spin up a new WordPress site.
Next, you’ll need to register for a GitHub account and then install Git on your computer.
If you’re comfortable working from the command line, you can just install the latest version of Git and go from there. But if you don’t like using the command line, we recommend installing the GitHub Desktop client instead, as it will give you a visual interface to work with Git.
For our tutorial, we’re going to use GitHub Desktop as it’s more accessible to most users, but the same basic steps apply if you’re working from the command line.
When you open GitHub Desktop, you’ll be prompted to log in to your GitHub account. Then, you should see the desktop client dashboard, like in the example below.
To create a new repository, click Create a New Repository on your hard drive in the GitHub Desktop client.
Give it a name that matches the folder of the theme or plugin that you’re working on. Then, under Local path, enter the path to the theme or plugin parent folder on your local WordPress site. Essentially, you’ll be creating a repository for this specific theme or plugin so that you can easily manage your work.
For this example, we’ll set up a repository for the default Twenty Twenty-One theme. It might look like this:
You’ll now see all of the theme’s files in your repository and you can make changes using your favorite code editor.
You can also easily track changes using the GitHub Desktop client, like in this example.
To publish your local repository to GitHub, you can click Publish repository at the top of the GitHub Desktop client. This will open a prompt where you can configure a few details, like the ones shown below.
After a short wait, your code will be published on GitHub.
For future commits, you can use the Commit button in GitHub Desktop. Then, you can click Push origin to push those changes to your GitHub-hosted repository.
At this point, we’ve covered most of the puzzle for integrating WordPress and GitHub. But what if you want to deploy your version-controlled themes and plugins from GitHub to your live WordPress site?
Well, one option is to just manually deploy when needed, which might work fine if you don’t update that often.
However, to make this process as simple as possible, you can use the freemium WP Pusher plugin. WP Pusher lets you deploy themes and plugins from GitHub just as easily as installing and updating themes and plugins from WordPress.org.
WP Pusher is 100% free to deploy themes and plugins from public GitHub repositories. However, if you want to deploy from private repositories, you’ll need one of the paid plans. These plans start at $99 for use on up to five sites and come with a 30-day money-back guarantee.
If you want to see if it’s right for you, you can test it for free by deploying from a public repository and then decide if you want to pay for the private repository support.
Here’s a quick guide on how to use WP Pusher for GitHub WordPress theme and plugin deployments.
To begin, download and install the WP Pusher plugin on the site where you want to use GitHub to deploy WordPress themes and/or plugins.
Once you’ve activated the plugin, go to WP Pusher → Settings → GitHub and click the Obtain a GitHub token button.
In the popup, authorize WP Pusher to access your GitHub repositories. Then:
Next, go to WP Pusher → Install Plugin or WP Pusher → Install Theme, depending on the type of extension that you want to install. For this example, we’re installing a theme.
Then, enter the following information:
Then, click the Install theme button.
And that’s it. The theme or plugin will now show up in the normal theme or plugin areas. You can easily update an extension in the future much like you update plugins and themes from WordPress.org. Just go to WP Pusher → Plugins or WP Pusher → Themes, respectively.
The second option for integrating WordPress with GitHub is to convert your WordPress site to a static HTML site and deploy it to GitHub Pages. With this GitHub Pages WordPress connection, you can essentially host a static WordPress site for free.
Of course, because you’re converting WordPress into a static site, you’ll miss out on a lot of the useful dynamic functionality that WordPress offers. But for simple blogs or portfolio sites, this can be a really nifty setup that doesn’t cost a single penny.
Here’s a quick guide on how it works.
To begin, create a GitHub Pages repository to host your static WordPress site. You can follow the GitHub Pages quickstart guide if you’re not sure what to do.
Once you’ve done that, you’ll want to create an offline clone of your repository. For the simplest way to do this, use GitHub desktop. (You can check out this tutorial on setting up GitHub Desktop with GitHub Pages.)
Next, you’ll need to create the WordPress site that you’ll convert into static HTML and deploy to GitHub Pages. This is not the website that users will visit, but it is where you’ll manage your content and design.
The easiest option is to host this site locally using a tool such as Local, DevKinsta, or XAMPP. Or, you can also create the site on web hosting so that you can access it anywhere — just make sure to make it private so that visitors can’t access this version of your site.
Once you’ve installed your site, you should set up the design and add all of your content.
Next, you’ll need to convert your WordPress site to static HTML. The best option here is Patrick Posner’s free Simply Static plugin.
The free version of the plugin will work if you’re fine with manually deploying your site’s HTML to GitHub Pages, while the premium version supports automatic deployment to GitHub Pages starting at $100.
Once you activate the plugin, go to Simply Static → Settings and enter the following information:
Now, go to Simply Static → Generate and click the Generate Static Files button. The plugin will export your site as static HTML to your locally hosted repository. It will also rewrite URLs to make sure they’re working.
Once the export finishes, it should automatically show up in your local GitHub Pages repository.
To finish, you can publish the local repository to your GitHub Pages repository to make your site live. If you’re using GitHub Desktop, all you need to do is click Push Origin to make your changes live.
Whenever you make changes to your site, you’ll need to repeat steps #3 and #4 again. Or, you can purchase the premium version of Simply Static to simplify deployments to GitHub Pages.
Whether you want to simplify your WordPress development workflows or host a static WordPress site on GitHub Pages, learning how to set up a WordPress GitHub integration has its benefits.
More advanced users might prefer to use Git from the command line, but the GitHub Desktop client provides an easy way for even non-technical users to use GitHub to manage their WordPress sites.
Set up your WordPress site with GitHub today and you’ll be enjoying the power of GitHub’s version control and collaboration features in no time.
Reference:
https://blog.hubspot.com/website/wordpress-github-integration
