Build a Blog Website with Reactjs and Hygraph CMS

Managing your blog content can be made easier for you and your clients by utilizing a Content Management System (CMS). A CMS is software that allows you to create and manage your digital content easily with or without technical knowledge.

In this article, you'll learn how to build a fully functional blog application with React and Hygraph CMS.

What is Hygraph?

Hygraph is a federated content platform that utilises GraphQL for content APIs making it easier to distribute you content. Later on in the article you'll get to see how Hygraph makes it easy to create content schemas and access all this through a GraphQL API.

Prerequisites to follow along:

Intermediate knowledge of React;

An IDE, preferably VS code;

A browser such as Chrome;

Getting Started with Hygraph

Begin with creating an account with Hygraph. Proceed to create a project, choose the name, description and data storage region.

This will usher you into this page.

On the left side menu, click schema so as to fill in your content model. Next to the models option. Click on the add option and proceed to fill out details of your blog post.

Now that you are done with this. Hygraph ushers you into the fields option that allows you to add all the details of your blog itself.

Once you have filled out your content head over to the project settings section on the left side of the screen. Here you can access the APIs that you'll use to fetch data to your React app.

To view the generated GraphQL queries, click the API Playground section.

Now it's time to create the React app. Implement this by running npx create react app in your VS code terminal.

Once that is done, It's time to fetch this data. Create a components folder in your React app and create a Blogcard.js file. Use this code:
Please note that the names of my projects happen to differ as the below code is for the project I had built earlier with Hygraph

import "./Blogcardstyles.css";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import image1 from "../assets/claudio-testa--SO3JtE3gZo-unsplash.jpg";
import image2 from "../assets/tomoko-uji-eriuKJwcdjI-unsplash.jpg";
import image3 from "../assets/henry-be-IicyiaPYGGI-unsplash.jpg";
import { request } from 'graphql-request';

const Blogcard = () => {
   const [blogs, setBlogs] = useState([]);

   useEffect(() => {
    const fetchBlogs = async () => {
        const { blogappsmwendwa } = await request(
            `your api key goes here`
           {
                blogappsmwendwa {
                    hereWeGoWithTheBlogapp
                    loremIpsumLoremIpsum
                }
            }`
        );
        setBlogs(blogappsmwendwa);
    };
    fetchBlogs();
   }, []);



    return (
        <div className="work-container">
            <h1 className="project-heading">All Blogs</h1>
            <div className="project-container">
                <div className="project-card">

                    <img src={image1} alt="nature" />



                    <h2 className="project-title">Content fetched from Hygraph CMS</h2>
                    <div className="pro-details">
                        {blogs.map((blogapp) => (


                        <p>{blogapp.hereWeGoWithTheBlogapp}</p>
                    ))}


                    <div>
                    <Link to="/Page" className="btn">Read More</Link>
                        </div>
                    </div>
                </div>




                <div className="project-card">
                    <img src={image2} alt="nature" />
                    <h2 className="project-title">Content fetched from Hygraph CMS</h2>
                    <div className="pro-details">
                        {blogs.map((blogapp) => (
                        <p>{blogapp.hereWeGoWithTheBlogapp}</p>
                    ))}

                        <div>
                            <Link to="/Page" className="btn">Read More</Link>
                        </div>
                    </div>
                </div>





                <div className="project-card">
                    <img src={image3} alt="nature" />
                    <h2 className="project-title">Content fetched from Hygraph CMS</h2>
                    <div className="pro-details">
                        {blogs.map((blogapp) => (
                        <p>{blogapp.hereWeGoWithTheBlogapp}</p>
                    ))}

                    <div>
                    <Link to="/Page" className="btn">Read More</Link>
                        </div>
                    </div>
                </div>
            </div>
</div>





    )
    };




export default Blogcard;

In BlogCard.js, you were able to make a GraphQL request that fetches your blog content from the Hygraph Schema.
You were then able to use map()method to determine where each part of the data goes.
You can now refresh your page to view all the data stored in your Hygraph schema right into your React application.
The read more buttons redirect to a new page that displays further data from the schema you created earlier. To view the full blog application, check my Github Repo for the code.

Conclusion

Through this article you have learnt what is a CMS, its benefits and how to create a blog application with content fetched from Hygraph which is a federated content platform.

Blog

Build a Blog Website with Reactjs and Hygraph CMS

Mwendwa Bundi Emma

What is Hygraph?

Prerequisites to follow along:

Getting Started with Hygraph

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related