Before a site can be built, the desk has to be ready. That means a terminal you can open, a current version of Node.js, Git for version control, the Gatsby command line tool, and an editor you are comfortable using. This lesson walks through each one in the order that makes the next step possible.
Open the terminal
A terminal is where you type instructions and read what the machine sends back. On macOS it is called Terminal. On Windows it is PowerShell or Windows Terminal. On Linux it is whatever terminal your desktop provides. Finder and Explorer show you the same machine with icons and folders; the terminal shows it as text.
Find it, open it, and keep it nearby. You will use it for every step below.
Install Node.js
Gatsby runs on Node.js, the runtime that lets JavaScript live outside a browser tab. Installing Node also installs npm, the package manager you will use for the rest of the lesson. Download the current installer from the Node.js site and follow the prompts for your operating system.
When the installer finishes, close the terminal and open it again. Then ask Node and npm for their version numbers. If both answer with a number, the installation worked.
A command that returns a version number is a working command. A command that returns "not found" means the terminal cannot see the tool yet. Reopen the terminal before changing anything else.
Install Git
Git tracks changes to your files. Gatsby starters are downloaded from Git repositories, and version control gives you a way back when an experiment goes sideways. Install Git from the official downloads page for your platform.
After it is installed, ask Git for its version. Then set the name and email that will appear on your commits. Those details are part of the history you are about to create.
git status
git config user.name "Your Name"
git config user.email "you@example.com"Add the Gatsby command line tool
The Gatsby command line tool creates projects, runs a local development server, and builds the files you deploy. You do not need to install it globally. npm can run it for a single command with npx, which keeps your machine closer to a clean state.
npx gatsby new notebookThe command asks Gatsby to create a folder called notebook from its default starter. If the download takes a while, that is normal. The Gatsby documentation linked below explains how to choose a different starter.
The first run may mention anonymous usage data. The telemetry note explains what Gatsby collects and how to opt out.
Start the development server
Move into the new folder and start Gatsby in development mode. The development server watches your files and updates the browser when they change.
cd notebook
npx gatsby developOpen a browser and visit the local address the terminal prints. You should see the starter site. To stop the server, return to the terminal and press Ctrl and C together.
Choose an editor
Any code editor will work. Visual Studio Code is a common choice because it has a large extension library and good defaults for JavaScript. Once it is installed, add the Prettier extension so that formatting stays consistent without becoming a manual chore.
Open the notebook folder in the editor. You should see the same files the terminal created. That connection between the terminal and the editor is the working desk.
The technologies under the tutorial
Gatsby is a framework for building websites with React. The pages you write are React components. A build step turns them into HTML, CSS, and JavaScript that a browser can load. GraphQL is the layer Gatsby uses to bring data into those pages.
- HTML gives the page its structure.
- CSS gives it appearance and layout.
- JavaScript adds behaviour and interactivity.
- React lets you describe the interface as components.
- GraphQL lets you query the data a page needs.
You do not need to master all five before you continue. You need to recognise them when they appear.
Next steps
With the development server running, the next useful step is to change a heading and watch the page update. Then open the next lesson to see how pages, components, and the data layer fit together.
When you are ready to publish, the deployment notes explain how a build becomes a public site: read the deployment notes.