Unlock the Power of Gatsby: A Step-by-Step Guide to Building a Blog from Scratch

Gatsby, a powerful framework for static site generation, has gained immense popularity in recent times. Its ability to create simple static websites quickly and efficiently has made it a favorite among developers. But have you ever wondered what happens behind the scenes? In this article, we’ll take a deep dive into the world of Gatsby and explore how to build a blog from scratch.

Getting Started

Before we begin, make sure you have Node.js installed on your machine. You can check by running node --version in your terminal. If you don’t have it, follow the instructions on the Node.js website to install it.

Next, install Gatsby CLI locally by running npm install gatsby-cli. Verify the installation by running gatsby --version.

Initializing the Repo

Create a new directory for your blog and navigate into it. Then, run gatsby new my-new-blog to create a new Gatsby project using the hello-world starter kit. This kit is minimalistic, allowing us to understand Gatsby’s internals better.

Understanding Gatsby and GraphQL

Gatsby uses GraphQL to query data from our API. To better understand how Gatsby and GraphQL work together, let’s add some data to our website. In the gatsby-config.js file, add the following code:
js
module.exports = {
siteMetadata: {
title: 'My Blog',
description: 'A blog about everything'
}
}

Now, let’s display this data to our users in the browser. In the src/pages/index.js file, add the following code:
“`jsx
import React from ‘eact’
import { graphql } from ‘gatsby’

const IndexPage = ({ data }) => {
const { title, description } = data.siteMetadata
return (

)
}

export const query = graphql
query {
siteMetadata {
title
description
}
}


export default IndexPage
“`
Managing Pictures

To make our blog more engaging, let’s add a picture. Create a new directory src/images and add a cute dog image to it. Then, install the gatsby-source-filesystem plugin by running npm install gatsby-source-filesystem. In the gatsby-config.js file, add the following code:
js
module.exports = {
//...
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: `${__dirname}/src/images`
}
}
]
}

Restart the server and fetch the image in the src/pages/index.js file:
“`jsx
import React from ‘eact’
import { graphql } from ‘gatsby’

const IndexPage = ({ data }) => {
const { image } = data
return (

)
}

export const query = graphql
query {
image: file(relativePath: { eq: "cute-dog.jpg" }) {
publicURL
}
}


export default IndexPage
“`
Handling Markdown Files

Let’s add our first blog post inside src/blog/my-first-post.md:

“`markdown

title: My First Post
date: 2022-01-01

author: John Doe

This is my first blog post.

In the `gatsby-config.js` file, add the following code:
js
module.exports = {
//…
plugins: [
{
resolve: ‘gatsby-source-filesystem’,
options: {
name: ‘blog’,
path: ${__dirname}/src/blog
}
}
]
}

Install the `gatsby-transformer-remark` plugin by running `npm install gatsby-transformer-remark`. Then, add the following code to `gatsby-config.js`:
js
module.exports = {
//…
plugins: [
{
resolve: ‘gatsby-transformer-remark’,
options: {
plugins: []
}
}
]
}

Restart the server and fetch the blog posts in the `src/pages/blog.js` file:
jsx
import React from ‘eact’
import { graphql } from ‘gatsby’

const BlogPage = ({ data }) => {
const posts = data.allMarkdownRemark.nodes
return (

)
}

export const query = graphql
query {
allMarkdownRemark {
nodes {
id
frontmatter {
title
date
}
}
}
}


export default BlogPage
“`
Creating Pages Dynamically

To create links to all the blog posts, we need to tell Gatsby to create them for us. In the gatsby-node.js file, add the following code:
“js
const { createFilePath } = require(gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNode, createNodeField } = actions
if (node.internal.type === MarkdownRemark) {
const slug = createFilePath({ node, getNode })
createNodeField({
node,
name: slug,
value: slug
})
}
}

Restart the server and fetch the slugs in the `src/pages/blog.js` file:
jsx
import React from ‘eact’
import { graphql, Link } from ‘gatsby’

const BlogPage = ({ data }) => {
const posts = data.allMarkdownRemark.nodes
return (

)
}

export const query = graphql
query {
allMarkdownRemark {
nodes {
id
frontmatter {
title
date
}
fields {
slug
}
}
}
}


export default BlogPage
“`
Programatically Spawning Pages

Create a new component src/templates/blog-post.js:
“`jsx
import React from ‘eact’

const BlogPost = ({ data }) => {
const post = data.markdownRemark
return (