• Cheat sheets
  • Documentation
  • API reference
  • Product updates
  • Sign in
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Overview
    • Overview
      • Zapier (automation)
      • Netlify (DevOps)
        • Netlify and Kontent.ai: automatically rebuild your static site
        • Build a site with published production content
        • Build a preview site
      • Sensitive data in custom elements
    • PDFs and other formats

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.

Netlify and Kontent.ai: automatically rebuild your static site

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.

Build production site and preview site

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 first one is a site with published content. It's rebuilt with every content publish or unpublish. 
  • The second one is a preview site with content you haven’t published yet that’s fetched via Delivery Preview API. This site is rebuilt when content is created, updated, or deleted. You’ll also learn how to protect the preview site against unauthorized access.

Glossary

Build hooks are URLs you can use to trigger new Netlify builds and deploys. Webhooks are programmatic notifications that notify your app, in this case, Netlify, when something changes in your Kontent.ai project.

Build a site with published production content

Build your production site with published content using your production master or main branch.

Before you start

You need to prepare a statically generated site. The site must already be deployed to Netlify and configured for continuous deployment. Learn more about linking your app repository in Netlify. The site needs to fetch content via Delivery API.

Create a production build hook trigger in Netlify

  1. In your Netlify production site settings, go to Project configuration > Build & deploy > Continuous deployment.
  2. Under Build hooks, click Add build hook.
  3. Enter the Build hook name.
  4. Select your production branch. For example, master or main.
  5. Save the build hook.
  6. Copy the trigger URL.
Netlify build hooks
Build hooks settings in Netlify.

Register the Netlify's production build hook in Kontent.ai

  1. In Kontent.ai, go to Environment settings > Webhooks.
  2. Click Create new webhook.
  3. Type a name for the webhook.
  4. In the Webhook URL field, paste the URL of the hook trigger provided by Netlify.
  5. In Triggers > Published or preview, select Published data.
  6. In Triggers > Events, select Specific events, then expand Content item and select the events that should trigger the webhook, typically when content items are published or unpublished.
  7. Click Save.
Webhook configuration
Sample webhook configuration for production code deployed by Netlify. 
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

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.

Before you start

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.

Distinguish between Delivery API and Delivery Preview API in your code

Distinguishing between Delivery API and Delivery Preview API depends on the static site generator used and the overall logic of your code. The most reasonable approach is to distinguish them using environment variables. The example below uses Astro with the Delivery JS SDK. The Delivery client uses the Delivery Preview API if its key is provided in the respective variable.
JavaScript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';

const deliveryClient = createDeliveryClient({
  environmentId: import.meta.env.KONTENT_ENVIRONMENT_ID,
  previewApiKey: import.meta.env.KONTENT_PREVIEW_KEY,
  defaultQueryConfig: {
    usePreviewMode: Boolean(import.meta.env.KONTENT_PREVIEW_ENABLED),
  },
});
This allows you to have one master or main branch you can use to build production and preview sites using different Delivery API endpoints based on the provided environment variables.

Set Netlify environment variables

  1. In your Netlify preview site settings, go to Project configuration > Environment variables.
  2. Under Environment variables, fill in KONTENT_PREVIEW_ENABLED and KONTENT_PREVIEW_KEY to match the environment variable names used in your code.
    • You can find your Delivery Preview API key in Kontent.ai > Environment settings > API keys.
  3. Save the changes.
Netlify environment variables
Environment variables configuration in Netlify.

Create a preview build hook trigger in Netlify

  1. In your Netlify preview site settings, go to Project configuration > Build & deploy > Continuous deployment.
  2. Under Build hooks, click Add build hook.
  3. Enter the Build hook name.
  4. Select your production branch (typically master or main).
  5. Save the build hook.
  6. Copy the trigger URL.
Netlify build hooks
Build hooks settings in Netlify.

Register the Netlify’s preview build hook in Kontent.ai

  1. In Kontent.ai, go to Environment settings > Webhooks.
  2. Click Create new webhook.
  3. Type a name for the webhook.
  4. In the Webhook URL field, paste the URL of the hook trigger provided by Netlify.
  5. In Triggers > Published or preview, select Preview data.
  6. In Triggers > Events, select Specific events, then expand Content item and select the events that should trigger the webhook, typically when content item variants are created, updated, or deleted.
  7. Click Save.
Webhooks configuration
Configuring a webhook to trigger a preview build.
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.

Secure your preview site

Since your preview site shows content drafts and development tests, it’s essential to restrict access to only authorized users. To do that, use Netlify's password protection to hide your site behind a password that you control.
Copyright © 2026 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR