Build a Simple Blog with Reactjs and Contentful


In this post, I will introduce a way to build a simple web application that is a simple blog with a famous headless CMS, contentful.


Here is my code for this post.

What is Headless CMS?

Let me tell you what a headless CMS briefly.
Roughly speaking, a headless CMS is a CMS without the functionality of displaying content.
Let’s say it is like WordPress that has only a dashboard.
Probably, some of you think why we need to use headless CMS instead of other CMSes.

  • merits
  • Can focus on frontend and there is no limitation by a CMS(You can use anything you want to use and the development process is the same as normal frontend development)
  • In terms of Contentful, it offers the npm package for fetching data
  • demerits
  • It would be hard to change looks for non-tech people
  • If a headless CMS gets issues, we need to wait until they will be fixed by a service provider​About Contentful Contentful is great since it has good documentation, Slack group, and forum.​## Step 1 Define Contentful models Loggin Contentful and define models to display data on react application. In this post, I just created 3 items, title, eye-catch image, and body.​
Image for post
Image for post
  • Data structure

Step 2 Create content

This step only needs to create an entry that is almost the same as writing a post on You can use Markdown.

Content → Add Entry → easysite(In this case, I named entry model easysite)

Image for post
Image for post

From the top, title, eye-catch image, and body.​

One thing you should know is that if you publish the body, that doesn’t mean you publish the eye-catch image.
You will need to publish them separately.

Step 3 Get the API-Key

You will need to generate API Key from Settings. Then get SpaceID and Access Token

Step 4 Create React app

Operations on Contentful is over, from this step you just need to develop a react application.

  1. Create an app with create-react-app
  2. Add a component for API-key. In this case, I hardcoded SpaceID and Access Token on the local environment, but if you want to publish this app, you should use environment variables on hosting services such as netlify.
  3. Install contentful by yarn/npm
  4. Use contentful to fetch data
  5. Parse data and display it​This sample uses useEffect to get data from Contentful and use content_type to specify the target on Contentful (easysite).
  • As you know, we should avoid using any lol​

Entry part

Written by

#CreativeCoding #Art #PhysicalComputing #IoT #MachineLearning #python #creativetech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store