Automating content updates from Sanity Studio to Vercel using webhooks

5 replies
Last updated: Jun 5, 2024
Hi, Im using Sanity studio, Astro & Vercel for deployments.
If I edit my content in Sanity studio, my site content doesn't seem to update unless I trigger a deployment manually in Vercel.
Is there any way to automate this process so when I update content in Sanity studio and publish my changes the frontend is automatically updated?

Ive found a few articles on Google but none seem to fully automate the process.
AI Update

Good news! You can definitely automate this process. When using Astro with Vercel and Sanity, you have two main approaches to automatically update your site when content changes:

Sanity Functions are the modern, recommended way to handle this. They're serverless functions that run within Sanity's infrastructure and can trigger actions when your content changes. The big advantage here is everything stays within the Sanity ecosystem - no external hosting needed, automatic scaling, and better security.

You can set up a Function that listens for content changes and triggers a Vercel deployment. This requires:

  • Defining a function in sanity.blueprint.ts that responds to document change events
  • Using the function to call Vercel's deploy hook URL when content is published
  • No external server management needed

2. Vercel Deploy Hooks (Traditional Approach)

This is the more established method and works great for Astro sites. Here's how to set it up:

Step 1: Create a Deploy Hook in Vercel

  • Go to your Vercel project settings
  • Navigate to the "Git" tab
  • Create a new Deploy Hook (you'll get a unique URL)

Step 2: Set up a webhook in Sanity

  • In your Sanity project settings (manage.sanity.io)
  • Go to API β†’ Webhooks
  • Create a new webhook pointing to your Vercel Deploy Hook URL
  • Configure it to trigger on document changes (publishes, updates, etc.)

Now whenever you publish content in Sanity Studio, it will automatically trigger a new Vercel deployment. The Vercel integration with Sanity also offers dashboard widgets to view recent deployments directly from Sanity.

Important Note About Astro & ISR

Unlike Next.js, Astro doesn't support Incremental Static Regeneration (ISR) or on-demand revalidation on Vercel in the traditional sense. Astro is primarily a static site generator, so you need full rebuilds to see content changes. That's why the webhook β†’ deploy hook approach is the standard solution for Astro sites.

If you need more real-time updates without full rebuilds, you could explore Astro's server-side rendering (SSR) mode with the Vercel adapter, but that changes your deployment architecture significantly.

The webhook approach is battle-tested and works reliably - once set up, your content changes will automatically trigger deployments without any manual intervention!

You can add a webhook which will trigger a rebuild, or you can use SSR with Astro.
Ahh thank you! I did have a brief look at webhooks but I got sidetracked thinking they wouldnt do what I needed. Is the the webhooks inside the Sanity project settings your referring to? Ill take another look!
Exactly!You take the url from your hosting. If you are using Vercel it can be found under Project Settings > Git > Deploy hooks.
Then you will go to Sanity project > API > Webhooks
Perfect, thank you for your reply. Just got it set up and working πŸ™Œ
That's awesome. I'm glad to help.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?