Getting Started Tutorials

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.

Welcome to the step-by-step tutorial series that will introduce you to how to use Prismic with Gatsby. Gatsby is a popular open source framework based on React. We'll be showing you how to convert a hardcoded Gatsby website into one that pulls its content from Prismic.

Live Demo

First let's take a look at the project we'll be using for this article series.

Live Demo

As you can see, we're working with a pretty simple website. It has a homepage with a banner at the top and some content sections below. The pages are also made up of the same content sections that we saw on the homepage, and there is a navigation at the top of the page that we'll be taking a closer look at as well.

The website we'll be making

How these tutorials will work

The articles in this series will take you from a Gatsby website that is fully hardcoded to one that pulls all the content from Prismic and dynamically builds the pages.

These articles will show you how to do the following:

  • Set up the required plugins and libraries
  • Model the content in Prismic
  • Query your content from the GraphQL API
  • Render the content on your pages
  • Set up Prismic's live preview functionality

Tutorial series outline

Here is a summary of the 6 articles in this tutorial series.

  1. Launching the project: We'll be getting everything we need for this tutorial series setup and prepared. This includes downloading the initial project files, launching a Prismic repository, and installing the required dependencies.
  2. Convert the static Homepage Banner: We'll be converting the top homepage banner from being hardcoded in your Gatsby app to being filled with content from Prismic.
  3. Convert the Homepage main content to Slices: We'll be using Slices to convert the homepage main content (everything beneath the banner) to being filled with content coming from Prismic.
  4. Adding repeatable pages: We'll be updating the plugin configuration and adding a template to handle the repeatable pages from Prismic.
  5. Adding the navigation: We'll show you how to handle the top navigation in your Prismic repository and Gatsby app, rather than being hardcoded.
  6. Setting up Previews: We'll be setting up the Prismic Live Previews so you can preview your content changes before you publish them.

Let's get started

Start by heading to the first article and getting the project launched and ready to go!