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

Install NVM (Node Version Manager) and Node.js

To get Gatsby.js running on Ubuntu, you first need Node.js, and the best way to manage it is with NVM, which stands for Node Version Manager. This tool makes it super easy to switch between different Node.js versions if you ever need to. We’ll start by updating your system and installing a tool called curl, which helps download files.

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%copy% 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

With Node.js ready, creating your first Gatsby app is simple using the Gatsby command-line interface (CLI). Just run the ‘gatsby new’ command, and it will guide you through the setup. You’ll be asked for your site’s name, whether to use JavaScript or TypeScript, and if you want to connect a CMS, making it easy to get started.

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

Once your Gatsby app is created, you’ll want to see it in action. Navigate into your project folder using the ‘cd’ command, then start the development server with ‘gatsby develop’. Your new site will then be available to view in your web browser at http://localhost:8000, letting you see your changes live.

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.