Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

Sourcing from Contentful

Examples

  • Using Contentful

What is Contentful? Why choose it?

Contentful is a headless Content Management System (CMS) that lets you organize your content into what could be called “modules,” or little bits of data that can be rearranged to appear nicely on mobile devices, tablets, computers, virtual reality devices (maybe someday?) and more.

Actually, the way Contentful handles bits of content means that you can push content out when new technology develops without having to redesign, rewrite, or rethink all of it for a new format.

Prerequisites

This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.

Pulling data in and pushing data out

If you have a JSON file with content in it, you could pull it into Contentful using contentful-import. If you are creating new content, you don’t need this and can create content straight in Contentful.

If you do create content directly in Contentful, make sure to name your fields in a way you can remember when you create GraphQL queries. If you use GraphiQL, it can suggest fields to you, but this will only help if the field names are clear and memorable.

As far as pushing data out to your site goes, we suggest to you to use this fantastic plugin gatsby-source-contentful, to use it, you’d need to have the spaceId and the accessToken from Contentful.

Install

How to use

To get setup quickly with a new site and have Gatsby Cloud do the heavy lifting, deploy a new Gatsby Contentful site with just a few clicks on gatsbyjs.com.

For more detailed instructions on manually configuring your Gatsby Contentful site for production builds and Preview builds visit the Gatsby Cloud knowledgebase.

With the Delivery API

With the Preview API

Examples of Gatsby + Contentful websites

The Gatsby blog has several examples of individuals and companies that chose to build with Gatsby and Contentful.

For an automatic integration using Contentful with Gatsby:

Start building today on Netlify!

Start building today on Netlify!
Edit this page on GitHub
© 2023 Gatsby, Inc.