Build a Simple Blog with Reactjs and Contentful

Overview

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.

Sample

Here is my code for this post.
repo https://github.com/koji/typescript/tree/master/simple_blog_with_contentful

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
Image for post
Image for post
  • Data structure
{
"name": "easysite", <-- コンテンツモデル名
"description": "simple website like a blog",
"displayField": "title",
"fields": [
{
"id": "title",
"name": "title",
"type": "Symbol",
"localized": false,
"required": false,
"validations": [],
"disabled": false,
"omitted": false
},
{
"id": "image",
"name": "image",
"type": "Link",
"localized": false,
"required": false,
"validations": [],
"disabled": false,
"omitted": false,
"linkType": "Asset"
},
{
"id": "description",
"name": "Description",
"type": "Text",
"localized": false,
"required": false,
"validations": [],
"disabled": false,
"omitted": false
}
],
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "if4se75018sp"
}
},
"id": "easysite",
"type": "ContentType",
"createdAt": "2020-10-01T15:28:51.896Z",
"updatedAt": "2020-10-01T15:28:52.158Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"publishedVersion": 1,
"publishedAt": "2020-10-01T15:28:52.158Z",
"firstPublishedAt": "2020-10-01T15:28:52.158Z",
"createdBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "0EGNAqGfBgN849uaItzT7r"
}
},
"updatedBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "0EGNAqGfBgN849uaItzT7r"
}
},
"publishedCounter": 1,
"version": 2,
"publishedBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "0EGNAqGfBgN849uaItzT7r"
}
}
}
}


Step 2 Create content

This step only needs to create an entry that is almost the same as writing a post on dev.to. 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
  • As you know, we should avoid using any lol​
useEffect(() => {
fetchData();
// console.log(articles);
}, [articles]);

const fetchData = async() => {
try {
const resp = await client.getEntries ({content_type: 'easysite'});
setArticles(resp.items as any);
} catch (error) {
console.log(error);
}
}


Entry part

export const Post = ({ article }: IArticle) => {
// console.log(article);
const { title, image, description} =article.fields;
const postDescription = marked(description);
return (
<div className="post">
<h2 className="title">{title}</h2>
{image && <img className="featuredImage" src={image.fields.file.url} alt={title} title={title} /> }
<section dangerouslySetInnerHTML={{ __html: postDescription}} />
</div>
)
}

#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