Homebrew CI/CD with GitHub Updater

Continuous Integrations (CI) is something that is pretty essential in WordPress theme and plugin development workflow, especially when building the theme out from a build system rather than in browser using a page builder.

I've recently been using Buddy (https://buddy.works) on a project and have also recently played around with AWS Code Pipeline. I really liked Buddy but when I take into account I'd need the Unlimited plan to maintain all of my clients themes and plugins, and after the initial build each project would only get used a couple of times a month I couldn't justify the cost. AWS Code Pipeline/Code Deploy (https://aws.amazon.com/codepipeline/)was great but a PITA to configure and after spending a few hours reading the docs and getting a system set up to work with my build system, I felt my time could be best spent somewhere else. I will however revisit it at some point in the future. I also don't really need to run the build on a remote system as I'm generally doing all of the code for a project solo, so a lot of these other systems are simply overkill for what I need.

Sometimes the simple solution is the best, and hopefully it helps someone out to see what I've come up with.

Before I go on I'll just outline my requirements, I'm sure it is the same for many WordPress developers.

  • I'm using a build process that compiles to a dist directory.
  • I have a git repo for the entire build and then another repo for the compiled project.
  • Throughout the build process it might deploy many times per day but after the build it will only deploy a couple of times a month for maintenance/feature updates etc.
  • I need a way of rolling out updates that is client friendly and done the way they are used to with other themes and plugins in the case that they do their own site management.
  • I'll also note that I'm generally the only one working on the code side of the project, so I'm not taking into account the needs of teams.

GitHub Updater

If you haven't checked out GitHub Updater, go and do it now. https://github.com/afragen/github-updater

It allows you update WordPress themes and plugins hosted on GitHub using the native WordPress updater. Even private repos. I've been using this for a while now as a way of distributing my themes and plugins to clients.

I won't go into too much detail on GitHub updater, but it is really easy to use and there is some great documentation on the repo. If you're building WordPress themes or plugins you'll definitely find many ways it can make your life easier.

Other Requirements

  • You'll need WP CLI on the server
  • You'll also need SSH access to the server
  • You'll also need node js and npm, but chances are if you're building plugins and themes from scratch you'll have that already.
  • I'll also assume you are running a build process that compiles to a dist directory.
  • You've got your dist directory hooked up to GitHub or similar.

The Process

The process is actually pretty simple which is the whole idea. This is what we need to do.

  1. Copy the dist folder to the directory housing the distribution repo.
  2. Add/Commit/Push the distribution repo to GitHub
  3. Run WPCLI via SSH on the staging or production server to clear the GitHub Updater Cache and update the theme.

Putting it together

Once you've got GitHub updater set up properly check you have the GitHub Theme URI tag and the version in the themes style.css. GitHub updater checks the theme version to determine whether it should pull an update or not. Also make sure you leave off the .git extension for the theme URI. Your style.css will look something like :

/*
Theme Name: My Aweome Theme
Author: Me
Author URI: https://mysite
Description: My Custom Theme
Version: 1.2.3
Text Domain: mytextdomain
GitHub Theme URI: cmbibby/my-theme
*/

Then we'll create a bash script to run our commands. I've just called this script deploy.sh

#!/usr/bin/env bash
echo "=== Starting Deploy ==="
cp -R dist/* ~/my-theme-dist
cd ~/my-theme-dist
git add -A
git commit -m update
git push
echo "=== Finished Deploy Executing Remote Update ==="
ssh me@myservername.com "cd /var/www/websiteaddress/htdocs && wp github-updater cache delete && wp theme update my-theme-name"
echo "== Finished Remote Update =="

If you don't want to clear the GitHub updater cache you can leave that out and just enable automatic updates on the theme in WordPress or manage it through MainWP/ManageWP if you use that. However for staging you won't want to wait 12 hours for it to check for updates.

Next you just need to make deploy.sh executable (chmod +x)

Then create a NPM command to run your build and then the deploy script, which is as simple as adding the following deploy command in your package.json

"scripts": {
    "deploy" : "gulp compile && ./deploy.sh"
  },

You can see here my deploy is running my gulp compile task and then running the deploy script.

Simple. easy, does the job and most of all uncomplicated with not too many moving parts!

Let's talk

Find out how I can help you with your Wordpress project.
  • This field is for validation purposes and should be left unchanged.

Services

Info

Menu

Connect