Install Gatsby on Ubuntu 20.04

Published on , Updated on installation installation ubuntu docker gatsby

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
    

alt gatsby run hello-world

References

Related Contents
Next Post

Bubble Sort