Install Gatsby on Ubuntu 20.04

What is Gatsby?

Gatsby is a React based build time static site generator that uses Webpack and GraphQL. It makes easy to work with data in React apps. It contains GraphQL data layer. During build time Gatsby fetches all the data, renders the entire website into static HTML, CSS, JS files with the data available at that time. As it generates the static files, Gatsby applications can be deployed in anywhere.

Steps to install Gatsby on Ubuntu 20.04

• Update and upgrade the OS:

  sudo apt update
  sudo apt -y upgrade
  

• Install curl:

  sudo apt-get install curl
  

• Download and install latest version of nvm:

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

• (Optional) To use nvm in zsh, append the following lines to the ./zshrc file:

  export NVM_DIR=~/.nvm
   [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
  

• Close and restart the terminal.

• Check nvm version:

  nvm --version
  

• Set default Node.js version:

  nvm install 12
  nvm use 12
  

• Check node and npm version:

  npm --version
  node --version
  

• Install Gatsby CLI:

  npm install -g gatsby-cli
  

• Check if gatsby-cli is installed properly:

  gatsby --help
  

• (Optional) We may get error message like:

  Gatsby requires Node.js 12.13.0 or higher (you have v10.24.0)
  

  To solve this, first we need to install nvm 12:

  nvm install 12
  nvm alias default 12
  

  Then, to install Node.js version 12, we need to install n:

  npm install -g n
  

  Take ownership of the system directories:

  # make cache folder (if missing) and take ownership
  sudo mkdir -p /usr/local/n
  sudo chown -R $(whoami) /usr/local/n
  # take ownership of Node.js install destination folders
  sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share
  

  Finally, install Node.js version 12:

  n 12
  

  Then, install Gatsby CLI:

  npm install -g gatsby-cli
  

  Check if gatsby-cli is installed properly:

  gatsby --help
  

• Create a new site using Gatsby:

  gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
  

• Change the current directory to the site directory:

  cd hello-world
  

• Run the site:

  gatsby develop
  

References

• Gatsby official website
• Set Up Your Development Environment
• Upgrading Your Node.js Version
• n – Interactively Manage Your Node.js Versions
• Tutorial: Learn how Gatsby works
• What is Gatsby JS, and How Are Ecommerce Developers Using it to Make Blazing-Fast Stores?