Step by Step Tutorial

The step-by-step tutorial series will introduce you to how to use Prismic with Gatsby, a popular open-source framework based on React. We'll show 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

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 navigation at the top of the page that we'll be taking a closer look at.

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:

  • Launch a new project and set up the required plugins and libraries
  • Migrate the hardcoded content and model it in Prismic
  • Query your content from the GraphQL API
  • Render the content on your pages
  • Create dynamic pages and navigation
  • Set up Prismic's preview functionality

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