Install Gatsby Cli Deploy Project on Ubuntu

By Anurag Singh

Updated on Jul 02, 2024

Install Gatsby Cli Deploy Project on Ubuntu

In this article, we'll explain how to install Gatsby Cli Deploy Project on Ubuntu 22.04.

Gatsby is a React-based open-source framework for creating websites and apps. Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.

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:

  • A Ubuntu 22.04 installed dedicated server or KVM VPS.
  • A root user or normal user with sudo privileges.

Install Gatsby Cli Deploy Project on Ubuntu 22.04

Step 1 – Keep the server up to date

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

Step 2 – Install Node.js and NPM

Install the latest stable release of Node.js.

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash –

Execute following command to install Node.js.

sudo apt-get install -y nodejs

Verify the installation is successful.

node -v && npm -v

Output:

v18.16.0
9.5.1

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:

sudo npm install -g gatsby-cli


Verify the installation:

gatsby --version


Output:

Gatsby CLI version: 5.9.0

Step 4 – Deploy new site

To generate new Gatsby site, run following command:

gatsby new


The CLI will run an interactive shell asking for these options before creating a Gatsby site for you. Above command will ask few questions about the project.

What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ user/ my-gatsby-site
✔ Will you be using JavaScript or TypeScript?
✔ Will you be using a CMS?
✔ Would you like to install a styling system?

You can select the option as per your requirements and type "y" to proceed further.

It will create project directory with the provided name. 

For more information about the Gatsby CLI, you can refer official documentation.

Clone a starter directly 

You can also skip the prompt and clone a starter directly from GitHub. For example, to clone a new gatsby-starter-blog. To clone a starter, execute following command:

gatsby new my-new-blog https://github.com/gatsbyjs/gatsby-starter-blog

It will clone as well as install required packages.

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-new-blog

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-new-blog in the browser.

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


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


serve

Serves the production build of your site for testing prior to deployment. Should be run from the root of your project.

gatsby serve


Options:


-H, --host    Set host. Defaults to localhost
-p, --port    Set port. Defaults to 9000
-o, --open    Open the site in your default browser for you
--prefix-paths    Serve site with link paths prefixed (if built with pathPrefix in your gatsby-config file).

That’s it. The installation has been completed successfully. We have seen how to install Gatsby Cli Deploy Project on Ubuntu 22.04.