What is Gatsby

It is a front-end framework for building websites: it is fast, secure and scalable and provides the tools to make the site accessible to everyone. It is based on React, so everything that can be done with React can also be done with Gatsby. When developing a website, you can choose to start from scratch in its construction or you can use one of the many predefined and open source starters, choosing the one that best matches our idea for the site. There are starters to create blogs, e-commerce sites or documentation sites of various kinds. In addition, there are thousands of plugins through which it is possible to extend Gatsby's features to make the development of our site simpler and more functional.

Prerequisites

To better understand Gatsby's mechanisms and features, it is useful to have at least basic knowledge of the technologies and languages that underpin web development, such as:
- HTML (HyperText Markup Language): it is the language used to create web pages; it allows the definition of both the content of the page and its formatting
- CSS (Cascading Style Sheets): it is the language used to define the styling of pages or documents written in HTML, that is, web pages
- Javascript: it is an object-oriented language used in web programming both on the client and server side, to make HTML documents dynamic and interactive.

It is recommended to also have basic knowledge of:
- CLI(Command Line Interface): provides the functionality to issue commands by typing instructions instead of using the mouse
- React: it is a Javascript library for building web pages, particularly focused on defining the user interface
- GraphQL: it is a query language for APIs (application programming interfaces). It is possible to install Gatsby on the most common operating systems, such as Windows, Linux or MacOS.

This guide provides instructions for the Windows environment.

Preparing the development environment

Before proceeding with the installation of Gatsby, the following tools must be installed:
- Node.js:

it is a framework that allows Javascript code to run outside the browser, i.e., on the server side.
To install it, download the package for the required version and run it. Along with Node.js, the following are also installed:
- npm(Node Package Manager): it is a package manager with a command line interface (CLI) that allows installation, updating and management of dependencies for Node.js libraries and applications.
- Git:

it is a VCS (Version Control System). It allows tracking all changes made to the source code and saving snapshots whenever we deem appropriate.
This way, if we realize during coding that we took the wrong path, it is possible to go back and restore a previous version.
To install Git, download the package (link) and run it.
- Visual Studio Code:

it is a source code editor with advanced features for debugging, integrated version control (Git), syntax highlighting and much more.
Alternatively, you can use any other editor, although using Visual Studio Code greatly facilitates the website building process.
You can download the package for your operating system from here
- Gatsby CLI (Gatsby Command Line Interface):
it is a tool that allows the creation and maintenance of websites.
Gatsby CLI is distributed as an npm package, so it is installed using npm commands:
- open the Windows command prompt (Win key + R and type "cmd")
- type this command and press Enter:
- the installation may take a few minutes.
At the end, to verify the process completed successfully, you can check the installed version with the command:- if the installation finished without errors, the previous command will display the installed version; for example:

Gatsby CLI version: 3.12.0

Of course, there are other available commands and you can list them with:The result will be:

Usage: gatsby <command> [options]

Commands:
gatsby develop                        Start development server. Watches files, rebuilds, and hot reloads if something changes
gatsby build                          Build a Gatsby project.
gatsby serve                          Serve previously built Gatsby site.
gatsby info                           Get environment information for debugging and issue reporting
gatsby clean                          Wipe the local gatsby environment including built assets and cache
gatsby repl                           Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
gatsby plugin <cmd> [plugins...]      Useful commands relating to Gatsby plugins
gatsby new [rootPath] [starter]       Create new Gatsby project.
gatsby telemetry                      Enable or disable Gatsby anonymous analytics collection.
gatsby options [cmd] [key] [value]    View or set your gatsby-cli configuration settings.

Options:
--verbose                             Turn on verbose output [boolean] [default: false]
--no-color, --no-colors               Turn off the color in output [boolean] [default: false]
--json                                Turn on the JSON logger [boolean] [default: false]
-h, --help                            Show help [boolean]
-v, --version                         Show the version of the Gatsby CLI and the Gatsby package in the current project [boolean]

At this point, we have the tools needed to build a site with Gatsby.
In the next article, we will see how it is possible to create a blog.