How To Install Gatsby Node Framework on Ubuntu 20.04 | 22.04 LTS

In this tutorial, we will show you how to install and use Gatsby.js on Ubuntu

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX (Markdown with JSX), images, and numerous Content Management Systems such as WordPress, Drupal and more. Since version 4 Gatsby also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server. Gatsby is developed by Gatsby, Inc. which also offers a cloud service, Gatsby Cloud, for hosting Gatsby websites.

Install Gatsby.js on Ubuntu

Follow the steps below to get started with Gatsby.js :

• Update your Ubuntu system packages with running the below command:

sudo apt update -y && sudo apt upgrade -y

• Gatsby.js package is not available on Ubuntu base repository. So You can install it by adding the NodeSource repo as follows:

wget -qO- https://deb.nodesource.com/setup_16.x | sudo -E bash

• Install the Node.js as shown below:

sudo apt install nodejs -y

• Install NVM using the bash script:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

• Load the nvm to your current session using the source command as follows:

source $HOME/.bashrc

• Check the versions of Node.js are currently available on your system using NVM as follows:

nvm install --lts

• Also install node using NVM:

nvm install node

• Verify the latest LTS version has been installed of npm and nodejs as shown below:

node -v
npm -v

• Using node package manager (npm), install gatsby command line

npm -g install gatsby-cli

• Verify that it has been installed successfully by checking its version as shown below:

gatsby --version

Create a Site with Gatsby.js

• Now we will create the first project using Gatsby. so run the gatsby command below to create a new project:

gatsby new

• As shown below, answer and complete the following info required to complete the project creation:

• Once it is finished, you will see the next info, so you have to change directory to the project directory then run the npm run develop command:

cd unixcopapp/
npm run develop

• Once is done, open your favorite web browser and go to: http://localhost:8000/ &&  http://localhost:8000/___graphql as shown below in the next two screenshots

Install Gatsby.js  -Conclusion

That’s it

Thanks.