We are going to create a blog site something like below.
Blog Post listing page
Navigating to blog post detail
Table of Contents
- What are static site generators?
- Gatsby.js Introduction.
- What are the prerequisites for Gatsby.js?
- How to setup Gatsby.js?
- Install and Config Gatsby plugins.
- How to setup static site layout?
- How to create blog posts by Gatsby?
- Use GraphQL to query posts.
- Blog post listing using GraphQL.
- Create blog pages using Gatsby’s Node.js
createPage
API. - Designing the blog template.
- 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.
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.
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.
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:-
4. How to setup Gatsby.js?
The Gatsby Cli is available via npm and should be installed globally by running these commands.
|
|
OR
|
|
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.
|
|
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:
|
|
|
|
It will start the Gatsby server and launch the website in the browser.
gatsby develop command
Gatsby Default Starter
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.
|
|
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
|
|
post-2.md
|
|
post-3.md
|
|
Make sure, you have configure the blog folder path correctly in gatsby.config.js
file. It should be like below:
gatsby.config.js
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.
|
|
The result would be something like this.
GraphQL
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
Create blog post listing template using GraphQL result data
|
|
GraphQL query in component
|
|
Styling blog listing template
Create index.css
in src/pages folder and import it in index.js
file.
|
|
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
.
|
|
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.
|
|
changed to
|
|
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.