Chapter 10. Building and Deploying Static React Sites with Gatsby

Gatsby is a static website generation tool for React developers. In essence, this tool lets you build React components and captures their rendered output to use as the static site content. However, Gatsby takes static site generation to the next level. In particular, it provides mechanisms for sourcing your website data and transforming it into GraphQL that's more easily consumed by React components. Gatsby can handle anything from a single page brochure site to a site that spans hundreds of pages.

Here's what you'll learn in this chapter:

• Why you would want to build a static site using React components
• Building simple Gatsby sites using starters
• Using data from your local filesystem
• Using remote data from Hacker News

Why static React sites?

Before you get started with building static websites using Gatsby, let's set the context with a brief discussion on why you would want to do this. There are three key factors at play here —we'll go over each of them now.

Types of React apps

React has connotations with apps that are very interactive and with lively data that changes a lot. This might be true of some apps, perhaps even most apps, but there are still cases where the user is looking at static data—information that doesn't change or changes very infrequently.

Consider a blog. The typical flow is for an author to publish some content and then that content is served to anyone who visits the site, who can then view the content. The common case is that once the content is published, it stays the same, or, it stays static. The uncommon case is that the author makes updates to their post, but even then, this is an infrequent action. Now, think about your typical blog publishing platform. Every time a reader visits...

Building your first Gatsby site

The first step to using Gatsby is to install the command-line tool globally:

npm install gatsby-cli -g

Now you can run the command-line tool to generate your Gatsby project, not unlike how create-react-app works. The gatsby command takes two arguments:

• The name of the new project
• The URL of the Gatsby starter repository

The project name is basically the name of the folder that's created to hold all of your project files. A Gatsby starter is kind of like a template that makes it easier for you to get rolling, especially if you're learning. If you don't pass a starter, the default starter is used:

gatsby new your-first-gatsby-site

Running the above command would be the same as running:

gatsby new your-first-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

In both cases, the starter repository is cloned into the your-first-gatsby-site directory and then dependencies are installed for you. If all goes well, you should see the console output that looks similar...

Adding local filesystem data

In the previous section, you saw how to get a basic Gatsby website up and running. This website wasn't very interesting because there was no data to drive it. For example, the data that drives a blog is the blog entry content stored in a database—the blog framework that renders the post lists and posts themselves use this data to render markup.

You can do the same thing with Gatsby but in a more sophisticated way. First, the markup (or in this case, React components) is statically built and bundled once. These builds are then served to users without having to query a database or API. Second, the plugin architecture used by Gatsby means that you're not restricted to only one source of data and that different sources are often combined. Lastly, GraphQL is the querying abstraction that sits on top of all of these things and delivers data to your React components.

To get started, you need a data source to drive the content of your website. We'll keep things simple...

Fetching remote data

Gatsby has a rich ecosystem of data source plugins—we don't have time go through all of them. It's common for a Gatsby source plugin to reach out to another system and fetch data over the network at build time. The gatsby-source-hacker-news plugin is a great plugin to start with, so that you can see how this fetching process works with Gatsby.

Instead of building your own Hacker News website using Gatsby, we'll use the demo created by https://github.com/ajayns. To get started, you can clone into his repo as follows:

git clone https://github.com/ajayns/gatsby-hacker-news.gitcd gatsby-hacker-news

Then you can install dependencies, including the gatsby-source-hacker-news plugin:

npm install

You don't need to edit the project configuration to enable anything, because this is already a Gatsby project. Simply start the development server as you've done throughout this chapter:

gatsby develop

Compared to other websites you've worked on this chapter, this time around the build takes...

Summary

In this chapter, you learned about Gatsby, a tool for generating static websites based on React components. We started the chapter off with a discussion on why you might want to consider building static sites, and why React is a good fit for this job. Static sites lead to an overall better user experience because they don't utilize the same types of resources as regular React apps would.

Next, you built your first Gatsby website. You learned the basic layout of files that are created by Gatsby starter templates and how to link pages together. Then, you learned that Gatsby data is driven by a plugin architecture. Gatsby is able to support various data sources via plugins. You got started with local filesystem data. Next, you learned about transformer plugins. These types of Gatsby plugins enable specific types of data sources to be queried via GraphQL.

Lastly, you looked at a Hacker News example built using Gatsby. This exposed you to fetching remote API data as the data source and...