In this post, we will talk about Gatsby (also known as GatsbyJS). Basically, Gatsby is a static website generator. It’s React based and uses GraphQL under the hood.

A static site generator means that it generates a website that works with only static files, which leads to a fast and smooth experience to the user. Aside from performance, SEO also benefits from the static nature of the generated website, while it’s also cheaper and way less complex to host and deploy.

There are lots of plugins and themes to cut short your work, and make it even easier to start.

How Gatsby works?

In Gatsby, you can:

• Build the static pages directly, using React and other data;
• Fetch content stored in different sources to apply in templates (also built with React);

These pages can make API calls and provide interaction with the user, even though it’s only static files.

When compiling, Gatsby has a develop mode, used for developing your website locally, and build mode, which fully builds the site to be deployed to production, with a bunch of optimizations.

Basically, at build time, NodeJS converts your assets and pages on HTML and JS that can be accessed by a web browser, througb a process that is known as server-side rendering. You can define sources of data through gatsby-config.js and write code to create pages dynamically in the gatsby-node.js file. Everything that is created in the build process is put in the public directory.

Getting started

First, you should install the Gatsby CLI package. You can do that through NPM: npm install -g gatsby-cli.

After that, you can already use the gatsby CLI to create a new project. We will use the Starter Blog from Gatsby, which you will probably notice, is the base for this website. The command for it is: gatsby new lets-test-gatsby https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/

After everything finishes running, you will have the lets-test-gatsby folder ready with the basic structure for the website.

You can run gatsby develop to spin up the dev server, and then you can access your website in http://localhost:8000/.