This article is a guide for implementing Continuous Delivery (CD) in your WordPress MVC project using DeployBot‘s automated deployment service.

This is ideal for custom private themes, child themes or plugins that are in constant development.


Requirements

  • Repository: The source code of the project needs to be located in a DeployBot’s supported repository service, like Github or Bitbucket.
  • Repository files: The repository should only contain your WordPress MVC files, it shouldn’t include all the WordPress files (this is a bad practice as it might break WordPress upgrade/update system).

Project setup

Upon v1.0.3 this step is no longer needed.
SKIP TO > WORDPRESS SETUP

The project will need an additional Gulp deployment task, which is the one that will use DeployBot to compile, compress and clean the project on their servers.

Run the following command to download this additional task:

npm install gulp-wpmvc-deploybot -save

Gulpfile.js

Inside your project’s gulpfile.js, add the following at the beginning of the file, where variables are initialized:

var deploybot = require('gulp-wpmvc-deploybot');

Then add the following after wpmvc() function is called:

wpmvc(gulp, config);
// Deploybot right after wpmvc()
deploybot(gulp, config);

Deploybot task

The deploybot task will be added to your project. When this task is called, instead of generating a ZIP file, the built project will be generated at [project path]/builds/deploybot.


WordPress setup

This step is optional. You can opt to configure maintenance webhooks to allow DeployBot to trigger (enable or disable) WordPress maintenance mode.

To do this, copy and paste the file wp-maintenance-webhook.php into the root of your WordPress.

Read the following documentation to understand how to edit this file in order to configure the authentication credentials and how to trigger its webhooks.


DeployBot setup

The following steps are for Web Application and Files servers only.


Option 1: Atomic SFTP

Recommended

We recommend to use this option if your hosting supports it. It is faster and reliable.

Requirements

  • Bash Shell: Your SFTP user should have SSH and have shell access. If your hosting does not support this, use option 2.

Section: General settings

Create a new directory inside your server, where DeployBot will upload the deployment files. It shouldn’t be inside /wp-content. Optionally, if this directory is accessible via the web, it is recommended to add a .htaccess file to block it.

Configure your server’s path to this directory in the “Application path” input.

Section: Compile, compress or minimize your code

From the list of servers, select one that supports NodeJS version 9 or lower. And in the commands editor add the following:

# Create a shared vendor directory and symlink it to the project root
echo "(1) Prepare deployment folders..."
mkdir -p $SHARED/vendor
ln -s $SHARED/vendor $RELEASE/vendor
# Dependencies
echo "(2) Downloading dependencies..."
composer install --no-dev
npm install
# Build
echo "(3) Building..."
gulp deploy
# if < v1.0.3 then gulp deploybot
echo "(4) BUILT FINISHED"
# Change directory on advance options
# source path to:
# /builds/deploy

Section: Run commands after new version becomes active

Once the new version has been uploaded and has been become active. We need to tell DeployBot to copy the new release and replace the old one inside our WordPress setup.

# Rebase to your server's root
cd /[my-server-path]
# Enable maintenance webhook
wget https://mydomain.com/wp-maintenance-webhook.php.... 2>/dev/null &
# Remove old files
 rm -r [wordpress-path]/wp-content/themes/[my-theme]/*
# Copy new files
 cp -r deploybot/[my-theme]/current/* [wordpress-path]/wp-content/themes/[my-theme]

Replace:

  • [my-server-path]: With a path within your server, where you can access both, your WordPress setup and the deploybot directory created.
  • [wordpress-path]: Path to WordPress.
  • [my-theme]: The name of your project. Notices that if it is a plugin, the path to use instead should be wp-content/plugins.

Section: Trigger a webhook after deployment is done

Optionally, place the webhook to disable the maintenance mode.

Section: Advanced options

Make sure the source path in “Advance options” points to /builds/deploybot. This is the built folder generated by Gulp.

Upon v1.0.3 source path should be /builds/deploy.


Option 2: SFTP or FTP (files)

Take into consideration

Take into consideration that this option is way slower because of how files are transferred. Just use it if you for sure can’t use option 1.

Requirements

  • Maintenance webhooks: The deployment process can take several minutes, during this process, files are being replaced, created and deleted by DeployBot, because of this, your WordPress site to fail and display errors until the process is finished. To avoid this, it is better if the webhooks described above are configured, so your visitors are presented with the maintenance notice instead of errors.

Section: General settings

Configure your project’s path within your WordPress set up in the “Destination path” input.

Section: Trigger a webhook before deployment begins and Trigger a webhook after deployment is done

Configure the maintenance webhooks respectively.

Section: Compile, compress or minimize your code

From the list of servers, select one that supports NodeJS version 9 or lower. And in the commands editor add the following:

# Create a shared vendor directory and symlink it to the project root
echo "(1) Prepare deployment folders..."
mkdir -p $SHARED/vendor
ln -s $SHARED/vendor $RELEASE/vendor
# Dependencies
echo "(2) Downloading dependencies..."
composer install --no-dev
npm install
# Build
echo "(3) Building..."
gulp deploy
echo "(4) BUILT FINISHED"
# Change directory on advance options
# source path to:
# /builds/deploybot

Section: Advanced options

Make sure the source path in “Advance options” points to /builds/deploybot. This is the built folder generated by Gulp.