Building a Personal Blog with React and a Headless CMS

Why Choose a Headless CMS?

A traditional content management system (CMS) may not provide the flexibility and scalability you need for your personal blog. A headless CMS, on the other hand, offers a more modern approach to content management. It allows you to create, manage, and deliver content across multiple platforms and devices, making it an ideal choice for building a blog.

Setting Up the Headless CMS

To get started, sign up for a free account and create a new space for your blog. Choose the “Blog” template, and fill in the required information. You’ll then be taken to your dashboard, where you can rename your space and start creating content models.

Creating a Content Model

A content model is the structure or schema of your content. In our case, we’ll create a content model for blog posts. Define the required fields, such as:

• title
• slug
• description
• featured image
• date
• body

This will give you a solid foundation for creating and managing your blog posts.

Integrating React with the Headless CMS

Before we dive into the code, let’s create a new React app using Parcel. Install the required dependencies, including react-markdown and the headless CMS SDK, which will allow us to interact with the API.

npm install parcel react-markdown @headless-cms/sdk

Creating Custom Hooks

We’ll create two custom hooks: usePosts and useSinglePost. These hooks will fetch data from the headless CMS and provide it to our components.

import { useQuery, gql } from '@headless-cms/sdk';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      items {
        title
        slug
        description
        featuredImage {
          url
        }
      }
    }
  }
`;

const usePosts = () => {
  const { data, error, loading } = useQuery(GET_POSTS);
  if (loading) return

Loading…

;
  if (error) return

Error: {error.message}

;
  return data.posts.items;
};

const GET_SINGLE_POST = gql`
  query GetSinglePost($slug: String!) {
    post(slug: $slug) {
      title
      description
      featuredImage {
        url
      }
      body
    }
  }
`;

const useSinglePost = (slug) => {
  const { data, error, loading } = useQuery(GET_SINGLE_POST, {
    variables: { slug },
  });
  if (loading) return

Loading…

;
  if (error) return

Error: {error.message}

;
  return data.post;
};

Components

Create the following components:

• App.jsx: Handles routing to different pages
• Posts.jsx: Displays a list of blog posts
• SinglePost.jsx: Displays a single blog post

// Posts.jsx
import React from 'eact';
import usePosts from '../hooks/usePosts';

const Posts = () => {
  const posts = usePosts();
  return (

  );
};

export default Posts;

// SinglePost.jsx
import React from 'eact';
import useSinglePost from '../hooks/useSinglePost';

const SinglePost = ({ slug }) => {
  const post = useSinglePost(slug);
  return (
    

Putting it All Together

After writing the code for all components and adding styling, run the project using npm run start. Navigate to http://localhost:1234 to see your blog in action. Clicking on a single blog post will redirect you to a page where you can read the post.