Tutorial Introduction

This tutorial series will introduce you to Prismic with Gatsby, a popular open-source framework based on React. We'll show you how to convert a hard-coded Gatsby website into one that pulls its content from Prismic.

Live demo

Take a look at the project we'll be using for this article series.

We're going to work with a multi navigation website. It has a homepage with a banner and content Slices, dynamic pages that also use content Slices, and a navigation bar at the top of the page.

Image of the sample blog
The website we'll be making

How this tutorial will work

The articles in this series will take you from a Gatsby website that is entirely hard-coded 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 hard-coded content and model it in Prismic
  • Query your content
  • 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!

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.