Understanding Gatsby: A Reactive Site Generator

Gatsby logo. Credit

Gatsby is a React-based open-source framework for creating websites. Gatsby is a static site generator that produces static HTML files that can be uploaded to a server. It should be noted that when we say Gatsby is static, it doesn’t mean that it is not dynamic!

We can load JavaScript, perform API calls, and even build rich and interactive sites.

As a generator, Gatsby can generate content for you and it uses React for templating, CSS for styling, and GraphQL to retrieve data.

Gatsby is often used by developers for speed, security, and developer experience. And it is built on two core features — data layers and reactive builds.

A look at reactive site generation

From being a static site generator, Gatsby has evolved into a reactive site generator.

Beginning with Gatsby Cloud, a platform built for building, previewing, and deploying Gatsby websites, we’ve had access to Fast Refresh. This allows you to quickly perform all of the above.

Two key features that are vital to Gatsby’s reactive site generation are the data layer and reactive builds.

The data layer and reactive builds

The data layer acts as a data connection layer from any content source like Contentful, WordPress, or Shopify to Gatsby databases. This gives you access to data changes in real time.

GraphQL powers reactive builds.

Each page on a Gatsby site declares its data dependencies through GraphQL. And changes in data trigger the updating of pages through Gatsby Cloud. With this reactive site generation, you can host and update websites more efficiently.

A look at how reactivity works

Reactive programming is a declarative programming paradigm. It works with data streams and the propagation of changes.

Given A = B + C , in the context of reactive programming, a change in the value of B or C will automatically update A.

ReactJS is an example of reactive programming. Here’s why: you write components to achieve the designs (UIs) that you want. Then React will update the DOM and render the components when your data changes.

Building a Gatsby starter site

Let’s bring it all together by building a Gatsby website. We will explore developing a Gatsby website on your local machine by first installing the Gatsby CLI.

Prerequisite

To develop a Gatsby website on your local machine, you first have to install the Gatsby CLI globally on your system. The Gatsby command line interface (CLI) is a tool that allows you to develop Gatsby projects quickly.

To install the Gatsby CLI, first, open the terminal if you are on a Macbook or Windows machine. For this demo project, I will be using macOS.

Run the following command on the terminal:

npm install -g gatsby-cli

Creating a Gatsby “Hello World” website

In this next section, we will create a simple “Hello World” Gatsby website and run it locally.

Note: We will not be styling the website; this is a simple demonstration to get you up and running on creating and deploying a Gatsby website locally.

Now, let’s create a new Gatsy “Hello World” website.

There are two ways to create the Gatsby website:

1. Using Gatsby’s hello-world starter on GitHub
2. Using the Gatsby CLI gatsby new command

Using Gatsby’s hello-world starter on GitHub

Here’s how to create a Gatsby hello-world starter.

First, CD to your development folder on your computer and run the following command on the terminal:

gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
// This should all be in one line

Then, run the following commands:

cd into my-hello-world-starter
gatsby develop

Open your browser and go to http://localhost:8000.

You should see “Hello world!” in your browser.

Now you can start editing by opening the source code on your code editor like VS Code or the IDE of your choice.

Using the Gatsby CLI gatsby new command

Unlike the Gatsby stater, the Gatsby CLI gatsby new command uses a prompt to build the website by using the information and answers you provide.

Let’s take a look at how you will do this using the gatsby new command:

1. On the terminal, cd into your development folder
2. Run gatsby new
3. You will see a prompt asking you, “What is your project called?” Name it “hello-world”
4. Next, you will use the arrow keys to select the options of the starter files provided by Gatsby. Select “gatsby-starter-hello-world.git” and hit Enter:
5. cd into hello-world and run gatsby develop
6. Open your browser and go to http://localhost:8000

You will see the “Hello world!” displayed in your browser.

Now you can start editing by opening the source code on your code editor like VS Code or the IDE of your choice.

A look at the future of Gatsby

There’s been a lot of conversation about the push by the Gatsby team to use Gatsby Cloud — the cloud platform built specifically for building, previewing, and deploying Gatsby websites — in hosting your websites.

Developers are having second thoughts about being locked down on the Gatsby Cloud, should they use it for hosting their Gatsby websites.

And so we are seeing the evolution of Gatsby from a static site generator into cloud-based solutions.

In some exciting news, Gatsby is joining Netlify.

The Gatsby team has highlighted some important features that they are working on and personally I’m really looking forward to the future of building the modular web.

These feature updates are

1. Accelerated sourcing: This feature will quicken the sourcing of content from the API for large sites
2. Extending the source plugin ecosystem
3. Runtime GraphQL: This will bring the ability to query GraphQL in build time and from functions

I look forward to seeing your comments and thoughts on hosting your website on Gatsby Cloud and the recent announcement of Gatsby joining Netlify.

Conclusion

Gatsby has revolutionized the way we build for the web. First, as a meta-framework built on top of ReactJS, and now with Gatsby Cloud, giving developers the power to build, preview, and experiment with their websites in production.

The strength of Gatsby lies in its data layer and reactive build.