Bloggin'

My First Ever Blog Post

My First Ever Blog Post

Saturday, April 27th 2019

Never thought I'd start a blog, but the reason I started this is because I learnt how to set up my own CMS (Content Management System) through Contentful. So I guess I'll dedicate this blog post on How to set up a CMS with Gatsby and Contentful.

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`, // Learn about environment variables: https://gatsby.dev/env-vars 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.

https://www.youtube.com/watch?v=8t0vNu2fCCM