Connecting to Contentful with Quick Connect

This guide will show you how to connect your Gatsby Cloud site to Contentful using the Quick Connect feature.

Prerequisites

This guide assumes you already:

• have a Gatsby project in a GitHub repository
• have a Contentful space with a content model and content that your project understands
• are familiar with how to create a Gatsby Cloud site from a repository

If you are starting a Gatsby project from scratch, check out the Create a Site from a Template tutorial instead.

If you have already created a Gatsby Cloud site but did not connect it to Contentful, you can do so via Site Settings. See the Quick Connect reference guide for background info on the feature. It will still be helpful to read through this guide for understanding.

Other Considerations

Only one Gatsby Cloud site can be connected to a Contentful space using Quick Connect. This is because the Contentful Integration will overwrite any existing configuration for that Contentful space. If you need to connect multiple sites to a single Contentful space, you will have to connect the others via the manual approach.

1. Configure the Contentful Integration

First, start creating a Gatsby Cloud site using the Import from a Repository flow. Once you reach step 4, "Add Optional Integrations," Contentful will be suggested to you. If not, click See more integrations. Then click Connect for the Contentful integration.

Next, click Authorize to allow the Contentful integration to configure your CMS automatically.

Then choose which Contentful space to connect to and click Continue.

You'll receive confirmation that webhooks, environment variables, and the preview extension has been configured for you. Click Set up your site.

2. Configure Environment Variables

On the next screen, you'll see that Gatsby Cloud has automatically detected some of your project's environment variables. These are read from your gatsby-config.js file. If you have used environment variables anywhere else, you may need to add them manually.

Automatically Configured Variables

You will also see that the integration automatically configured the following variables:

Build Variables

Preview Variables

Note, the keys for these variables will be dependent on the names you use in your Gatsby project. You will need to change them if they are different in your project. The ones above are based on gatsby-config.js from Contentful's starter-gatsby-blog.

Verify that both Build variables and Preview variables are set correctly, delete any unneeded variables, then click Save and Create site.

Your site will be created and start building immediately.