February 15, 2021
Using Gatsby Cloud with your GraphCMS powered Gatsby site enables the following:
This guide assumes the following:
gatsby-source-graphcmson GitHub or GitLab.
If you have a pre-existing GraphCMS powered Gatsby site in Gatsby Cloud, you can skip to step 2.
In Gatsby Cloud, create a new site by importing your pre-existing Gatsby project from a GitHub repository. You can follow this guide for instructions on how to do this.
During the setup process, you will be asked to provide any environment variables required for your Gatsby site to build. This will likely include the following:
Once configured, your new Gatsby Cloud site will build and be accessible in your dashboard.
Before we can enable the Gatsby Cloud integration on our GraphCMS project, we need some details from our newly initialised Gatsby Cloud site.
Form the Gatsby Cloud dashboard, go to the site you want to work with, click Site Settings.
You will need to make note of your project’s Prefix as that will be needed for the GraphCMS setup.
Now navigate to the Webhook section. In order to trigger new Gatsby Cloud builds for both the production and Preview instances, we need both the Preview Webhook and Builds Webhook URLs. These will be required during the Gatsby Cloud integration setup.
Be sure to check that CMS Preview builds are enabled to your Gatsby Site project. This can be done in the Preview section of the Site Settings page. This is required!
In your GraphCMS project dashboard, navigate to Settings and then Integrations. From here click Gatsby Cloud and then Enable.
Populate the form fields with the values we just took from our Gatsby Cloud site and click Enable.
Once successfully enabled, your project will:
Your content editing experience will now include a preview button direct to your Gatsby Cloud CMS Preview instance. CMS Preview builds are fast and the instance should automatically update in seconds.