Latest

Join RVA Research for a reading at no-cost. Learn more

Contact
Book Consultation

Latest

Join RVA Research for a reading at no-cost. Learn more

How-to Guides

Part 0: Set Up Your Development Environment

Introduction2

Welcome to the Gatsby Tutorial! We’re excited you’re here.

Before you start building your first Gatsby site, you’ll need to familiarize yourself with some core web technologies and make sure that you have installed all required software tools.

By the end of this part of the Tutorial, you will:

  • Have a basic understanding of the key technologies needed to create a Gatsby site.
  • Install all the required software tools.
  • Create all the necessary accounts for deploying your site online.

Background Knowledge

The Tutorial is intended to be as approachable as possible for people who are new to Gatsby and React. With that said, if you are brand new to web development (welcome!), you might find it helpful to learn some fundamentals first.

Don’t worry, you don’t need to be an expert with these! A high-level understanding of the basics should be enough. You’ll pick up a lot through the course of the Tutorial.

  • HTML: A markup language that every web browser is able to understand. It stands for HyperText Markup Language. You use HTML to add structure to your web content, defining things like headings, paragraphs, and more.
  • CSS: A presentational language used to style the appearance of your web content (fonts, colors, layout, etc). It stands for Cascading Style Sheets.
  • JavaScript: A programming language that lets you make your web content dynamic and interactive.
    • In this Tutorial you will use the following concepts: creating and using variables, destructuring objects and arrays, arrow functions, array methods like .map().
    • Learn more about JavaScript with the Basic JavaScript course on freeCodeCamp.
  • The command line: The command line is a text-based interface used to run commands on your computer. You’ll also often see it referred to as the terminal. In this tutorial, we’ll use both interchangeably.
    • If you’re new to the command line, “running” a command, means “writing a given set of instructions in your command prompt, and hitting the Enter key”. Commands will be shown in a highlighted box, something like node --version, but not every highlighted box is a command! If something is a command it will be mentioned as something you have to run/execute.
    • The instructions for how to use the command line differ slightly based on what operating system your computer uses:

In addition to the ones listed above, Gatsby uses a few more technologies under the hood. The Tutorial will teach you everything you need to know about the following tools. But if you’re interested in getting a head start, here’s a bit more information:

  • React: A code library (built with JavaScript) for building user interfaces. It’s the framework that Gatsby uses to build pages and structure content.
  • GraphQL: A query language that allows you to pull data into your website. It’s the interface that Gatsby uses for managing site data.

Installation Guide

The rest of this part of the Tutorial walks you through how to install the following tools:

Node.js

Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have Node.js version 14.15 (or newer) installed on your computer.

npm is a package manager that comes bundled with Node.js. You’ll use the npm command line interface to add packages to your site (like Gatsby plugins) and to run command line tasks (like starting up your site).

Follow the installation instructions below, based on your computer’s operating system. (Click the header to expand the section.)

Part 0: Set Up Your Development Environment

Introduction2

Welcome to the Gatsby Tutorial! We’re excited you’re here.

Before you start building your first Gatsby site, you’ll need to familiarize yourself with some core web technologies and make sure that you have installed all required software tools.

By the end of this part of the Tutorial, you will:

  • Have a basic understanding of the key technologies needed to create a Gatsby site.
  • Install all the required software tools.
  • Create all the necessary accounts for deploying your site online.

Background Knowledge

The Tutorial is intended to be as approachable as possible for people who are new to Gatsby and React. With that said, if you are brand new to web development (welcome!), you might find it helpful to learn some fundamentals first.

Don’t worry, you don’t need to be an expert with these! A high-level understanding of the basics should be enough. You’ll pick up a lot through the course of the Tutorial.

  • HTML: A markup language that every web browser is able to understand. It stands for HyperText Markup Language. You use HTML to add structure to your web content, defining things like headings, paragraphs, and more.
  • CSS: A presentational language used to style the appearance of your web content (fonts, colors, layout, etc). It stands for Cascading Style Sheets.
  • JavaScript: A programming language that lets you make your web content dynamic and interactive.
    • In this Tutorial you will use the following concepts: creating and using variables, destructuring objects and arrays, arrow functions, array methods like .map().
    • Learn more about JavaScript with the Basic JavaScript course on freeCodeCamp.
  • The command line: The command line is a text-based interface used to run commands on your computer. You’ll also often see it referred to as the terminal. In this tutorial, we’ll use both interchangeably.
    • If you’re new to the command line, “running” a command, means “writing a given set of instructions in your command prompt, and hitting the Enter key”. Commands will be shown in a highlighted box, something like node --version, but not every highlighted box is a command! If something is a command it will be mentioned as something you have to run/execute.
    • The instructions for how to use the command line differ slightly based on what operating system your computer uses:

In addition to the ones listed above, Gatsby uses a few more technologies under the hood. The Tutorial will teach you everything you need to know about the following tools. But if you’re interested in getting a head start, here’s a bit more information:

  • React: A code library (built with JavaScript) for building user interfaces. It’s the framework that Gatsby uses to build pages and structure content.
  • GraphQL: A query language that allows you to pull data into your website. It’s the interface that Gatsby uses for managing site data.

Installation Guide

The rest of this part of the Tutorial walks you through how to install the following tools:

Node.js

Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have Node.js version 14.15 (or newer) installed on your computer.

npm is a package manager that comes bundled with Node.js. You’ll use the npm command line interface to add packages to your site (like Gatsby plugins) and to run command line tasks (like starting up your site).

Follow the installation instructions below, based on your computer’s operating system. (Click the header to expand the section.)