Relaunching with JAMstack: Why I Rebuilt my Blog with React, Gatsby, and Netlify

August 24, 2019

After graduating in 2015 from Actualize, a coding bootcamp in Chicago, I decided to build a blog using Ruby on Rails to reinforce the skills I learned during the program. I created an admin panel for writing the posts in markdown, stored the posts in a PostgreSQL database, built a custom comments section, and deployed the app to Heroku. This setup served me well but after four years I felt the blog’s design needed to be updated and I wanted to improve its performance.

After researching the options, I decided to rebuild the blog with React and Gatsby and deploy it using Netlify. Here’s why I selected those tools and why I couldn’t be happier with the results.

Need for Speed

My old blog was slow. This was mostly due to a bloated Bootstrap theme that included more CSS and JavaScript than any blog could ever need. The blog index page earned a paltry 15 out 100 on mobile from Google’s PageSpeed Insights. The first meaningful paint and time-to-interactive clocked in at 9.4 seconds and 10.3 seconds, respectively. Brutal!

Old site

My desire for improved performance led me to the JAMstack, an architecture that creates “fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” JAMstack sites are fast, in part, because each page is only built once at deploy time, unlike typical apps that build a page every time it is requested from the server. The JAMstack promised to provide the speed I was looking for.

While researching the JAMstack I found Gatsby, a static website generator that leverages the JAMstack and is built on top of React. I am working with React a lot at work these days so I liked the idea of honing these skills on my blog.

Gatsby is open source and it has a dedicated community that pumps out excellent documentation and plugins, similar to the Rails community that I love so much.

In true JAMstack fashion, Gatsby builds every page only once (when the site is deployed) and sends the pages to a “global cloud of servers”. The result is a wicked-fast site, as you can see from the Google PageSpeed Insights score for my new site’s blog index page:

New site

So long, database

Although Gatsby can be used with a database, it’s not required, and I chose to build my new site without one. All of my blog posts are written in markdown and saved directly to the file system. Gatsby transforms the markdown to HTML and injects data from each blog post into React components. That process is worthy of its own blog post, so if you want to learn more checkout the Gatsby docs.

But, the long and short of it is that Gatsby converts markdown to HTML while the GraphQl API send the frontmatter data (the key/value pairs between the triple dashes) to React components.

index.md
---
title: "Relaunching with JAMstack: Why I Rebuilt my Blog with React, Gatsby, and Netlify"
date: "2019-08-24T23:46:37.121Z"
---
After graduating from Actualize, a coding bootcamp in Chicago, I decided to build a blog using Ruby on Rails to reinforce the skills I learned during the program. I created an admin...
blog-post.js
import React from "react"
import { graphql } from "gatsby"

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark

    return (
      <Layout>
        <h1>{post.frontmatter.title}</h1>
        <p>{post.frontmatter.date}</p>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

Leveraging the Power of React

Since Gatsby is built on top of React, it’s easy to get started writing custom components and leveraging powerful React features like state management. One of the first features I added with React is an onChange search so users can quickly filter my posts to find subjects they are interested in.

Search

Deploying to Netlify

After looking at Github Pages and a few other options, I settled on Netlify, a popular choice in the JAMstack and Gatsby communities. The Netlify dashboard has a beautiful, intuitive UI and concise instructions that walk you through all of the steps for deploying your site. I am on a free plan, and these are some of my favorite features:

  • Free HTTPS
  • Automatic deployments when I merge a branch to master in GitHub (public and private repos)
  • Step-by-step instructions for adding custom domains, setting up SSL/TLS certificates, building and deploying
  • Unlimited projects
  • Full DNS

Have any questions about Gatsby, React, or Netlify? Reach out on Twitter @ryanmcmahon716


Ryan McMahon

Hi, I’m Ryan McMahon—a software developer who lives and works in Buffalo, NY. I build things for the web using React, Ruby, Rails, and .NET. Connect with me on Twitter.