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 developer documentation for Prismic and Gatsby. This page outlines some of the resources that you will find in this documentation.

Introduction to Gatsby.js

If you've found yourself here, then most likely you already know at least a little about Gatsby. For those that don't, the Gatsby website describes Gatsby.js as "a free and open source framework based on React that helps developers build blazing fast websites and apps."

If you don't have any previous experience with Gatsby, then we recommend learning a little Gatsby before continuing here. There are lots of great resources available for learning more about Gatsby:

Getting Started

If you're ready to start learning how to use Prismic with Gatsby.js, here's what we recommend:

  • Step-by-step tutorial. This tutorial series starts with a hardcoded Gatsby website and slowly adds Prismic, piece by piece. If you're new to Prismic or simply want to get a better understanding of how it all works, then this is a great place to start.
  • The Prismic Gatsby source plugin. This article introduces you to the recommended Prismic/Gatsby plugin and is a good place to get started.

Example Projects

If you'd like to see a fully functional website example using Prismic & Gatsby, then check out these example projects:

Simple blog example

Example Gatsby blog example project

Here is an example of a blog website using Prismic and built with Gatsby. It features a homepage with a list of articles that link to each article. The articles are composed using Prismic's slices feature.

Check out the example here

Multi-language website example

Here is an example multi-language website using Gatsby.js and Prismic. Check it out to learn how to have a website with multiple locals with a language switcher.

Check out the example here

More documentation content

Our Gatsby documentation includes much more! Here are a few articles that you might find useful as you explore the docs and get your Gatsby site up-and-running: