Install Gatsby on Ubuntu 20.04

Published on January 26, 2022•Updated on November 21, 2023

Introduction

This tutorial explains how to install and set up Gatsby on Ubuntu 20.04.

Overview of Gatsby

Gatsby is an open-source JavaScript framework built on top of React and combines functionality from GraphQL and Webpack into a single tool for building optimized static websites and applications. Gatsby and its tools use the Node.js runtime to run and compile code.

Prerequisites

Before you begin, you should:

Deploy an Ubuntu 20.04 server.
Update the server.
Create a non-root user with sudo privileges.
Log in to your server as a non-root user.
Install Node.js and NVM.

Installation

Install the Gatsby CLI tool using NPM.
```
 $ npm install -g gatsby-cli
```
Run the Gatsby CLI tool to set up your site.
```
 $ gatsby new
```
You should now see a prompt asking you for your site name. The default name is My Gatsby Site. Press Enter to use this name or enter your own.
```
 What would you like to call your site?
```

Enter the folder name where you would like to create your Gatsby site.

 What would you like to name the folder where your site will be created?

Choose the Content Management System (CMS) you would like to use, using the arrow keys to move and confirming your choice with Enter. You can choose the No (or I'll add it later) option if you're unsure.
```
 ? Will you be using a CMS?
```
Choose the styling system you would like to install or choose the No (or I'll add it later) option if you are unsure. Use the arrow keys to move and confirm your choice with Enter.
```
 ? Would you like to install a styling system?
```
Choose the features you would like to install. Choose each option by using the arrow keys to navigate and confirming with Enter. Once you have finished choosing, navigate to the bottom of the list and select Done.

Features such as adding page meta tags, an automatic sitemap, and generating a manifest file are useful for Search Engine Optimization (SEO). The Google Analytics tracking script can help track the analytics of your site. Responsive images help ensure your site looks good on desktop and mobile devices. Adding Markdown/MDX support enables the use of Markdown files for storing or writing content.
```
 ? Would you like to install additional features with other plugins?
```
If applicable, configure the options for the features you have chosen. If this does not show up, you can proceed to the next step.
```
 Great! A few of the selections you made need to be configured. Please fill in the options for each plugin now.
```
It will now show you a summary of what Gatsby will install, along with the plugins and features you have chosen. Ensure to review this, and then confirm your choices with Enter.
```
 ? Shall we do this? (Y/n)
```
Gatsby will now install the packages and plugins you have chosen. It may take a few minutes.

Once the installation is complete, it will show you that Gatsby successfully created your site.

 Your new Gatsby site **My Gatsby Site** has been successfully created at **/your/directory/path**.

Enter your site directory with the cd command.
```
 $ cd /your/folder/path
```
Start the local development server using the develop script.
```
 $ npm run develop
```
It may take a while to build the site for the first time. When you see the message, You can now view my-gatsby-site in your browser., navigate to your server's public IP address on port 8000 in a web browser. An example of what your IP might look like is below.
```
 https://192.0.2.123:8000/
```
Verify the web page says Congratulations - you just made a Gatsby site!.

You have now installed your Gatsby site, and it's ready for you to build your web application.

Making Your Site

Since Gatsby is a developer tool, it requires HTML, CSS, and JavaScript knowledge. In addition, knowledge of React and JSX is also needed, as Gatsby is an extension of the React framework.

For example, you can edit the src/pages/index.js file to add some more text to your page.

Exit the development server by using Ctrl + C.
Open the src/pages/index.js file in your text editor.
```
 $ nano src/pages/index.js
```
Navigate to the bottom of the file and find the markup section.
```
 // markup
 const IndexPage = () => {}
```

Add some HTML markup such as <p> or <h1> under the <main> tag. The ... represents the rest of the text.

 // markup
 const IndexPage = () => {
     return (
         <main style={pageStyles}>
             <h1>Hello World</h1>
             <p>This is a simple example of a Gatsby site.</p>
         ...
     )
 }

Close your text editor by using Ctrl + X, then pressing Y, followed by Enter to confirm your changes.
Re-run the development server with the develop script.
```
 $ npm run develop
```
Refresh your browser and verify that the added text is now displayed at the top.

You can find in-depth guides on how to develop your own Gatsby site in the Gatsby documentation.

Creating an Optimized Production Build

To create an optimized production build of your site, close the development server with Ctrl + C, then run the build script.

$ npm run build

The build script will create a production build of your site. This will output a folder called public in your directory. This folder is where the optimized production build of your site is stored.

Preparing for Production

You can use the public folder from the previous section to host the static web application directly on a custom web server or another hosting service of your choice.

To use the Gatsby web server, you can run the serve script.

$ npm run serve

You can use this guide to deploy an Express web server with Nginx, and learn how to secure the web server with a Let's Encrypt TLS certificate.

Install Gatsby on Ubuntu 20.04

Introduction

Overview of Gatsby

Prerequisites

Installation

Making Your Site

Creating an Optimized Production Build

Preparing for Production

More Information

Products

Features

Marketplace

Resources

Company