Javascripts

How to Install Gatsby on Ubuntu 20.04

In this article, we’ll explain how to install Gatsby on Ubuntu 20.04.

Gatsby is a React-based open-source framework for creating websites and apps. It’s great whether you’re building a portfolio site or blog, or a high-traffic e-commerce store or company homepage. Create blazing fast websites and apps AND harness the power of 2000+ plugins. Build sites with the services you want, like Shopify, Stripe, and WordPress, quickly and easily with Gatsby’s 2000+ plugins. Integrate data from anywhere: APIs, databases, CMSs, static files — or multiple sources at once

This article will guide you with the installation process and deploying default starter Gatsby site.

Prerequisites

Install Gatsby on Ubuntu 20.04

Step 1 - Keep the server up to date

# apt update -y && apt upgrade -y

Step 2 - Install NodeJS and NPM

Install the latest stable release of NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

Verify the installation is successful.

# node -v && npm -v

Output:

v15.9.0
7.5.4

Step 3 - Install gatsby-cli

The Gatsby CLI (gatsby-cli) is packaged as an executable that can be used globally. The Gatsby CLI is available via npm. Run following command to install gatsby-cli:

# npm install -g gatsby-cli

Verify the installation:

# gatsby --version

Output:

# Gatsby CLI version: 2.19.1

Step 4 - Deploy new site

To generate new Gatsby site, run following command:

# gatsby new

Output:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
✔ · My Gatsby Site

The CLI will run an interactive shell asking for these options before creating a Gatsby site for you. Choose and fill as per your website requirements. It will create an Gatsby site and directory in /root.

See all commands at https://www.gatsbyjs.com/docs/gatsby-cli/

Creating a site from a starter

To Create a Gatsby site named my-awesome-site using the default starter, run following command:

# gatsby new my-awesome-site

Above command will create a my-awesome-site directory in /root.

See the Gatsby starters docs for more details.

Develop

Once you’ve installed a Gatsby site, go to the root directory of your project and start the development server using following command:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Options:

  • -H, --host Set host. Defaults to localhost
  • -p, --port Set port. Defaults to env.PORT or 8000
  • -o, --open Open the site in your (default) browser for you
  • -S, --https Use HTTPS

You can now view my-awesome-site in the browser.

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

Gatsby on Ubuntu 20.04

Build

At the root of a Gatsby site, compile your application and make it ready for deployment:

# gatsby build

Options

  • --prefix-paths Build site with link paths prefixed (set pathPrefix in your config)
  • --no-uglify Build site without uglifying JS bundles (for debugging)
  • --profile Build site with react profiling. See Profiling Site Performance with React Profiler
  • --open-tracing-config-file Tracer configuration file (OpenTracing compatible). See Performance Tracing
  • --graphql-tracing Trace (see above) every graphql resolver, may have performance implications.
  • --no-color, --no-colors Disables colored terminal output

That’s it. The installation has been completed successfully.

 

Related Articles