Activating Webhooks for automatic updates

Yesterday I learned something new and amazing and I want to tell you all about it. Webhooks are a clever way to automate your content updates, and they’re tremendously easy to implement in Contentful. In fact, it’s one of the first things you should do once you get your headless content management system up and running.

But before I get giddy with excitement, I should take a step back and explain what a webhook is. Webhooks are used to notify your hosting provider when content has been revised in your CMS. It’s incredibly useful because without them, you’d have to trigger your deployment manually every time you publish a piece of content.

Your hosting provider is usually set up for automatic deployments when you change a line of code in your GitHub repo. That’s great and all, but the provider needs further instruction when it comes to pushing changes in the content itself. Webhooks are the solution.

So from within Contentful, all you have to do is navigate to your space, configure your webhook by specifying a URL, and your system will send an HTTP POST request whenever something happens to your content. This, my friends, is a webhook in action.

Let’s run through some examples of activating webhooks with three different hosting providers. Depending on your hosting provider, there are some other nifty features you can activate in addition. We’ll touch on those as we go.

Activating a webhook with Netlify

Let’s start with Netlify. Documentation is here for the full reference. From within your Contentful space, navigate to Settings > Webhooks and the page will most likely be empty if you don’t have any webhooks in place.

Click on the templates in the sidebar and a popup will, er, pop up and prompt you to pick a hosting provider from the list.

See the empty field for the “Netlify build hook URL”? You have to dig that out of your Netlify control panel. Head over there and navigate to Site settings > Build & deploy > Continuous deployment > Build hooks.

When you click on “Add build hook”, give it a name and the branch of your build in GitHub (usually “main” or “master”) and then you’ll generate a unique URL. Copy and paste this build hook URL into the other Contentful pane, save, and you’re off to the races.

Activating a webhook with Vercel

Moving on to Vercel. The documentation is here for the full process. Configuring a webhook with this provider is more or less the same so we don’t need to belabor the point. Choose the template in Contentful as above, and generate the URL in your Vercel settings pane.

Activating a webhook with Gatsby Cloud

This process is slightly different, in that we’re going to take a trip to the Contentful Marketplace and make use of the official Gatsby Cloud integration.

Why? Two reasons. Firstly, it’s push button simple; you won’t have to copy and paste URLs across, simple navigate some dropdowns and then the app hops between your Contentful space and Gatsby Cloud accounts and pulls in all the necessary information. The image below shows you what it looks like, except in your case the fields will be prepopulated.

Secondly, and this is a bonus, it also sets up previews in your Contentful space. This is a phase for each of my web projects I know that I have to do but haven’t got around to configuration yet (another post for another day). The Gatsby Cloud app takes care of that for you, so for this one Space at least I now have Previews up and running. Yay!

Things to note

You can verify that the build hooks are working on the CMS side by checking the activity logs under each build hook. If the timestamps reflect your recent activities, then all is well. You can confirm the same with your hosting provider by checking the build activity pane.

One other thing: You have to ensure that the name of your environments are correctly reflected in the webhook settings, otherwise they won’t sync up.

If you haven’t messed around with your environments settings at all then this shouldn’t be a problem. For some silly reason, I created a timestamped environment in one of my spaces and the name wasn’t the same in my settings.

Keep things simple

There we are. Three ways to implement webhooks in Contentful. It’s definitely a topic worth digging into because this kind of automation streamlines the production process and saves you a lot of time in the long run.

I hope these instructions were simple and straightforward to follow. And if not, then I take solace in the fact that there are copious resources on the magical interwebs that will put you on the path to enlightment. Until next time!