How to Deploy a WordPress Site on SpinupWP Using Branch

When we launched SpinupWP we knew people would want to deploy their WordPress sites using Git. So we launched with a push to deploy feature that allows you to automatically deploy your sites from Git when changes are pushed to the repository. As part of the deployment, you can also run a post-deployment script on the server which might do a range of things (e.g. installing dependencies, compiling frontend assets, running a WP-CLI command to clear the page cache, etc). This type of workflow is normally known as Continuous Integration (CI) or Continuous Delivery (CD).

There might come a time when you want more control over your deployment process or you might need some more advanced features. In this case, a more advanced CI/CD tool can be used. We use a range of these tools at Delicious Brains. For example, we use Buddy to deploy the deliciousbrains.com site and the SpinupWP app, we use Travis CI to run the tests for our WordPress products and we use Chipper CI to run the tests for the SpinupWP app.

Peter Suhm, the creator of the popular WP Pusher plugin, recently launched a new CI tool specifically for WordPress called Branch. In its own words, Branch “helps you build, test and deploy your WordPress code. It’s continuous integration and deployment built for WordPress”.

In this article, we’re going to look at how you might use Branch to deploy a WordPress site to a SpinupWP server.

Set up the Site

First, we need to provision a server and set up a site in SpinupWP. While creating the site make sure you select “Don’t Install Any Files” on the Installation step as we don’t want SpinupWP to create any files for us (we’ll do that later when we deploy using Branch).

Also, make sure you create a database and leave full page caching enabled.

Once the site has been created, you’ll need to update the Public Folder setting to point to /public. We’re going to use our WordPress site template for SpinupWP hosted on GitHub as the source for our site and it uses a /public folder as the web root.

Finally, under SFTP & SSH make sure you add your SSH key to the site user as you’ll need to SSH to the server as part of the Branch setup. Your site should now be ready for a Branch deployment.

Set up Branch

Branch currently offers up to 3 projects and 20 deployments per month for free which is a great way to get started and test out Branch. So head on over and sign up for an account at branchci.com. You’ll need a GitHub, Bitbucket or GitLab account to use Branch.

After signing up, you’ll be prompted to create a new WordPress project. First, you’ll need to select a Git repository you want to deploy code from. For this example, I’m going to use our WordPress site template for SpinupWP directly but in most cases, you would have your own WordPress site set up (or you could clone this repo and tweak it for your use).

Before adding any build steps, we need to add the project SSH key to our SpinupWP server so that Branch can communicate with it. Copy and paste the commands from the Branch project settings.

Then you’ll need to SSH to your server as the site user and run the copied commands to add the Branch SSH public key to your ~/.ssh/authorized_keys file.

Now go back to the Steps tab in Branch and let’s add our first build step. We’re going to need 4 build steps in Branch to get our site deployed and working properly.

Step 1 – Install PHP dependencies with Composer

One of the nice features of Branch is that it comes with a bunch of predefined tasks called “recipes”. These predefined scripts are common tasks that you often need to perform when deploying a site (e.g. compiling assets, installing dependencies, etc). Our template uses Composer to manage WordPress core, themes and plugins. So in this case, we can simply choose the Install PHP dependencies with Composer recipe from the dropdown.

No changes to the commands are required.

Step 2 – Set up the .env file

Our template uses a .env file for configuration variables so we’ll need to set that up next. But before we do that, we need to set up an environment variable in Branch to securely store our database password. Any kind of sensitive information such as passwords and API keys should be stored securely like this. Head to the Environment tab in Branch and add a variable called DB_PASSWORD.

Back on the Steps tab, let’s add a new step. In this step, we’re going to run some commands to copy .env.example to .env and then replace some of the variables in .env with their correct values. As we’re just running simple Linux commands we can pick Alpine Docker as our environment (Alpine is just a tiny Linux distro).

Note that we’re using ${DB_PASSWORD} to input our Branch environment variable that we just created.

Step 3 – Deploy the files with rsync

Now that our site has all of the correct files we can use rsync to deploy the files to our server. Branch has a Deploy with RSync recipe that we can use as a base for this step. You’ll need to update the username, host and path to be your SpinupWP site user, server IP address and site path (e.g. /sites/example.com/files) respectively.

Note that in this step I’m also removing any files we don’t need on the server before we deploy them. For example, this might include the .git directory or a node_modules directory.

Step 4 – Purge the page cache

Now that our files have been deployed we need to purge the page cache for our site in SpinupWP. We can achieve this by SSHing to our server and running the wp spinupwp cache purge-site WP-CLI command. Select the SSH environment and enter the SSH command.

Run a Build

With all of our build steps correctly configured in Branch it’s time to run our first build to deploy our site. Click the Run Build button.

You’ll be taken to a build page where you can see the progress of your build as the steps are completed.

Once the build has finished it will be either “FAILED” or “SUCCEEDED” and you’ll be able to do things like run the build again or download the logs of the build.

At this point, you should be able to load your site successfully! From now on, every time you push code changes to your Git repository Branch will detect the push and automatically run the build to deploy your site.

Over to You

Hopefully, you can see the power and flexibility of using a tool like Branch when it comes to deploying WordPress sites. It can, of course, do a lot more than what I’ve covered in this article. For example, it has recipes for:

  • Compiling frontend assets with Yarn/NPM
  • Running Gulp tasks
  • Testing for valid WordPress coding standards
  • Sending a webhook to Zapier
  • Plus many more

As Branch is still in its infancy it lacks some of the features that you might find with more established CI/CD tools but I think Peter is off to a great start here. Two things I’d love to see soon are more documentation, particularly around environments and environment variables, and being able to see build step logs for each task inline (preferably in real-time). Branch is being actively developed so I’m sure it will continue to improve over time.

Do you use CI/CD tools with WordPress? Got any WordPress deployment tips? Let us know in the comments.

Author

Gilbert Pellegrom

Gilbert loves to build software. From jQuery scripts to WordPress plugins to full blown SaaS apps, Gilbert has been creating elegant software his whole career. Probably most famous for creating the Nivo Slider.

100% No-Risk 30-Day Money Back Guarantee

If for any reason you are not happy with our product or service, simply let us know within 30 days of your purchase and we'll refund 100% of your money. No questions asked.