29th Oct 2020

Static Site Deployments with Webhooks

by Eric Jiang <eric@ericjiang.dev>

Previously on my personal website, the blog content, after converting it back to Static Site Pages, I figured out that you can use webhooks to trigger rebuilds. As both Vercel (the hosting provider) and Prismic (the headless CMS provider) have support for webhooks. To do this, we are going to try and trigger a build on the creation and deletion of blog-posts documents.

Firstly, we go into our Vercel project and create a new webhook, to do this:

  1. Go into Settings in your vercel project
  2. Click on Git in the sidebar
  3. scroll down to Deploy Hooks
  4. Fill in the blanks (I named my hook Prismic (Production) and had it target my production branch which is main), then click create.

Now copy the webhook URL into your prismic screen (under Settings → Webhooks), give it a name and paste the URL. then hit Add this webook!

Now you should be able to trigger it, try it out and look under your Deployments tab in Vercel to make sure it works.

And there we have it, static page generation (hopefully) for blogs using NextJS, Vercel and Prismic (with Webhooks!)

Amendment

Following a discussion on Twitter with @timneutkens, you dont need to use webhooks as of NextJS v10. All you need to do is add fallback: blocking to your getStaticPaths response.

Enjoyed the post? You might want to read similar posts:

October 2020 Site Upgrades

Something happened to my blog but you can't really tell if you visit the frontend of my blog! I migrated all my blog posts over to Prismic as a Headless CMS solution, after finding that I prefer writing my blog content over on a rich text editor and also having to roll out a change to my preview and main branches on my repository (github.com/ericjiang97/nextjs-personal) especially with blog posts.

Read Article

Published on 24 Oct 2020

Supercharging your development environment on Visual Studio Code

Like many developers out there, Visual Studio Code (VSCode) is now my go to editor for almost everything (with the exception for Android Studio (for Android) and IntelliJ IDEA (for Java)). I really like customising my VSCode, so that it is easier for me to develop on.

Read Article

Published on 23 Oct 2020

Migration of Live/Music

A few days ago whilst browsing through my old repositories on GitHub, I've discovered a really old app which showcased chaining some really awesome technologies together. This app showed what music I was playing anytime on Spotify or iTunes via Last.fm.

Read Article

Published on 2 Aug 2020

Like what you read? You may want to subscribe to my newsletter

I also occassionally write on my newsletter, so please subscribe below.

Powered by Buttondown

Copyright © Eric Jiang 2016 - 2021

Powered by Vercel & Prismic. Built in NextJS with Bumbag

Find the code on GitHub

Encoutering issues? Submit an issue