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.
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.
The process is actually pretty simple which is the whole idea. This is what we need to do.
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!