WordPress Continuous Deployment and Version Control with Bitbucket
By: Alexa Green
Tags: Bitbucket, Web Development, WordPress, Version Control, Bitbucket Pipelines

Okay, folks. Time to ‘fess up.

If you are anything like me, you spent the first leg of your WordPress development years “cowboy coding” — that is, making changes wildly on live sites, urgently testing and firing them up with FTP, often resulting in 500 Internal Server Error messages and sitewide breaks all visible to your esteemed visitors.

While this was absolutely thrilling as adrenaline pumped through your fingers, pounding in that forgotten semicolon, on sites with more than 0 visitors (who actually noticed the downtime) this would start to become a problem. If a tree falls and no one is there to hear it, does it make a sound? Depends on the theory of humanity to which you subscribe.

However, if a site crashes and someone is there to see it, they will certainly make a sound.

WordPress Continuous Deployment Done Wrong

Enter staging sites, duplicate WordPress installations (at least in theory) where changes could be made, then made again on the live site once all was confirmed working. While this quieted down visitors, it started to cause us developers to make some noise. Suddenly, we needed to keep track of two sites, ensure that the code is manually synced between them, and test everything again to make sure it is working on the live site. Long, messy lists of “make sure to change this on live” and “make sure to toggle this on the staging site before copying the code over” were nerve-wracking, to say the least. Backups of this system were a nightmare as well — a slew of folders named “my-theme-staging-1” and “my-theme-live-before-menu-restyle-3” and so on.

There had to be a better way, and there was.

There was Git, which gives perfect source control and other features to developers. Using version control for WordPress installations instantly expedited and cleaned up development, as hours were no longer spent backing up in a per-developer system but actually on coding. Changes were saved and I could finally add meaningful messages to my work, worlds of difference from “my-theme-4-v2.”

While the codebase was a lot cleaner, the issue still remained of actual deployments and ensuring the site in question was using the latest code — enter opportunity-for-human-error. Still relying on manual FTP uploads overwriting the previous code didn’t feel great. While other CI/CD services existed, many of them came with a substantial price tag and large amount of setup — server refiguring, relying on yet another service for even the simplest website, learning the other service’s whole “way of doing things” and all the idiosyncrasies that come with it.

While similar setups to this tutorial can be done with GitHub/GitLab and other services, I had put my eggs in the Atlassian basket early on due to their free private repositories (which has only been a recent offering from GitHub). When Bitbucket introduced their Pipelines and Deployments services, it allowed new code to automatically deploy to staging or production sites (or any other site in-between) without reuploading via FTP or using an external service. Devs could now use all of the values of source control in their WordPress development and instantly send those changes to the appropriate destinations with no additional clicks or keystrokes, with the status of everything all visible via one dashboard. This ensures everything stays in sync and, at a glance, lets you know exactly what code each site is running. Plus, the pricing for Bitbucket’s build minutes is incredibly affordable — with 50 minutes free per month and an option for a “Free with Overages” plan.

It took a bit of startup time to work out how to best use branches and other features of source control in this new model and the particulars of the Bitbucket Pipelines setup. Here’s the process I use for starting new WordPress projects. I won’t go into all of the nitty-gritty on setting up git and WordPress installation since great resources for that are just a Google search away. In the end, the content flow will be something like this: