Why I'm using Gatsby to create my blog site

Why Use Gatsby for My Blog?

There are so many options for creating your blog in 2020 ranging from making it yourself to using something like Wordpress. With all these options, why did I pick Gatsby? The answer is simple - speed. Gatsby is a static-site generator which means the entire site is generate at build time rather than dynamically. Solutions like Wordpress are database driven, so when a person visits a site generated by Wordpress, the server will grab all the necessary data from a Database in order to generate the page. Gatsby on the other hand already generated the page before the user has visited the site.

Gatsby Uses Modern Web Tech

Gatsby uses React, Webpack, and other modern technologies out of the box. You can add plugins to support SASS, Typescript, and other modern frameworks/libraries.

I've tried out other Static Site generators in the past like Jekyll and with some hacking around, you can get React to work with it, but Gatsby supports React out of the box.

Gatsby is Fast and No server costs

I'm using Github Pages to host my site. It's absolutely free and deployment literally takes minutes.

Because the site is generated at build time, Gatsby generated pages are super fast and makes it super easy to configure as a PWA.

Plethora of plugins

There are over 20000+ plugins that you can install.

Some of my favorites include:

• gatsby-plugin-sitemap: This will generate a sitemap.xml for you automatically
• gatsby-plugin-offline: This will allow visited sites to work offline
• gatsby-source-filesystem: I'm using this to read a bunch of markdown to generate all my blog posts
• gatsby-plugin-manifest: This will turn your site into a PWA with minimal effort

Gatsby & GraphQL

You access your data using GraphQL which makes it super simple to grab the data you need. This makes it super easy to create all sorts of pages such as your typical Blog Post to Paginated Pages

Example:

const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: {
          order: DESC, fields: [frontmatter___date],
      }
      limit: $limit
      skip: $skip
    ) {
      pageInfo {
        hasNextPage
        currentPage
        hasPreviousPage
      }
      edges {
        node {
          id
          excerpt
          frontmatter {
            slug
            title
            date(formatString: "MMMM D, YYYY")
            cover_photo
          }
        }
      }
    }
  }
`