1. What is Gatsby.

Gatsby is a React-based, GraphQL powered, static site generator. It uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.

Long story short. With Gatsby you can build STATIC websites using React.

2.Why Gatsby

  • It’s very FAST. (but not at the build time)

    • this doesn’t really need any further explanation lol
  • Lazy loading images by default (gatsby-image)

    • it will generated optimize resources and it will use that until the real image will load (like a blur effect)
  • Rich Plugin Library (Over 2.4k plugins)

    • You can use plugins for some tasks so you have have to do it from scratch (SEO, PWA, google analytics, rss feed, sitemaps, responsive images etc)
  • Rich Starters Library

    • Let’s say you want a blog that has a headless cms attached to it, there are starters for that so you won’t have to start from scratch or do the boilerplate yourself
  • Security

    • It’s not as vulnerable as wp since it’s just a static website
  • Cost

    • You can just deploy it for free to netlify since it’s static
  • Markdown

    • You can easily use markdowns as a db, for example let’s say we have some blog posts, we can use markdown files for each post and at build time gatsby will transform these markdown files in a page using the template the you want.
  • Easy to integrate with a CMS

    • There are plugins for pretty much every cms that does it for you.
  • React

    • <3
  • GraphQL
  • typescript support by default
  • some other stuff

    • gatsby themes, ssr, ability to make client side routes etc

3.How Gatsby works

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

This will generate everything you need to start with gatsby. I’m gonna explain the main things.

  • The pages folder

    Gatsby will transform the files that you put here in actual pages, for example if you make a page-1.js file you’ll be able to go to /page-1

  • gatsby-config.js

    -this is the file where you put what plugins you want to use, basically an array of plugins

  • gatsby-node.js

    • In this file some magic happens, for example let’s say we have that blog again with some markdown files. In this file we can get every markdown file, store the data from that markdown file and use it to generate a page
    • This file is executed at build time (before you can see the website lol)
  • GraphQL

    Remember the blog again 😄. After we “stored” the data from the markdown files using gatsby-node.js we can use graphql to get that data. So on the blog post template you can get that data. (This will be populated at build time)

    Image having a json with some data and you want to get some specific field to use it as variables to display the data

    export const query = graphql`
    query BlogPostByID($id: String!) {
      markdownRemark(id: { eq: $id }) {
        id
        html
        rawMarkdownBody
        timeToRead
        fields {
          slug
        }
        frontmatter {
          seo {
            title
            description
            tags
          }
          date(formatString: "MMMM DD, YYYY")
          title
          description
          content
          tags
          author
          featuredimage {
            image {
              childImageSharp {
                fluid(maxWidth: 560, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }

    Conclusion

    I hope you enjoyed this tutorial. If you need help with something don’t hesitate to contact me.