Build static sites for production and preview with Netlify
Martin Makarsky
11 minutes
Netlify lets you run automated builds of your website with each Git commit using CI/CD pipeline designed for web developers. Netlify can generate and publish production and preview sites with every push. You can also trigger these builds by content changes in Kontent.ai using webhooks.
Sites powered by static site generators undoubtedly bring a lot of advantages for programmers, editors, and users. One small drawback is the necessity to rebuild your project with every content change in Kontent.ai.Automated site rebuilding is an essential feature of every static site. You can implement it by leveraging Kontent's webhooks and Netlify's build triggers.In this tutorial, you'll learn how to use Netlify to run a static site that's built and published with every content update. You'll also find how to use Delivery Preview API to build a preview site with your latest content. Building and deploying are done automatically using Kontent.ai's webhooks and Netlify's build hooks.You'll have two separate sites on Netlify, each of them based on your production master or main branch code:
The second one is a preview site with content you haven't published yet that's fetched using the Delivery Preview API. This site's rebuilt when content is created, updated, or deleted. You'll also learn how to protect the preview site against unauthorized access.
Build hooks are URLs you can use to trigger new Netlify builds and deploys.
Webhooksare programmatic notifications that notify your app – in this case, Netlify – know when something changes in your Kontent.ai project.
Build your production site with published content using your production master or main branch.
In your Netlify production site settings, go to Build & Deploy > Continuous deployment.
Under Build hooks, click Add build hook.
Enter the Build hook name.
Select your production branch. For example, master or main.
Save the build hook.
Copy the trigger URL.
In Kontent.ai, go to Environment settings > Webhooks.
Click Create new webhook.
Type a name for the webhook.
In the Webhook URL field, paste the URL of the hook trigger provided by Netlify.
Adjust the Triggers.
Typically, you’d want to trigger the webhook when content items in your published data are added or removed, that is published or unpublished.
Click Save.
Now, your production site will be automatically built and deployed with the latest content on Netlify after every publish and unpublish in Kontent.ai.
Build a preview site using your production branch with content you haven't published yet. You can protect this site with a password and use it to preview changes before you release them publicly.
To build a preview site, you need to use a second statically generated site that's already deployed to Netlify and configured for continuous deployment. This site needs to use the same repository as the production site but, unlike the production site, it needs to use Delivery Preview API to fetch the content.
Distinguishing between the Delivery API and the Delivery Preview API depends on the used static site generator and the overall logic of your code. The most reasonable approach is to distinguish them using environment variables. The example below uses Gatsby.js static site generator with @kontent-ai/gatsby-source. The gatsby-config.js uses the Delivery Preview API if its key is provided in the respective variable.
This allows you to have one master or main branch you can use to build production and preview sites using different Delivery API endpoints according to the provided environment variables.
In your Netlify preview site settings, go to Build & Deploy > Environment.
Under Environment variables, fill in the variables according to your app logic.
In gatsby-config.js, these variables are KONTENT_PREVIEW_ENABLED and KONTENT_PREVIEW_KEY.
You can find your Delivery Preview API key in Kontent.ai > Environment settings > API keys.
Save the changes.
In your Netlify preview site settings, go to Build & Deploy > Continuous deployment.
Under Build hooks, click Add build hook.
Enter the Build hook name.
Select your production branch (typically master or main).
Save the build hook.
Copy the trigger URL.
In Kontent.ai, go to Environment settings > Webhooks.
Click Create new Webhook.
Type a name for the webhook.
In the Webhook URL field, paste the URL of the hook trigger provided by Netlify.
Adjust the Triggers.
Typically you'd want to trigger the webhook when content item variants in your preview data are created, updated, or deleted.
Click Save.
Now, your preview site will be automatically built and deployed with the latest content on Netlify every time you add, edit, or delete something in Kontent.ai.
Unless you want to show your content drafts and development tests to the whole world, it's essential to restrict access to your preview site only to authorized people. To do that, use Netlify's password protection to hide your site behind a password that you control.
Martin Makarsky
11 minutes
are URLs you can use to trigger new Netlify builds and deploys.
Environment settings > Webhooks.
