How to trigger a Netlify build using Storyblok webhooks

Frontend Engineer who loves building tools.
Search for a command to run...

Frontend Engineer who loves building tools.
No comments yet. Be the first to comment.
Performance is a touchy subject in software engineering. It’s one thing to write code and ship it; it’s another thing entirely to make it faster and more enjoyable for your users — and the next developers after you. In this article, we will look at h...
Animations seem to be a necessity these days in frontend development, improving the user experience in apps by a significant margin. Thankfully vue.js shipped two built-in components that abstract away the complexities of animating our apps; transiti...
Arrays have a lot of helpful higher-order functions that make working with them easier. Our focus in this article will be the sort() method, this method has both easy and complex use cases which we'll be looking at in this article. First look at the ...
Gridsome is a static site generator used for building powerful frontend applications, it was built on the Vue.js framework. One of the beauties of Gridsome apart from its ability to generate server-side rendered applications is its compatibility with...
Build hooks are unique URLs used to trigger a build on the Netlify. They can be used to refresh the content on your website after you’ve published or unpublished content in your Storyblok space.
To create one, open your site’s dashboard on Netlify and navigate to the settings section:
Under Settings > Build & deploy > Continuous deployment > Build hooks.
Click Add build hook to create a new hook. The hook name is for you to identify that hook, select a branch to build when a deploy is triggered.
After clicking Save, you’ll get a URL which you need to send POST requests to in order to trigger a build.
The URLs typically look like this:
[https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX](https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX "https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX")
You can also add parameters to the URL to change the default trigger branch and trigger message. To know more, check out the official documentation.
To add the hook URL to your Storyblok space so your new content will be deployed when you click publish or unpublish.
Open the space you want to configure the hook for and navigate to the settings section of the space:
Under Settings > Webhooks.
Paste the copied hook URL in the input field and you should see a toast indicating you’ve successfully added the URL.
Now you can publish new content or unpublish existing content on your Storyblok space to test. When you go back to your Netlify site’s deploys section, you should see a build in process.
A payload in JSON format is sent with the POST request from Storyblok, this can be accessed during build on Netlify as an environment variable INCOMING_HOOK_BODY
To know more about the nature of the payload, check out How to use Storyblok webhooks in the documentation.