In this article, we’ll explain how to install Gatsby on Ubuntu 22.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.
- A Ubuntu 22.04 installed dedicated server or KVM VPS.
- A root user or normal user with sudo administrator privileges.
Install Gatsby on Ubuntu 22.04
Step 1 – User management
It will ask you to enter the password for the new user.
Add user in sudo group
# usermod -aG sudo block
Login with new user
# su – <username>
Step 2 – Keep the server up to date
$ sudo apt update -y && apt upgrade -y
Step 3 – Install NodeJS and NPM
Install the latest stable release of NodeJS.
$ sudo curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash –
$ sudo apt-get install -y nodejs
Verify the installation is successful.
$ node -v && npm -v
Step 4 – 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
Gatsby CLI version: 4.23.1
Step 5 – Deploy new site
To generate new Gatsby site, run following command:
$ gatsby new
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
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.
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
-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.
On Your Network: http://192.168.0.102:8000/
At the root of a Gatsby site, compile your application and make it ready for deployment:
$ gatsby build
–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. In this article we’ve seen how install Gatsby on Ubuntu 22.04.