Deploying your Gatsby website

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

You can deploy your production-ready web application to any provider that supports static sites. Follow Gatsby's team's recommendations for deploying to platforms like Netlify or Vercel.

Automatic Rebuilds on Prismic content update

With certain providers, you can configure Prismic's Webhooks to automatically rebuild your static pages whenever the content in your Prismic repository is updated. This article will showcase how to do this with Netlify and Vercel which both support automatic rebuilds.

Netlify

In this example we will use Netlify CLI, start by installing it using NPM.

Copy
npm install netlify-cli -g

This will install Netlify CLI globally. You can check the version and find out some basic information about the tool with the following command.

Copy
netlify

Authentication

Note that the Netlify CLI uses an access token to authenticate with Netlify. If you haven't already done so, you can learn how to obtain this token with this article.

Next you need to build your Gatsby project. Once done, the 'public' folder will be created in your project root directory. To build your site, run the following command from the root of your project.

Copy
gatsby build

And now you can deploy your Gatsby application.

Copy
netlify deploy

This will ask for the directory you want to publish such as 'Publish directory'. You should enter the 'public' directory that has been created in the previous step and then follow the rest of the steps. When it has been successfully deployed, you will get the URL for the newly deployed app. Here is an example:

Copy
Website Draft URL: https://your-website-name.netlify.app

Automatic Rebuilds with Netlify

Start by creating your Build hooks endpoint on Netlify. You can find them in your Netlify site dashboard at Settings > Build & deploy > Continuous deployment > Build hooks.

You can learn more about creating your Netlify Build hooks in this article. Following those instructions will provide you a webhook url, which look something like this: https://api.netlify.com/build_hooks/xxxxxxxxxxxxxxx.

Now create a Webhook trigger in Prismic. To do so, go to your Prismic repository's Settings > Webhooks and create a Webhook trigger. Make sure to use the Build hook you created in Netlify.

Vercel

Gatsby-Prismic deployment with Vercel (formerly ZEIT) is very simple using Vercel CLI method. We need to use Git integrations method, which allow you to automatically deploy your Prismic repository by activating deployment hooks.

To deploy your Gatsby project, start by pushing your Gatsby project on one of your favorite git hosting providers (if haven't done that already). In this example we will use Github. Click here to learn more about using git and pushing your code to Github.

Once you have you code pushed, go to the git integration tutorial or simply click here to install Vercel on your Github repo. Next, you will be redirected back to the "Import Git Repository" page. Import your project by clicking the "Import Project from GitHub" button.

Perfect! Now your application is fully deployed, click on the "Projects" tab in your Vercel account and click on "Visit".

Automatic Rebuilds with Vercel

Now that you have your integration active, go your project page on the Versel website and navigate to Settings > Git Integration and scroll to the "Deploy Hooks" section.

If you don't see Deploy Hooks

Note that in some cases the Deploy Hooks section don't appear immediately. Give it some time and it will eventually appear.

Name the hook and the add the Git branch you want to build. Give it a name such as master, then click on "Create Hook". This will generate an endpoint url for you such as:

Copy
https://api.zeit.co/v1/integrations/deploy/xxx

Copy this url to your bowser and try to trigger your project rebuild. To check if your project is rebuilding go to your Vercel project page and check the status. If it works then all that's left to do is to add it to your Prismic webhooks to be able to deploy your application automatically when you update and publish your content.

To create a Webhook trigger in Prismic, go to your Prismic repository's Settings > Webhooks. Create a Webhook trigger and add the Build hook you created in Vercel. For more info about this check the "Configuring your webhook URL" section in this article.

And that's it! Your Prismic & Gatsby website is deployed and will automatically update when you publish new content.