Learn how to re-deploy your Gatsby App to AWS from a Headless WordPress install using Github Actions

For a while, our content editors at Postman had to log into GitHub and rebuild the Gatsby app every time they made a change or published a new blog post to the company’s WordPress. As you can imagine, this became very time consuming and wasn’t the most efficient use of our team’s time.

To remedy this, I decided to sit down and write a PHP plugin for our WordPress Admin Dashboard, in order to enable our content writers to re-publish their changes from within our headless CMS.

We used WPGraphQL to create a GraphQL layer from our WordPress content and query our data via the gatsby-source-graphql plugin to our Gatsby App. The resulting solution allowed our blog to be more secure, faster, and future proof.

The plugin creates Nodes in Gatsby to turn the WordPress Data into pages. This results in the App updating its content at build time. If you want to know more, here is an in-depth explanation of build time data fetching with Gatsby .

This is a step-by-step tutorial to show you how to create a custom WordPress plugin that allows content editors to rebuild their Gatsby App via manually rerunning GitHub Actions from the WordPress admin dashboard.

When the plugin is installed, you will be able to rebuild and publish your Gatsby app to AWS/S3 by a click of a button in the Wordpress admin Dashboard.

The Workflow

Here is an overview of what we will accomplish:

• Create a folder containing one PHP file
• Hook into WordPress actions to create admin dashboard menu item
• Create a button with onClick to POST to GitHub Actions API to re-publish the Gatsby App to AWS/S3
• Create a personal token in GitHub to use for GitHub Actions API authorization
• Create zip file of plugin folder, upload to wordpress and activate

Let’s get started

To begin, create a new folder called deploy-plugin within your favorite directory on your computer, and create a PHP file called deploy-plugin.php within that directory. Here’s an example of the commands to run in your terminal:

$ mkdir deploy-plugin
$ cd deploy-plugin
$ touch deploy-plugin.php

I then proceeded to write my code in Vim, a code editor that you can open from your terminal. I am relatively new to Vim so it was fun using a different text editor. If you’d prefer to use another IDE, feel free to skip to the next section.

$ vi deploy-plugin.php

NOTE: Here is a great tutorial on how to get started with Vim if you’re interested in learning more.

It’s recommended to activate syntax highlighting in Vim by typing:

$ :syntax on

Now you can press i for insert to start typing code in your PHP file.

Write the Plugin in PHP

As a starting point, WordPress requires information at the top of the file to recognize the file as a plugin. Copy and paste the following into your editor:

<?php
/*
Plugin Name: Deploy plugin
Description: A deploy plugin to rerun github actions
Author: Christina Hastenrath
Version: 0.1
*/

// code here

?>

NOTE: Do not create an empty last line. This can cause an error in WordPress when activating the uploaded plugin.

All preceding code will replace the _// code here_ line above.

Create a New Admin Dashboard Button

We wanted our content editors to have easy accessibility to the blog deployment, so I decided to create a menu item in the admin console. Thankfully, WordPress makes this option easy to implement by creating actions that we can hook into.

The first step is to hook into the action that creates the admin menu. We do this like so:

add_action('admin_menu', 'test_plugin_setup_menu');

test_plugin_setup_menu is the function that we want to run when hooking into the admin_menu action.

Copy and paste this function below the hook we just added:

function test_plugin_setup_menu(){
        add_menu_page( 'Deploy Plugin Page', 'Deploy Plugin', 'manage_options', 'deploy-plugin', 'deploy_init' );
}

Let’s go through every input of the test_plugin_setup_menu function to get a better understanding. WordPress runs special functions called “actions” at certain points in its core. You can hook into these actions to modify either the behavior or output of WordPress.

In order to create a menu item in the WordPress admin dashboard, we have to hook into the add_menu_page() action and add the required parameters. Here is a description of the parameters the add_menu_page() function requires:

add_menu_page(‘Title of options Page’, ‘label for the admin panel’, ‘access which users can access’, ‘slug of plugin’, ‘name of function’)

Next we’ll define the deploy_init function to print out HTML to our menu item page:

function deploy_init(){
?>
        <h1>ReRun the Blog</h1>
        <h2>Publish to Beta</h2>
        <form method="post">
                <input type="submit" class="button" name="button1" value="Beta"/>
        </form>

        <h2>Publish to Production</h2>
        <form method="post">
                <input type="submit" class="button" name="button2" value="Production"/>
        </form>
        <p>You can check the status of the publishing here <span><a href="https://github.com/<username>/<repo>/actions">Github Actions</a></span></p>

<?php
}

NOTE: Be sure to replace the GitHub link with your _<username>_ and _<repo>_.

#wordpress #aws #github #gatsby #php