Blog

In this blog, we will learn about how to create your blog site with Gatsby.js static site generator. Static site generators becoming popular day by day. There is a hot trend of creating a blog or personal site using static site generators.

We are going to create a blog site something like below.

Blog Post listing page

Navigating to blog post detail

Table of Contents

1. What are static site generators?
2. Gatsby.js Introduction.
3. What are the prerequisites for Gatsby.js?
4. How to setup Gatsby.js?
5. Install and Config Gatsby plugins.
6. How to setup static site layout?
7. How to create blog posts by Gatsby?
8. Use GraphQL to query posts.
9. Blog post listing using GraphQL.
10. Create blog pages using Gatsby’s Node.js createPage API.
11. Designing the blog template.
12. Summary

1. What are static site generators?

Static site generators are not new. But they are now in the trend. A lot of blogging or personal sites are generated by these generators.

A static site generator takes source files and generates an entirely static website.

Static site generators are command-line tools that shift the creation of the final HTML page forward from the point the user requests it to the point you write the content.

Click here to see various generators –– StaticGen

This offer several advantages.

• Static sites are incredibly fast, as there is no server round-trip and database calls.
• Easy to learn and setup in few minutes.
• It overcomes the security issues of any dynamic site. Static sites are secure and reliable.
• These can be integrated with Git version control and make it live site on static web hosts like Netlify, Surge.Sh or ZEIT etc.

2. Gatsby.JS Introduction

Gatsby is a blazing fast modern site generator for React. It uses React, which means that everything is built with components, and allows it to benefit from React’s approach to DOM rendering. This means it can be picked up quickly by developers who have worked with React, but for those unfamiliar with it, learning React will be necessary.

It also utilises GraphQL at build time to retrieve data and content from data sources, which provides a modern, consistent interface to ensure that each page receives the exact data needed when it is built.

Finally, it will build pages as progressive single page apps, meaning that the entire site is downloaded and subsequent navigation is immediate.

3. What are the prerequisities for Gatsby.js?

Gatsby.js prerequisites are Node.js and npm on your machine.

Note: Gatsby’s minimum supported Node.js version is Node 8, but feel free to use a more recent version.

Check Node.js and npm installation

Open your Mac terminal window.

Type and run node --version to check the node.js version.

Type and run npm --version to check the npm version.

If you don’t have Node.js and npm installed on your machine, you can download it from below link.

Download Node.js

Check Git Installation

Gatsby.js requires Git. When you install a Gatsby “starter” site, it uses Git behind the scenes to download and install the required files for your starter. You will need to have Git installed to set up your first Gatsby site.

If you don’t have Git installed on you machine, you can install it from below links:-

• Install Git on Mac OS

• Install Git on Windows

• Install Git on Linux

4. How to setup Gatsby.js?

The Gatsby Cli is available via npm and should be installed globally by running these commands.

npm install -g gatsby-cli

or sudo npm install -g gatsby-cli

Once you installed Gatsby Cli on your machine, now it’s time to setup your static site project. Run this command to setup your project.

gatsby new static-blogsite

This command will download all the necessary packages and setup the project in few moments.

Once everything is setup successfully, it’s time to go to the project directory and start the development server with this command:

cd static-blogsite and run

gatsby develop

It will start the Gatsby server and launch the website in the browser.

We have successfully setup static site and launched the static web site in the browser.

5. Install and Config Gatsby Plugins

Install Gatsby plugins

In order to setup our static site layout, we are going to install following Gatsby plugins. These are:

• gatsby-transformer-remark –– It parses markdown files using Remark.

• gatsby-source-filesystem –– A Gatsby source plugin for sourcing data into your Gatsby application from your local filesystem.

Let’s install them in our project. Run this command in your terminal.

npm install --save gatsby-transformer-remark gatsby-source-filesystem

once these plugins are installed, next we have to configure them in our project.

Configure Gatsby plugins

Let’s open your project in Visual Studio Code, and select gatsby-config.js file. Go to the plugins section, and add code like below:

gatsby-config.js

6. How to setup static site layout?

Since we are creating a blog site, it has the following parts like –– a blog home page –– display blog post title on homepage & each blog post detail on a separate page. In this section, we will learn about how to use layout for the styling of our static site.

