Jump to main content (press Enter)

Nharox - Front-End Developer

Blog

Trigger GitHub Actions with a Contentful webhook

Published on

I couldn’t find any helpful write-ups on this topic so here’s a quick rundown on how to trigger GitHub Actions with a Contentful webhook when data in Contentful is changed.

Adjust GitHub workflow

First, we need to extend our YAML file (which is usually located in the .github/workflows folder at the root of your project) and tell it to listen to the repository_dispatch event. This way we can run the workflow when it is triggered by a webhook event.

name: Deploy

on:
  push:
    branches:
      - master
+ repository_dispatch:
+   types: [contentful.deploy]

jobs: ...

The types array includes the name of the incoming webhook payload which we’ll set up down below.

Create a new Contentful webhook

Next up we need to create our webhook in Contentful. To do so, head over to your Contentful space, click on Settings and select Webhooks in the dropdown.

On the following page, click on the Add Webhook button located in the upper right corner. After that, you’ll be automatically redirected to the settings of your newly created hook.

Setup the webhook

Details & Triggers

Screenshot of the Details and Triggers sections

Name the hook whatever you want it to. For the URL field, select POST as a method and use the following URL:

https://api.github.com/repos/<User Name>/<Repository Name>/dispatches

Replace the <User Name> and <Repository Name> with your information.

We don’t want to trigger our build by every event. Select the second radio button and activate these events for Entry:

  • Publish
  • Unpublish
  • Delete

Headers

Screenshot of the Headers section

For our webhook to work, we need to add two custom headers and one secret header:

TypeKeyValue
CustomAcceptapplication/vnd.github.v3+json
CustomUser-AgentContentful Webhook
SecretAuthorizationBearer <GitHub Personal Access Token>

Read the article on how to create a new personal access token on the official GitHub docs. The generated token only needs the repo scope granted.

The Content type select can be left at its default value.

Payload

Screenshot of the Payload section

Finally, all that’s left to do is to customize the webhook payload. Again, select the second radio button and paste the following JSON:

{
  "event_type": "contentful.deploy"
}

Please note that the event_type has the value we defined up top in our YAML file.

Hit save and try if everything works by changing the data of one of your Contentful entries.