Set Up Your Development Environment
Before you start to code, you’ll need to familiarize with some core web technologies, and make sure that you have installed all required software tools.
Overview of core technologies
It’s not necessary to be an expert with these already — if you’re not, don’t worry! You’ll pick up a lot through the course of this tutorial series; These are some of the main web technologies you’ll use when building a Gatsby site:
- HTML: A markup language that every web browser is able to understand. It stands for HyperText Markup Language. HTML gives your web content a universal informational structure, defining things like headings, paragraphs, and more.
- CSS: A presentational language used to style the appearance of your web content (fonts, colors, layout, etc).
- GraphQL: A query language; A programming language that allows you to pull data into your website. It’s the interface that Gatsby uses for managing site data.
Familiarize with 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). It’s a lot like using the Finder on a Mac, or Explorer on Windows. Finder and Explorer are examples of graphical user interfaces (GUI). The command line is a powerful, text-based way to interact with your computer.
💡 For a great introduction to using the command line, check out Codecademy’s Command Line tutorial for Mac and Linux users, and this tutorial for Windows users. (Even if you are a Windows user, the first page of the Codecademy tutorial is a valuable read, as it explains what the command line is, not just how to interface with it.)
⌚ Download Node.js
Visit the Node.js site and follow the instructions to download and install the recommended version for your operating system. Once you have followed the installation steps, make sure everything was installed properly:
✋ Check your Node.js installation
- Open up your terminal.
node --version. (If you’re new to the command line, “run
command” means “type
node --versionin the command prompt, and hit the Enter key”. From here on, this is what we mean by “run
The output of each of those commands should be a version number. (Your versions may not be the same as those shown below!) If entering those commands doesn’t show you a version number, go back and make sure you have installed Node.js.
Familiarize with npm
npm has three distinct components: the npm website, the npm registry, and the npm CLI (command line interface).
- Once you’ve identified a package you want, you can use the npm CLI to install it in your project. The npm CLI is what talks to the registry — you generally only interact with the npm website or the npm CLI.
💡 Check out npm’s introduction, “What is npm?”.
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. When you install a Gatsby “starter” site, Gatsby uses Git behind the scenes to download and install the required files for your starter.
If your system does not have Git installed, install it from https://git-scm.com/downloads
Install the Gatsby CLI
The Gatsby CLI tool lets you quickly create new Gatsby-powered sites, and run commands for developing Gatsby sites. It is a published npm package. You can install the Gatsby CLI from the npm registry, using the npm CLI.
✋ Install the Gatsby CLI tool
- Navigate to the terminal.
npm install --global gatsby-cli.
A couple of different things are happening here.
npm install --global gatsby-cli
- We’re using the npm CLI to install the Gatsby CLI.
npm installis the command used to install packages.
- When installing npm packages, you can install them globally, or in a specific project. (We’ll learn about the latter, later). The
--globalflag signals that we want the first option, to install globally. This means our package will be available to us on our computer, outside of the context of a specific project.
gatsby-cliis the exact name our desired package is registered with on the npm registry.
✋ Check your Gatsby CLI installation
- Open up your terminal.
If successfully installed, running
gatsby --version should return a version number, and running
gatsby --help will show different commands available to you using the
Create a site
Now let’s use the gatsby-cli tool to create your first Gatsby site. Using the tool, you can use “starters”, or partially built sites with some default configuration, to help you get moving faster on creating a certain type of site. The “Hello World” starter we’ll be using here is a starter with the bare essentials needed for a Gatsby site.
✋ Create a Gatsby site
- Open up your terminal.
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world. (Note: Depending on your download speed, the amount of time this takes will vary. For brevity’s sake, the gif below was paused during part of the install).
What just happened?
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
- Starting with
gatsbysays, ‘hey, we want to use the gatsby-cli tool!’
newis a gatsby command to create a new Gatsby project.
hello-worldis an arbitrary title — you could pick anything. The CLI tool will place the code for your new site in a new folder called “hello-world”.
- Lastly, the GitHub URL specified points to a code repository that holds the starter code you want to use. If you aren’t familiar yet with git and GitHub, you can learn more here.
- This says ‘I want to change directories (
cd) to the “hello-world” subfolder’. Whenever you want to run any commands for your site, you need to be in the context for that site (aka, your terminal needs to be pointed at the directory where your site code lives).
- This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet).
✋ View your site locally
Open up a new tab in your browser and navigate to http://localhost:8000.
Congrats! This is the beginning of your very first Gatsby site! 🎉
You’ll be able to visit the site locally at http://localhost:8000 for as long as your development server is running. (That’s the process you started by running the
gatsby develop command). To stop running that process (or to “stop running the development server”), go back to your terminal window, hold down the “control” key and then hit “c” (ctrl-c). To start it again, run
gatsby develop again!
Note: If you are using VM setup like
vagrant, and/or would like to listen on your local ip address, run
gatsby develop --host=0.0.0.0. Now, the developement server listens on both ‘localhost’ and your local ip.
Set up a code editor
A code editor is a program designed specifically for editing computer code. There are many great ones out there; If you haven’t worked with a code editor before, we recommend the editor used throughout this tutorial — VS Code.
✋ Download VS Code
Visit the VS code site, and download the version appropriate for your platform.
✋ Install Prettier plugin
We also recommend using Prettier — Prettier is a tool that helps format your code, keeping it consistent (and helping to avoid errors!).
You can use Prettier directly in your editor using the Prettier VS Code plugin:
- Open the extensions view on VS Code (View => Extensions)
- Search for “Prettier - Code formatter”
- Click “Install”. After installation you’ll be prompted to restart VS Code to enable the extension.
➡️ What’s Next?
To summarize, in this section you:
- Installed and learned about Node.js and the npm CLI tool
- Installed and learned about the Gatsby CLI tool
- Generated a new Gatsby site using the Gatsby CLI tool
- Downloaded a code editor
- Installed a code formatter called Prettier
Now, let’s move on to getting to know Gatsby building blocks.