Deploy content changes for your Gatsby Drupal site on Netlify with Build Hooks

By shane
Wed, 2019-10-02 23:58
comments
Daily Dose of Drupal Episode #9

Share with Others

In the last episode you learned how to your previously created Gatsby site with Drupal content and to Netlify. In this episode, you learn how to use the Drupal 8 Build Hooks module to trigger automatic rebuilds on your Netlify website. You will learn how to trigger a rebuild when content is saved, when Drupal cron runs, or upon manual request from within your Drupal website.

You will need to download and install the Drupal 8 Build Hooks module just like you would with any other Drupal module.

composer require drupal/build_hooks

Enable the Build Hooks and Build Hooks for Netlify modules.

Build Hooks Modules

There are some permissions that can be set for Build Hooks to determine who can manage the frontend environments and who can trigger deployments. For now we will just keep it for administrators.

Build Hooks Permissions

Go to Admin > Configuration > Build Hooks > Build Hooks Settings. On this page you can configure what entities should be logged. This is important as these “loggable” entities are the entity types that can trigger a rebuild on your Gatsby site. Leaving it at the default will work for our site, but this could vary depending on your needs and if you have other entity types that your Gatsby site uses for content.

Build Hooks Settings

Go to Admin > Configuration > Build Hooks > Frontend Environments and click the Add frontend environment button. In the Netlify section, click the Add new environment button. You now need information from your Netlify site.

Go to the Netlify website and log into your Netlify account. Select your Gatsby site and take note of your Gatsby URL (you will need that for the Drupal form). Click on Settings and under the Build & Deploy section find Build Hooks.

Click the Add Build Hook button.

Add Build Hook

You can give the build hook any name you want, in this example I just called in Content Rebuild. Set it to rebuild your Master branch. Click the Save button.

Build Hooks Configuration

Now take this Build hook URL and the URL for your Netlify site and drop it into the Drupal form. You can set the Label to whatever you want. Copy the API ID from your Netlify site (in the General Settings > Site details) section and drop that in the Drupal form as well. For the Branch name, enter master. For now you can leave the Deployment strategy as Manually only, however, this option is what would allow you to trigger rebuilds on cron run or when content is updated on the site.

Build Hooks Frontend Environment

Now go to an Article and change something. I will just change the title and image of the most recent article, but you could create additional articles or make any changes you want. Once your changes are ready, notice the Frontend environment is listed in your admin menu.

Build Hooks Admin Menu

If you click on the deploy environment you can click the Start a new deployment button.

Build Hooks start Deployment

If you go back to your Netlify site, you will see that a new deploy has been added and the site is rebuilding.

Netlify Build Status

Once it’s finished you can check out your updated Gatsby site!

Note: You don’t have to configure the oauth settings for the Netlify Build Hooks module in order to get this to work. If you want to make your Netlify logs private, then you will need to set up and configure the access token. This is available in the oauth settings on your Netlify account under the Access Token section.