GatsbyJS - Static Website Generator: Part4 - Contentful CMS


20 October 2018

Last Edited: 21 October 2018


It's no good having a blog with no content is it?, so how do we go about getting some in there?

Gatsby is set up to allow data collection from a multitude of services, including hardcoding in HTML, pulling in Markdown Files and retrieving data from a CMS.

There are numerous options for CMS plugins within Gatsby, but the one I have chosen to focus on is Contentful, lets head over there now and sign up for an account. Contentful


Once we have signed up for a free Contentful account, click on Create Space and enter an inventive name, such as myblog, and create an empty space by clicking Proceed and then confirm

Part 4 - 1

Part 4 - 2

Step 2:

We now need to define our data structure, basically a template for the data that we need to store. For our purposes we need to store individual blog posts, so that's what we will create.

Click on Create a content type

Part 4 - 3

Now give our content type a name, note that the Api identifier will be generated automatically (this is the name that we will use to identify our individual posts that are served up from Contentful).

Enter a name into the name box, BlogPost will do.

Part 4 - 4

Part 4 - 5

Step 3:

Now we have our Blog Post content type, we next need to give it a structure..what data will it need to store? For this example I will keep things sure simple and have a Title and a Body, we will also require a Slug, I will explain this later.

Click on text and create a short text field named Title (field ID will auto generate), and click create.

Part 4 - 6

Part 4 - 7

Create another short text field named Slug but this time click create and configure, choose slug and click save

Part 4 - 8

Part 4 - 9

Finally, create a third text field named Body and select Long text and click create

Part 4 - 10

We have now created our Blog Post data structure!! Easy eh? Now let’s create our first post, even if you don't have anything to say yet we will need to have a test post in system before we can use the Contentful API.

Click on Content at the top and Add BlogPost.

Fill in the Title and the Body, notice that the Slug is created automatically and uses the Title in kebab-case. This Slug will be used by Gatsby to generate the unique URL for this page.

Click on Publish to put the post live!

Part 4 - 11

Step 4:

That's it! We are blogging! All we need to do now is the hard part, which is pulling in the posts from Contentful. Thankfully the Gatsby plugins make this a lot more straight forward than you would think.

Before we can access this data, we will need to grab our Contentful API key, click Settings and API Keys and take note of the Space ID and Content Delivery API - Access Key.

Part 4 - 12

Next we will jump further into Gatsby and pull in our blog posts!👍