Intro to Gatsby.js

Photo by Maria Teneva

What is Gatsby.js?

Gatsby.js is a React-based open-sourced framework. It is advertised as, “One front-end to rule them all” on their website. You may ask why should I even use this framework when I can use things such as React, Angular, and/or Vue.

Simply put, Gatsby.js is a static site generator. It generates static HTML files that we can load onto a server fairly quickly.

On a whim, I decided to give Gatsby.js a try to see what it offers and my experience with it was incredible. Within less than 20 minutes I had a static website built that would allow me to have multiple other pages linked together. Let’s dive in and see how easy and lightweight this framework really is!

The set up:

1. Make sure you have Node.js on your system. We will require this to set up Gatsby. If you do not have access to use npm in your terminal, that means it is not set up. To install it on your system, here is a link.
2. We will need Git installed as well. Git is a version control system that is designed to easily handle projects. When we use Gatsby’s boilerplate, they use Git behind the scenes! To install Git onto your systems, click here!
3. Once we have these two installed on our system, we can use Gatsby!

Installation

The first step is to install Gatsby and get it running via our terminal.

npm install -g gatsby-cli

This installs the Gatsby CLI (command-line interface) utility.

Now let’s create our “Hello World” site up and running!

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

It will take some time for it to install, so take a sip of water or coffee and wait. Once installed, let’s take a look at what was created:

A look into the helloWorld folder we created

Now let’s run this command in our terminal:

cd helloWorld
gatsby develop

This will spin up everything onto localhost:8000

View from our browser

Hmmm, now let us go into the folder in our code editor (I will be using VS Code):

A look into the folder with VS Code

We see a few folders along with some other files:

.cache
node_modules
public
src
static
.gitignore
.prettierignore
.prettierrc
gatsby-config.js
LICENSE
package-lock.json
package.json
README.md

For now, we will focus on the src folder that holds another folder within it labeled “pages”. Let’s look at the index.js file, if you change “Hello world!” to something else and save it, our browser will do a hot reload. This means the page does not need to be refreshed to see the changes made (This is a really neat functionality Gatsby.js offers under the hood).

If we want to add another page, we can just simply add another .js file within the same folder that is holding index.js.

Let’s create a file called secondpage.js, with this as the content:

import React from "react"
export default function secondpage() {
return <div>Hey! This is another page!</div>
}

Let’s save it and go back to our browser. Now let’s change our URL to http://localhost:8000/secondpage what do you think we will see? No way would it be that easy!

IT WAS THAT EASY TO MAKE ANOTHER PAGE?!

Boom! It really is that easy to make another page….

But you might be wondering…

“Can we link the pages?”

Yup, we definitely can! We just need to import a Gatsby- provided React component, because remember, it is a React-based framework!

In our index.js file let’s do just that:

import React from "react"
import { Link } from "gatsby"
export default function Home() {
return (
<div>
Hello world!!!
<Link to="/secondpage"> Second page </Link>
</div>
)
}

Now save it and let’s go back to our browser:

WOW!!!!!

Next steps:

You can style your new amazing Gatsby site however you would like. Gatsby provides great documentation on the different available ways to style your page.

There are also plugins you can use if you decide to build a bigger project, they help you modularize your site into site-specific functionalities.

Once you are finished with everything, you can compile your Gatsby site:

gatsby build

This will make it ready for deployment!

Enjoy!

Thank you for taking the time to read this, please let me know if you found this useful!