Installing Gatsby.js on Ubuntu: A Step-by-Step Guide

This guide explains how to install Gatsby.js on Ubuntu Linux. Gatsby is a framework used to build fast and secure websites. It uses React to connect different data sources into one smooth experience.

Why use Gatsby? It lets you build professional websites that load quickly and connect easily to tools like WordPress or Shopify.

What happens when done? You will have a working Gatsby development environment ready to build your own web projects.

Install NVM (Node Version Manager) and Node.js

Gatsby runs on Node.js. We use NVM to manage your Node.js versions easily.

First, update your system and install curl:

sudo apt update
sudo apt install curl

Next, download the latest NVM installer. Note: Always verify the script hash provided on the official %%LNK0%% NVM repository before running it to ensure security.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Refresh your shell so NVM works:

source ~/.bashrc

Now, install the current Long Term Support (LTS) version of Node.js, which is v22:

nvm install 22
nvm use 22

Gatsby CLI

The Gatsby CLI is a tool that helps you create and manage your sites. Install it with this command:

npm install -g gatsby-cli

Check the version to confirm it is installed:

gatsby --version

Create Gatsby app

Now, create your first project. Run this command:

gatsby new

The CLI will ask you a few questions to set up your project:

• What would you like to call your site? Choose a name like “myapp”.
• What would you like to name the folder? Press enter to use the default.
• Will you be using JavaScript or TypeScript? Choose based on your preference.
• Will you be using a CMS? Select “No” for now.
• Would you like to install a styling system? Choose your preferred CSS framework (like Tailwind or CSS Modules).

The tool will automatically download the necessary files and set up your folder structure.

Access your app

Move into your new project folder and start the development server:

cd myapp/
gatsby develop

Open your web browser and go to:

http://localhost:8000

Note: If you see an error saying the port is in use, another program is already running on port 8000. You can try a different port by adding the -p flag, like this: gatsby develop -p 8001.

Conclusion

You now have Gatsby.js running on your Ubuntu machine. You have set up the environment, installed the CLI, created a new project, and launched the development server. You are ready to start building your website.