Deploy your ZEIT's hosted website right from WordPress using Deploy Hooks
Tags: gatsby, wordpress, serverless, php
Published: 2020-04-06 20:35:50

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](https://zeit.co/), 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](https://zeit.co/docs/v2/more/deploy-hooks) 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`).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hy3pglx9tp4tu6sjev1y.png)

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:

```shell
    $ 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:

```json
    {
      "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
    <?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.

```javascript
    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
    <?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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ma3lfvmounhxhhmkyvrl.png)

Hoped this little workaround helped you ✌

Stay safe. Stay home!