Getting Started with Gatsby, the Cloud Native Static Site Generator

If you build websites, or your company depends upon a website, there’s probably one thing you hate dealing with — static sites. They’re boring, they don’t show off your skills, and they certainly don’t “wow” users.

However, static sites serve a purpose. Many times they are informative, other times they are a quick and easy way to reach out to consumers. No matter why you must make use of static pages on your site, you probably dread creating them.

That’s where Gatsby comes in. Gatsby (Officially Gatsby.JS) is a React-based, GraphQL-powered static site generator that pieces together parts of React, webpack, react-route, GraphQL, and other tools into a developer-friendly framework. Gatsby is part of JAMStack, which is a new way of building websites and apps aimed at delivering better performance, higher security, lower cost of scaling, and an overall better developer experience.

Gatsby can also be used on its own with pre-configurations and starters to build static sites for:

• Lightning fast page load speeds
• Service workers
• Code splitting
• Server-side rendering
• Intelligent image loading
• Asset optimization
• Data prefetching

Using the Gatsby Command Line Interface (CLI), you can create partially built sites (with some default configurations), called starters. This is a great way to help you get started using Gatsby.

Now, here’s the thing with Gatsby: When you start using it, you’ll probably think, “But I can build a static site with plain old HTML much faster than I can with Gatsby’s fancy language and files.” That may be true. However, with Gatsby (and the right tools in your CI/CD pipeline) you could work this up such that the deployment of those static sites is automatic. On top of that, with the help of starters, you can deploy complete sites in seconds to help you get started with developing something custom.

Let’s install and get started with this exciting bit of technology.

Your Platform of Choice

Gatsby can be installed on Linux, macOS, and Windows. I’ll be demonstrating on the Linux platform (specifically, Ubuntu Server 18.04). Although the installation for each platform will vary, because Gatsby is a CLI tool, the usage should be the same.

With that said, let’s install Gatsby.

Installing Gatsby

The first thing you’ll want to do is update and upgrade your operating system. Remember, however, that if your kernel is upgraded in the process you’ll need to reboot the system. Because of this, make sure to run the update/upgrade when a reboot is feasible.

To update and upgrade Ubuntu, log into your instance, gain access to a terminal window, and issue the following two commands:

sudo apt-get update

sudo apt-get upgrade -y

Next you’ll need to install two dependencies with the command:

sudo apt-get install curl git -y

Once the above command completes, install the latest version of nvm with the command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

When the above command completes, you should have a working instance of nvm. You can verify that with the command:

nvm --version

The above command should print out the newly-installed version of nvm.

Next we need to set the version of Node.js to be used. First, however, we need to install it. This is very simple with the nvm command:

nvm install 10

When that completes, make sure to set the default version with the command:

nvm use 10

Finally, we can install the Gatsby CLI with the command:

npm install -g gatsby-cli

When the above command completes, you can verify the installation with the command:

gatsby --help

You should see the help file printed out (Figure 1).

👁 Image

Figure 1: Gatsby has been successfully installed.

Create Your First Gatsby Site

Now that you have Gatsby installed, it’s time to create your first site. Let’s use the tried and true Hello, World! example. Fortunately, there’s a starter for Hello, World! that allows you to pull down all of the necessary bits from Github.

To create a new Hello, World! site from the starter, issue the command:

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

The above command will pull down the Hello, World! starter (naming it hello-world) and install all of the necessary bits and pieces to deploy the site. When this finishes, you’ll find a newly-created directory. Change into that directory with the command:

cd hello-world

Within this new directory, you’ll find everything you need for the new site, including:

• gatsby-config.js
• LICENSE
• node_modules
• package.json
• package-lock.json
• README.md
• src
• static

You can go through the various files and folders to customize the page. For example, in the src/pages directory, you’ll find the index.js file. Issue the command:

nano index.js

And you’ll see the page that displays the Hello, World! message (Figure 2).

👁 Image

Figure 2

The index page for our Hello, World site.

Let’s change that to Hello, New Stack!. Once you’ve done that, save and close the file. Change back into the ~/hello-world directory with the command:

cd ~/hello-world

Next we must start the built-in Gatsby server. This is strictly for development purposes (so you won’t be serving these sites up to the public this way). To start the server, issue the command:

gatsby develop

With the server running, you can now open a web browser and point it to http://localhost:8000. You probably have already spotted the first problem. We’ve installed Gatsby on a headless server. If you’d installed Gatsby on a Linux machine with a desktop, your browser would render that page. But since we’re on a server, we want to instruct Gatsby what IP address to use. For that, we’ll have it serve the site on the same IP address of the server with the command:

gatsby develop --host=SERVER

Where SERVER is the IP address of the hosting machine.

Now, if you point your browser to http://SERVER:8000 (Where SERVER is the IP address of the hosting machine), you’ll see Hello, New Stack printed out (Figure 3).

👁 Image

We’ve successfully deployed our modified Hello, World! site.

And that’s all there is to installing Gatsby and deploying your first site. You’ll find a lot more starters to help you get working with this tool from within the Starter Library. Start working with Gatsby and see if you can’t make it a part of your web dev pipeline.

Feature image by Zbynek Burival on Unsplash.