Contentful

Using Contentful As A Headless CMS

Want to learn how to set up your own CMS (Content Management System) without Wordpress? You've come to the right place!

Prerequisites:

Knowledge in React

Knowledge in Gatsby

Getting Started

The very first step is to create a gatsby starter:

gatsby new my-default-starter

https://github.com/gatsbyjs/gatsby-starter-default

Next, you'll need to install the gatsby-source-contentful plugin which let's you connect Gatsby with Contentful.

npm i gatsby-source-contentful

// In your gatsby-config.js

module.exports = {

  plugins: [

    {

      resolve: `gatsby-source-contentful`,

      options: {

        spaceId:`your_space_id`, 

        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,

      },

    },

  ],}

The next step is to create a Contentful account and start an empty space. I'll skip the details about how to customize your CMS, but it is pretty straightforward. Contentful gives you some examples to help you out..

So from your Contentful account, get the API Details (Space ID and Access Token) and edit the gatsby-config.js file in your project.

    {      resolve: `gatsby-source-contentful`,

      options: {       

spaceId: process.env.CONTENTFUL_SPACE_ID,                             accessToken: process.env.CONTENTFUL_ACCESS_TOKEN

               }

  }

Now you've connected your Gatsby project with your Contentful Account.

Once you've created a Content Model and some Content you want to fetch from Contentful, you can make a GraphQL query from your Gatsby application.

You can do this using a static query and running a simple map function to iterate over each piece of content you fetch from Contentful.

If you visit http://localhost:8000/___graphql, you'll see that there are new graphQL queries that you can call. In my case, they're called allContentfulBlogPost.

That's about it folks.

If you want to learn more about Gatsby and creating a CMS, Andrew Mead has an amazing, free bootcamp on Youtube. Link below.

Setting up a CMS with React & Gatsby