Deployment

Resources to help you deploy your Prismic & Gatsby project to one of the many providers that support static sites.


Gatsby Cloud

Prismic recommends integrating your project with Gatsby Cloud so that you can have access to all of the great features that it offers:

Other alternatives

Alternatively, you can also deploy your project using any of the recommended Gatsby services for deploying. Here are a couple of examples of hosting services you can use to deploy your site:


Netlify

Deployment

First, make an account or log in, then push your project code to a new Github repo and login with that same GitHub account. Press the "New site from Git" button on the Netlify dashboard, select your repository and continue. You should land on step 3, "Build options, and deploy!", here are the settings you need:

  1. Branch to deploy: master, or which-ever branch you prefer
  2. Build command: npm run generate or yarn generate
  3. Publish directory: dist

That's it, your Nuxt.js & Prismic website should now be live!

Automatic builds

Start by creating your Build hooks endpoint on Netlify. In your Netlify site dashboard at Settings > Build & deploy > Continuous deployment > Build hooks. Generate a build hook URL, it'll be similar to the one below:

Copy
https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX

Now create a Webhook trigger in Prismic. In your Prismic repository's Settings > Webhooks and create a Webhook trigger and add the URL you just copied from Netlify, and that's all you need to add to make your project detect changes and rebuild!

⚠️ Variables in Netlify

When configuring environment variables with Gatsby + Netlify, you have to prefix them with GATSBY_ to make them available to Netlify, e.g.,

GATSBY_PRISMIC_ACCESS_TOKEN
GATSBY_PRISMIC_REPOSITORY_NAME

Preview updates

To use the preview feature you need to enable Previews in your repository and then configure them in your project code which you can learn how to do here:


Vercel

Deployment

Make an account or log in, then push your project code to a new Github repo and login with that same GitHub account. Press the "New site from Git" button on the Netlify dashboard, select your repository and continue. Once your site is live all following pushes to branches will generate Preview Deployments, and all changes made to the Production Branch will result in a Production Deployment.

Automatic builds

Start by creating your Build hooks endpoint on Netlify. In your Vercel site dashboard navigate to Settings > Git Integration and scroll to the "Deploy Hooks" section. Generate a build hook URL, it'll be similar to the one below:

Copy
https://api.vercel.com/v1/integrations/deploy/XXXXXXXXXXXXXXX

Copy it, and then head to your Prismic repository's Settings > Webhooks. Create a Webhook trigger and add the Build hook you created in Vercel.

And that's it! Your Prismic & Gatsby website is deployed and will automatically trigger deployments and re-run the Build Step.

Preview updates

To use the preview feature you need to enable Previews in your repository and then configure them in your project code which you can learn how to do here: