GatsbyJS: Static Site Generator for React

Gatsby is a static site generator for React and allows web developers to create a static HTML file. Thus it provides fast initial load times and makes dealing with SEO much simpler. The user-side experience is very comfortable when JavaScript is enabled, and you don’t lose any content or navigation while having disabled JavaScript. By adding a single plugin, Gatsby can provide offline support as well, transforming your site into a Progressive Web Application.

The Purpose and Background of GatsbyJS

Gatsby allows web developers to create static HTML files for every single page. Right after loading the page, Gatsby will boot up React and enable the user to navigate through the website just like a single page app. 

It also supports web developers in using external sources such as Drupal CMS, Contentful, WordPress, as well as Stripe, Trello, Medium, MongoDB, and many others. If the data you require can be accessed via an API, you can write a Gatsby source plugin to consume it as well. All these assets can be used simultaneously.

"Gatsby can collate data from multiple sources which can then be queried by our templates. This is a significant difference when compared to most static site generators. Instead of only using Markdown files, I can now use any number of different data files locally," explains Ray Gesualdo . 

Gatsby is a perfect solution for the developers that just started using React, but it also is a suitable tool for small and medium businesses, startups and self-employed professionals with limited budgets. Using Gatsby doesn’t require a high-level experience with JS.

The First Steps in Using GatsbyJS

The GatsbyJS community is becoming more and more vibrant since the tool is continues to find more widespread use. The creators of Gatsby arm users with an extremely friendly tutorial, available here . The installation of Gatsby takes literally a few seconds. 

The Benefits of Using GatsbyJS

First of all, Gatsby is fast . Gatsby’s founder, Kyle Mathews  performed a test comparing Instagram and Gatsbygram (Instagram’s clone built using Gatsby v1) using a simulated 3G network and a Moto G4 smartphone.  The median speed index score for Gatsbygram was 3151 vs. 8251 for Instagram.

Another value of this static site generator is its simplicity. Modern JavaScript websites are too complex to rely only on web developers always configuring things correctly. Gatsby simplifies website development by extracting configuration out of your site and moving it into the framework and community plugins. As a static site generator, Gatsby allows web developers with relatively little experience to create React-like apps. Currently,  many developers use Gatsby to learn React.

As a multi-purpose solution, Gatsby is a counterpart for traditional static site generators such as Jekyll , Content Management Systems (CMSs) like WordPress, as well as site builders like Squarespace. The chart below details Gatsby's capabilities in comparison with an example from each above-mentioned category. 

Summary

GatsbyJS is an interesting alternative and an easy-to-use static web page generator, which has supporters among web developers of all experience levels. The community appreciates GatsbyJS for its speed, simplicity, and the large amount of tools that it can be used with. 

It’s a suitable tool for web developers at any skill level , as it provides educational value to the rookies as well as speeds up some of the work for more experienced web engineers. 

Good luck, old sport!

* The source of all images features in the article can be found:  https://www.gatsbyjs.org/features/