Connecting to Strapi

This guide will show you how to connect your Gatsby Cloud site to Strapi CMS.

Prerequisites

This guide assumes you already:

• have a Gatsby project in a GitHub repository
• have a Strapi instance with content-types and content that your project understands
• are familiar with how to create a Gatsby Cloud site from a repository

1. Configure Environment Variables

In Gatsby Cloud, start creating a site using the Import from a Repository flow. Once you reach step 5, "Configure Environment Variables," add the Build and Preview variables for your API URL.

Build and Preview Variables

Note, the key for this variable will be dependent on the name you use in your Gatsby project. This name is based on gatsby-config.js in Strapi's strapi-starter-gatsby-blog.

2. Configure Webhooks

Next, go to the webhook settings for your Gatsby Cloud site and make note of the Build and Preview webhooks. You will need this information for configuration in your Strapi instance.

In your Strapi instance, go to Settings > Webhooks, then click the Add new webhook button in the top right corner.

Configure your Preview webhook as follows:

1. Provide an appropriate name for your Preview webhook.
2. Enter your Build webhook URL in the URL text field
3. Select the specific events for Media and Entry that will trigger a CMS Preview in Gatsby Cloud
4. Click Save

The specific events you choose to trigger builds are up to you.

After you save your webhook, create another webhook and repeat the above steps for your Build Webhook. You should end up with two webhooks as shown below.

3. Finish

With that, everything is properly configured and your Gatsby Cloud site will trigger Production Builds and CMS Previews when your content changes.