Every website has some layout like a global header and footer, navbar or sidebar, etc. Gatsby uses the Layout component to design the default layout of the website. You can see, there are two files in the components folder –– layout.js & layout.css.

header.js

Let’s change the default header component. Open header.js in src->components folder, and edit code same as below:

header.js

index.js

Once we created our header component, let’s edit index.js page.

Gatsby provides React Helmet <Helmet /> component. With this react component, you can add –– title, meta description, etc. in the static Html page.

We also imported <Header /> component, and placed it after the <Helmet /> component.

If you see in your browser, you will new header on your page.

7. How to create blog posts by Gatsby?

Gatsby can use Markdown files to create pages on your website. Gatsby uses this plugin gatsby-source-filesystem to read and understand Markdown files and create pages from them automatically.

Markdown file has an extension of .md. Let’s create Markdown files for our blog posts. Create a blog-posts sub-folder under the foldersrc and create three Markdown files.

post-1.md

[crayon-5e7c68412628b216900086/]

post-2.md

[crayon-5e7c684126296841053905/]

post-3.md

[crayon-5e7c684126299230593989/]

Make sure, you have configure the blog folder path correctly in gatsby.config.js file. It should be like below:

8. Use GraphQL to query posts

GraphQL is a query language like SQL. Gatsby uses GraphQL at build-time and not for live sites. If you noticed earlier while creating the project, I had shared two links in the screenshot. First was –– http://localhost:8000/  and http://localhost:8000/___graphql.

It means you don’t need to set up anything about GraphQL. Gatsby set it up automatically and provided you the link. You can open this link in the browser and run the following command to pull up all your blog data.

[crayon-5e7c68412629b868062177/]

The result would be something like this.

This query will return the list of all blog posts.

Here, two Gatsby plugins –– gatsby-source-filesystem and gatsby-transformer-remark play a vital role to fetch this data from our Markdown (.md) files.

Specially, plugin gatsby-transformer-remark transforms all Markdown file nodes into MarkdownRemark nodes which can be queried for their content.

9. Blog post listing using GraphQL

It’s time to integrate GraphQL query data and show the blog post listing on the home page –– Index.js.

Import GraphQL

[crayon-5e7c68412629d477868461/]

Create blog post listing template using GraphQL result data

GraphQL query in component

[crayon-5e7c68412629f767629602/]

Styling blog listing template

Create index.css in src/pages folder and import it in index.js file.

[crayon-5e7c6841262a1678310294/]

Looks beautiful and blaze fast. Now, our home page with blog posts listing is ready. Now, it’s time to create blog page for its details.

10. Create blog pages using Gatsby’s Node.js createPage API

Gatsby can create dynamic pages using powerful Node.js createPage api. This API is available in the gatsby-node.js file in the root directory of your project.

Use the GraphQL to query Markdown file data as below. Next, use the createPage action creator to create a page for each of the Markdown files using the blogTemplate.js

Gatsby APIs has two method for creating pages from Markdown files –– createPages & onCreateNoe.

This onCreateNode function will be called by Gatsby whenever a new node is created (or updated).

Stop and restart the development server. As you do, you’ll see quite a few newly created nodes get logged to the terminal console.

Use this API to add the slugs for your markdown pages to MarkdownRemark nodes.

createPages handle GraphQL data and map the query result to pages. Below is the complete implementation of both APIs in gatsby-node.js.

Note –– line 14, we have './src/templates/blogTemplate.js' path. This is our blog template, where we will show blog details when user click on blog title on blog listing page.

Let’s create this template file as well.

11. Designing the blog template

In the above section, I mentioned the fileblogTemplate.js. Let’s create this file in src/templates folder to show our blog detail page.

This template will consume GraphQL query data.

Note –– I have changed below line to make title as link in pages/index.js file.

<h3 className=”title”>{node.frontmatter.title}</h3>

changed to

<Link to={node.fields.slug} style={{textDecoration: ‘none’, color: ‘inherit’}}><h3 className=”title”>{node.frontmatter.title}</h3></Link>

12. Summary

In this blog, we have learned about how to create static blog site using Gatsby and React.js. Gatsby is powered by GraphQL which make it blazing fast, and there is no download time as all pages are served statically. You can download the code by clicking on below download button.

Further Reading

Array.Prototype.Flat() or ES2019 Array Flat() function

Type Inference In TypeScript

How Change Detection Works In Angular