Build your blog using GatsbyJS (v2 beta)

July 21, 2018・14 min read

I recently found out about GatsbyJS after they announced GatsbyJS V2 Beta. Having a blog and posting about stuff I work on has been on my to-do list for too long, so I decided to build my own blog using GatsbyJS! This first post is a step-by-step guide on how I built this blog using the v2 beta.

GatsbyJS

GatsbyJS is a JavaScript web framework that lets you build fast websites and automatically optimizes them using modern web performance ideas (e.g. PRPL Pattern).

GatsbyJS is really simple, the configuration is handled by the framework and the plugins. All you have to do is:

The index page queries markdown files and produces a list of blog post titles and excerpts. We can split the file in 2 parts:

A React component rendering a layout, a bio and a list of blogposts using props.

A GraphQL query, pulling the data page components need.

GraphQL is a query language similar to SQL. You describe the data you want in your component and then that data is given to you.
In Gatsby, the result of the query is automatically inserted into your React component on the data prop.

In the first part of the query, we’re pulling the siteMetadata:

`
...
site {
siteMetadata {
title
}
}
...
`

site.siteMetadata is common data we want to reuse across the app (like title or description) added to the gatsby-config.js file. It is automatically added to the GraphQL schema:

The gatsby-transformer-remark plugin parses each Markdown files into a MarkdownRemark node and also adds additional fields to the MarkdownRemark GraphQL including html, excerpt, etc.

There is an awesome tool you will need when building your GraphQL queries called GraphiQL. It is a powerful IDE that lets you “play” with GraphQL types and fields. You can press CTRL+SPACE to use the auto-complete feature.

GraphiQL is available on your development server at http://localhost:8000/___graphql:

If it’s your first time seeing GraphQL, this tutorial is a good way to start.

Programmatically creating pages

Page templates

To create pages programmatically, the first thing we need is a page template. Since we used the blog starter, we already have a basic page template in the src/templates folder named blog-post.js.

Adding Style

In my case, I didn’t want to add too much new stuff to my code and steepen my learning curve so I decided to stick with Sass and spice it up a little bit with Typography.js

Typography.js

Typography.js is a JavaScript library which generates the base CSS for all your elements. It makes it easy to create a global custom and unique design to your project.
Typography also has more than 30 ready-to-use themes you can install as Node.js packages. You can play with them here. Using a theme you like as a base and overriding it is a good way to have a nice looking blog without much effort.

Setup Sass

To setup Sass, you only need to install the gatsby-plugin-sass and all the configuration will be handled by Gatsby.

Install the plugin

npminstall --save gatsby-plugin-sass

Include the plugin in your gatsby-config.js file

plugins:[[...],`gatsby-plugin-sass`],

Now you can create .scss files and import them!

Adding simple SEO

The final step is adding simple SEO to your blog using React Helmet and the React Helmet Gatsby plugin. The React Helmet package as well as the Gatsby plugin are already installed since we used the blog starter.

To implement the basic SEO meta tags, I created a simple React component using props to render the tags:

Conclusion

After running gatsby build, you will have a simple yet nice little static blog ready to be deployed inside the public/ folder. I highly recommend Netlify as your static hosting platform. With Netlify, you can easily setup continuous integration from your Github repository!

GatsbyJS is really a powerful, magic framework. The GatsbyJS team and community is working every day to make it even easier to use with more and more features. I really enjoyed building this blog with GatsbyJS and will keep improving it. GatsbyJS is my go-to framework for static websites!

Thank you for reading! This is my first blogpost ever, all your comments and suggestions are welcome!