Make Static Sites Dynamic with Webhooks and a headless CMS

Webhooks are the secret messengers of the web. Also known as a push api, webhooks spark actions in an if - then situation.

What are Webhooks?

illustration of webhook being connected to infinite things

A typical webhook is made of three parts. The trigger, the destination, and the payload. Usually, a webhook is triggered by some kind of interaction like saving of content into a database or some service watching a condition on the web gets a truthy input. Once triggered, they make a request to an external endpoint on the web. The payload can be any data that was defined by the webhook, most commonly it includes dynamic content from the trigger source.

What can you do with Webhooks?

The most common use case for webhooks is in the context of a CMS is to trigger a static site build. After content is updated, a build tool is notified and it triggers a new build of the website. But webhooks have endless possibility. A webhook could update a calendar entry that new content is ready for review, could publish new content into the CMS itself, could update an external search index any many more possibilities.

Examples of Webhook Workflows in Action

Slack

Editing content as the trigger, Slack notifications as the destination and 'changed content ready for review' as the payload is a great automation for your content team.

Netlify

Netlify's webhook support allows for triggering a git pull from a predefined repo. When content is changed in GraphCMS, it sends a payload to Netlify, which then pulls content from your repo and generates a build. This is known as continous delivery.

Shopify

Trigger an email to be sent to all subscribed users when you publish new pages with a specific url slug, ie /features.

IFTTT, Integromat, Zapier

The possibilities are endless when you connect to one of these three Webhooks as a Service providers. All three of these technologies are great for non-technically savvy and expert developers alike!.

A Webhook ready Template to get Started

This is a basic Gatsbyjs starter template to use as an example. If you fork this, be sure to pay attention to the environment variables such as your GraphCMS API endpoint and token. As your content editor publishes any changes to your structured content such as a new blog post, updating news article or ecommerce product you can have webhooks trigger a new deploy your site. Blazing fast automation is what makes webhooks a fantastic asset to your workflow.

gatsby ecommerce starter screenshot
header of netlify + graphcms section

Setting up Your First Webhook Between Netlify & GraphCMS!

Webhooks are available starting from the basic plan. Webhooks are essential to a modern headless CMS workflow. You will need to set things up on both the trigger and the destination ends. We will be referencing the e-commerce gatsby template if you’d like to follow along. Want a specific example? Join our slack group to get personal help from our developers!

  1. First, inside of Netlify navigate to a site you’ve already imported.
    1. Then Settings > Build and Deploy > Continuous Development > Build Hooks.
    2. Click on Add build hook, name it, and select which branch to deploy. In our case, we will be deploying the master.
replica of what the build hook setting in netlify looks like
  1. Now inside of the GraphCMS web app, navigate to the webhooks tab
    1. Click Create
    2. Add a memorable name and description of your choice
    3. Enter your build hook URL from Netlify
    4. Note that the Headers: Section with Key, and Value is optional and not needed for this configuration of webhooks. If you are working with athenticated APIs, this is where you would add that data.
  2. Try publishing a new book listing to test webhooks in action! If you have any questions, unique situations, or issues, you can contact support here.
replica of what the webhook tab in GraphCMS looks like

Interested in Learning More About Features of GraphCMS?

GraphCMS has all of the most important features of a robust content management system, while also pioneering proprietary features for the era of application content. Learn more in these landing pages all about GraphCMS' features.

Lets work together

Share with your team