This guide will show you how to connect your Gatsby Cloud site to Sanity using the Quick Connect feature.
This guide assumes you already:
- have a Gatsby project in a GitHub repository
- have a Sanity project with content that your project understands
- are familiar with how to create a Gatsby Cloud site from a repository
- have the correct settings in gatsby-source-sanity options for Preview
If you have already created a Gatsby Cloud site, but did not connect it to Sanity, you can do so via Site Settings. See the Quick Connect reference guide for background info on the feature.
1. Generate Read Token
First, log in to your Sanity account at manage.sanity.io and open your project. Go to Settings > API then click the Add New Token button in the Token section.
Provide an appropriate label for the token, select the Read radio button, then click Add New Token.
Copy the generated token and save it for later; you need this in step 3 and once you close the modal there is no way to get it back. If you lose the token, you will have to create another.
2. Configure the Sanity Integration
Start creating a Gatsby Cloud site using the Import from a Repository flow. Once you reach step 4, "Add Optional Integrations," click Connect for the Sanity integration.
Next, click Authorize to allow the Sanity integration to configure your CMS automatically. You will then be prompted by Sanity to authorize the Gatsby Cloud app.
After authorizing, choose which project and dataset to connect to and click Continue.
You'll receive confirmation that webhooks and environment variables have been configured for you. Click Set up your site.
3. Configure Environment Variables
On the next screen, you'll see that Gatsby Cloud has automatically detected some of your project's environment variables.
SANITY_READ_TOKEN variable, set the value to the token you generated earlier. Note, auto-detected variables are read from your project's
gatsby-config.js file, so your variable may have a different name. This variable name is based on
gatsby-config.js from Sanity's
sanity-template-gatsby-blog. 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 and Preview Variables
||your Sanity project dataset|
||your Sanity project ID|
||your Sanity project name|
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.
You may also want to install the Sanity Preview Extension so that you can open your CMS Previews directly from Sanity.
You will also need to make sure that you set watchMode and overlayDrafts to true in your gatsby-config.js options for gatsby-source-sanity, as documented here.