How to create a blog with GatsbyJS and GraphCMS
How to create a blog with GatsbyJS and GraphCMS

You just started writing and you are looking for a personal blog and you are overwhelmed with the options you have nowadays.

let me give you a simple solution that can help you start a totally custom blog and set it up in just 30 min of coding.

so, how do we do that?

we are going to use GraphCMS to handle our content and GatsbyJS for handling our front end needs.

Requirements -

GraphCMS -

So let's start by setting up our content fields in GraphCMS.

Step One -

Once you signed up you can go either start from scratch or you can select a template.

GraphCMS provides us awesome templates to start with here we are going to select a Blog Starter Template that will give us everything we need to start creating our content.

GraphCMS.png

Step Two -

Once you have created your project and gave it an awesome name and description you will land on the dashboard of GraphCMS.

GraphCMS (1).png

You will see four tabs on the left of the screen. select the tabs which say schema.

after selecting that tab you will see all the schemas already created for us like Author, Page, Post, SEO.

these four schemas will be our core content fields and we will be mainly focusing on the Post Schema for now.

Step Three -

Now after looking at our schema we are going to go over to the content tab.

So Let's Select the Content tab from the tabs menu on the left and click on the post you will see GraphCMS have already provided us the demo blogs which we can use to display on our GatsbyJS front end.

Step Four -

After going through all the content and setting up our schema we need to get our API endpoints through which we can make a request from our GatsbyJS frontend to get all the content from GraphCMS.

to get the API endpoint

  1. Click On Setting Tabs
  2. Select API Access
  3. There you will see the endpoint copy that.
  4. and don't forget to change the public API permissions to all (Draft & Published)

Now we have got our API endpoint we can start creating our blog on GatsbyJS.

GatsbyJS -

Now it's time to start coding and bring our blog to life. 😀

Step One -

If you do not have gatsby-cli installed run this command

npm install -g gatsby-cli

now that we have gatsby-cli under our belt we can finally start building our blog.

let's create our project now

  1. navigate to the folder where you want to set up your blog
  2. Run gatsby new awesome-blog
  3. once done cd into awesome-blog
  4. before running our blog we need to install some dependencies to get our project running smoothly
  5. run npm install gatsby-source-graphql

after installing the dependencies

navigate to gatsby-config.js

and add this code to the plugins Array

{

resolve: "gatsby-source-graphql",

options: {

typeName: "GraphCMS",

fieldName: "gcms",

url:

"Paste your API Endpoint Here",

},

}

Step Two -

Now it’s time for the fun part, coding our gatsby blog! I’m trying to keep this project as simple as possible, so I’m just going to throw all of my files inside the root of my src folder. Usually, I’ll create a new folder for components, and etc, but we’re not doing that today because it’s a very small App.

So with our project running let's start writing some code

Inside src/pages

Let's create a new page called blog.js (we will be able to access that at localhost:8000/blog )

Blog.js -

import React from "react"

import { useStaticQuery, graphql } from "gatsby"

const Blog = () => {

const data = useStaticQuery(graphql`

query AllBlogs {

gcms {

posts {

title

slug

coverImage {

url

}

}

}

}

`)

return (

<div className="container">

<div className="blog-wrapper">

<h1>Awesome Blog.</h1>

{data &&

data.gcms.posts.map(({ title, slug, coverImage }) => (

<a href={`yourdomain/post/${slug}`}>

<div className="blog-item">

<div className="image-wrapper">

<img src={coverImage.url} alt={title}></img>

</div>

<div className="content">

<h1>={title}</h1>

</div>

</div>

</a>

))}

</div>

</div>

)

}

export default Blog

Now that we have the homepage of our blog all set we can now go and make a template for the post so that gatsby can automatically create the pages for all the posts.

so to do that create a new folder called template and inside that folder create a new file called post.js

Post.js -

import React from "react"

const Post = ({ pageContext: { title, slug, coverImage, content } }) => {

return (

<div className="container">

<div className="post-wrapper">

<div className="image-wrapper">

<img src={coverImage}></img>

</div>

<h1>{title}</h1>

<div className="content">

<div dangerouslySetInnerHTML={{ __html: content.html }}></div>

</div>

</div>

</div>

)

}

export default Post

Now that we have a template ready for a post we can not tell gatsby to create pages for each post from that template.

to do that go to gatsby-node.js and enter these commands

exports.createPages = async ({ graphql, actions: { createPage } }) => {

const {

data: {

gcms: { posts },

},

} = await graphql(`

{

gcms {

posts {

title

slug

coverImage {

url

}

content {

html

}

}

}

}

`)

blogs.forEach(({ title, slug, coverImage, content }) =>

createPage({

path: `/post/${slug}`,

component: require.resolve(`./src/template/post.js`),

context: {

title,

slug,

coverImage,

content,

},

})

)

}

this will create a basic blog that you can expand make it your own by adding custom styles and components to it.

Thanks for taking out some time for reading. ✌️

Socials -

GITHUB | INSTAGRAM | LINKEDIN | DRIBBBLE | BEHANCE | EMAIL