The Great Gatsby.js

When you first arrive to Gatby.js's website you'll be greeted with the image above. You may be thinking: "Awfully bold statement for a react framework that is only 5 years old." In this article we'll discover how Gatsby.js does, indeed, live up to the hype.

First thing first

What is Gatsby.js?

According to their website Gatsby.js is

a blazingly fast modern site generator for React.

Put more simply, Gatsby is a static website generator.

Well wait, what does that mean?

All that means is that Gatsby will produce static HTML files that we load up on to a server. Gatsby take information and preconfigures it ahead of time and serves that up.

So why should you use Gatsby?

Three reasons: speed, security, and improved developer experience.

Let's dive a little bit deeper into each of these reasons shall we?

1. Speed

Gatby.js is amazingly fast, because it it generating a static site, and creating Html files for each page your website has, the speed will be much faster than any other framework you can use. Unlike other other technologies that produce static websites react will not require a load of HTML files. According to their website

“Gatsby generates your site’s HTML pages, but also creates a JavaScript runtime that takes over in the browser once the initial HTML has loaded” — gatsbyjs.org

That means every page is a React app. Nice!

2. Security

Since there isn't a live database to access, there isn't any user data that is going to be stored on the server with a Gatsby site. All this means is that even if anyone were able to have the server they would still only get access to HTML files and will be able to do far less damage than they could if they were getting access to a framework that supplied user data or sensitive information. In short you'll have pretty substantial security gains if you decide to use Gatsby for your project.

3. Improved developer experience

Gatsby has a couple of things that help improve developer experience.

so here is, you guessed it, another list!

• The Plugins.

Gatsby has some amazingly useful plugins that are available at the official website. According to their website there are over 2000 plugins available. Some of the most used are:
1. gatsby-plugin-manifest: this makes your site an installable and also a PWA (progressive web app).
2. gatsby-plugin-offline: this will allow your site to run offline
3. gatsby-plugin-google-analytics: allows you to use google analytics in your website
4. gatsby-remark-embed-youtube: allows you to to embed YouTube videos in your website.

For a complete list visit Gatsby Plugins.

• Starters and templates

There are plenty of Gatsby starter repos and templates that are simple as cloning and changing the content to your specifications. This makes developing websites super quick and efficient. Gatsby also has excellent documentation and even tutorials based on your skill level. If you're interested in checking that out you can visit Gatsby Tutorial to get started.

Have I convinced you to try GatsbyJs yet?

If I have, here's how to include it in your next project.

1. (optional) Use the Gatsby CLI tool to clone a starter repo

gatsby new [site_directory] [url_of_starter_git_repo]

1. Open gatsby-config.js and configure it to your liking

module.exports = {
      siteMetadata: {
        title: [your title here]
      },
      plugins: [
        ...
        {
          resolve: 'gatsby-source-dev',
          options: {
            username: [your username here]
          },
        },
        ...
      ],
    }

1. npm install and npm start and that's it!

It's your turn to try it!

If you like what you've read try it out in your next project.