Lucas Sá

Software Engineer

Trigger github actions workflow with sanity webhook

Integrate GitHub Actions with a webhook from Sanity.io to automate workflows, enabling seamless triggers for streamlined development processes.

main image title

Introduction

In this tutorial, we're delving into the transformative potential of syncing content updates in your website by leveraging Sanity.io's webhook feature, a game-changer in automating workflows. With the ability to trigger builds after every change, this feature ensures seamless synchronization of content, eliminating manual interventions and boosting efficiency.

Additionally, we'll dive into the intricacies of triggering workflows using the GitHub API that for this projects we will use the workflow that build this website.

repository

Step 1 - configure workflow

We should add a trigger to watch the repository dispatchs repository_dispatch

name: Website deploy 
on:
  workflow_call:
  workflow_dispatch:
  repository_dispatch:
  
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 20.x  

      - name: Install, build, and upload your site
        uses: withastro/action@v1

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v3

Step 2 - GH auth token

On this step you will need to create on Github website:
https://github.com/settings/tokens

Note: the unique scope that you will need will be the workflow scope.

Then save this token for the next step.

Step 3 - Sanity webhook

On your sanity project you will need to go into API tab and then select Webhooks on the side nav on the left, then click on the button Create webhook.

Below you can see the needed fields filled.

Notes

  • The url field should be populated with the owner of the repository and the respository like this: https://api.github.com/repos/:owner/:repo/dispatches
  • On HTTP Headers replace the authorization header value with your token prefixed by the string "Bearer " separeated by space.
  • The projections is where you can edit the body payload of POST requests. For github actions integration is required to pass the event_type key.

Result

Notification after publish the document.

Workflow running after publish document.

Bibliography