To Gatsby or Not to Gatsby

What is Gatsby.js?

Gatsby is a Static Site Generator(SSG) written in React.js. Gatsby compiles your site, and uses preloading for the pages, so the rendered site is very fast.

tl;dr

The good? Great performance, SEO, and image optimization. Built in graphql interface is very powerfull. A lot of plugins are available for just about everything. The bad? Complex code and slow developer start (go get some coffee, it's going to take a couple of minutes). The ugly? graphql queries for all the good stuff, not beginner friendly.

The Data Layer

Gatsby uses a data layer model to query data for pages. It uses GraphQL

This is how to make a page query in Gatsby.

query ($id: String) {
  mdx(id: {eq: $id}) {
    frontmatter {
      date(formatString: "MMMM D, YYYY")
      hero_image_alt
      hero_image_credit_link
      hero_image_credit_text
      hero_image {
        childImageSharp {
          gatsbyImageData
        }
      }
      title
    }
  }
}

Images

gatsby-plugin-image

Using gatsbpy-plugin-image you can get preproccessed images for your site. This is one of my main reasons to choose Gastby.

Image Properties

• layout
  • "constrained"
  • "fixed"
  • "fullWidth"

Static Images

import {StaticImage} from "gatsby-plugin-image"

<StaticImage
  src="./my-image.jpg"
  alt="A lovely bunch of coconuts"
/>

Dynamic Images

import {GatsbyImage, getImage} from "gatsby-plugin-image"

getImage() is a helper function that takes gatsbyImageData;

<GatsbyImage image={image}/>

You will have to write a graphql query for the images, but all optimization will be handled automatically.

Toggle the childImageSharp field, and then check the box for the gatsbyImageData field.

query ($id: String) {
  mdx(id: {eq: $id}) {
    frontmatter {
      title
      date(formatString: "MMMM D, YYYY")
      hero_image_alt
      hero_image_credit_link
      hero_image_credit_text
      hero_image {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  }
}

Blog

Setting up blog pages is a breeze using Gatsby. Set up a dynamic page template, and your markdown files will be converted to pages. Using gatsby-plugin-mdx, you can even add jsx to your markdown!

Deployment

Gatsby is now a part of Netlify, so if you're deploying there you can connect to your gitHub account and run builds automatically.

Conclusion

While the downsides (especially for beginners) are a bit much:), I think the benefits far out weigh them. I would recomend using Gatsby for your next website.