Without a doubt, Gatsby's most powerful feature is being able to pull data from multiple sources and serve that data statically on build time. This creates a blazing fast experience for websites with CMS's behind the scenes, but also creates a complication if you regularly update your website with new content, because you'd need to manually re-build and re-deploy your website so the updated content kicks in.

Thankfully the new technologies available for serverless websites allow us to create easy workarounds for this problem. For example if you have a Gatsby website that serves data from WordPress and it's hosted on ZEIT's Now, we can add a "Deploy Now" button to your WP Admin panel. Here's how:

Creating a Deploy Hook

First we'll need to create a Deploy Hook in our project's settings. Deploy Hooks are unique URL's that allow you to trigger a deployment of a given branch. This is extremely helpful for our purpose, right?

To create a Deploy Hook, go to your project's settings inside ZEIT's dashboard, then inside "GIT Integration" create a new Deploy Hook for your production branch (probably master).

Once you created your Deploy Hook, all it takes to deploy your branch is to make a POST request to the given URL like this:

    $ curl -X POST "your_deploy_hook_url"

Once you made the POST request, the selected branch should start deploying and you should get a response like this:

    {
      "job": {
        "id": "A7OcAEEgNRh61p1VZXE1",
        "state": "PENDING",
        "createdAt": 1564399503217
      }
    }

We're half way there! Now we just need to add a button to the WP Admin panel that makes a POST request to the Deploy Hook.

Add a "Deploy Now" button to the WP Admin

Now we need to add an identifiable button to the WP Admin bar. We can do this by using Wordpress' admin_bar_menu hook. So, in your functions.php file in your theme directory add the following:

    <?php
        // Add a 'Deploy Now' button to WP Admin bar
        function add_deploy_button($wp_admin_bar) {
          $args = array(
            'id' => 'deployButton', // ID of the button added. 
            'title' => 'Deploy Now',
            'href' => '#'
          );

          $wp_admin_bar->add_node($args);
        }

        // WP Hook
        add_action('admin_bar_menu', 'add_deploy_button', 100);
    ?>

Excellent! Now we need to create a JavaScript file inside our theme directory, to do a POST request to our Deploy Hook every time we click the "Deploy Now" button.

    const deployButton = document.querySelector('#wp-admin-bar-deploy-button > a')

    if (deployButton) {
      deployButton.addEventListener('click', (event) => {
        event.preventDefault()

        // To make the POST Request will use
        // the gud-ol jQuery that comes with WordPress
        jQuery.ajax({
          url:
            '', // Our Deploy Hook URL here,
          method: 'POST',
        }).done(() => {
          alert(
            'Your website will be updated shortly. Check in a couple of minutes'
          )
        })
      })
    }

Great we're almost there! Now we just need to include this script in the Admin page. We'll do this by using the admin_enqueue_script WP Hook. Again, inside your functions.php file, add the following:

    <?php
        function add_deploy_script() {
            wp_enqueue_script('deploy_script', get_template_directory_uri() . '/path/to/your/script.js');
        }

        add_action('admin_enqueue_scripts', 'add_deploy_script');
    ?>

Yayyy! We did it! ✨ Now every time you finish adding some content through the WP Admin, all you have to do to deploy your website is click the "Deploy Now" button.

Hoped this little workaround helped you ✌

Stay safe. Stay home!