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.

UPDATED: Guide edited to align it self to WordPress MVC >= v1.0.4.

---

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 knowledge

WordPress MVC comes with a deployment task out-of-the-box.

gulp deploy

The command above will build your project and release it under the path [your-project-folder]/builds/deploy.

DeployBot needs to build the project using this command and to copy the deployment files into a target destination.

---

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

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 10 or above. 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 --no-plugins
npm install
# Build
echo "(3) Building..."
gulp deploy
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/deploy. This is the built folder generated by Gulp.

---

Option 2: SFTP or FTP (files)

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 10 or above. 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/deploy. This is the built folder generated by Gulp.