Wondering how to install Gatsby on Linux?

Gatsby is a React framework that allows us to create static and serverless apps

As a part of our Server Management Services, we help our Customers with software installations regularly.

Let us today discuss the steps to install Gatsby on Linux and the tips to customize the websites.

Install Gatsby on Linux and Create a New Project

In this step, we will install a new Gatsby site from a template. Download the Gatsby CLI package. This Gatsby command-line interface will allow us to create and customize a new site:

$ npm install -g gatsby-cli

The -g flag means we are installing the Gatsby command-line interface globally as opposed to locally. This will allow us to use the tool in any directory.

On some systems such as Ubuntu 18.04, installing an npm package globally can result in a permission error, which will interrupt the installation.

Since it is a security best practice to avoid using sudo with npm install, we can instead resolve this by changing npm’s default directory.

If we type gatsby help we will find several commands that can help us in creating the Gatsby site:

$ gatsby help

This will give the following output:

Usage: gatsby <command> [options]

Commands:
gatsby develop Start development server. Watches files, rebuilds, and hot reloads if something changes
gatsby build Build a Gatsby project.
gatsby serve Serve previously built Gatsby site.
gatsby info Get environment information for debugging and issue reporting
gatsby clean Wipe the local gatsby environment including built assets and cache
gatsby repl Get a node repl with context of Gatsby environment, see
(https://www.gatsbyjs.org/docs/gatsby-repl/)
gatsby new [rootPath] [starter] Create new Gatsby project.
gatsby plugin Useful commands relating to Gatsby plugins
gatsby telemetry Enable or disable Gatsby anonymous analytics collection.
...

Important gatsby commands:

• gatsby new creates a brand new site. If we use gatsby new by itself, we will get a barebones site. The more common way to use gatsby new is to combine it with a starter template.
• gatsby develop starts the development server. We will use gatsby develop to see our site locally on port :8000.
• gatsby build bundles static files and assets and creates a production build of the application.

Gatsby has several starter templates that you can use to get your website up and running. There are hundreds of templates out there, and many of these contributions come from the community.

For this article, we are going to use one of Gatsby’s official starter templates, Gatsby Starter Default.

The first thing we will do is to install a Gatsby starter via the terminal:

$ gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new creates a new site. This article will use the gatsby-starter-default template and will name the project after the template.

The following output in the command line means we have successfully installed a Gatsby starter template:

...
Your new Gatsby site has been successfully bootstrapped. Time to change into the directory

cd gatsby-starter-default
gatsby develop

gatsby-starter-default is the name of the new directory. We will now change into gatsby-starter-default and list the contents of the directory:

$ cd gatsby-starter-default && ls

This will give the following output:

LICENSE gatsby-browser.js gatsby-node.js node_modules public yarn.lock
README.md gatsby-config.js gatsby-ssr.js package.json src

The important files that we will modify in this article include:

• gatsby-config.js contains the site-wide customizations. This is where we will modify metadata and add Gatsby plugins.
• src directory contains all of the pages, images, and components that make up the website.

Modifying the Title, Description, and Author Metadata in the Gatsby Config

It is important to correctly format the metadata for the search engines to discover the website.

In this section, we will configure the title, description, and author metadata in the application.

gatsby-config.js is Gatsby’s configuration file. Open gatsby-config.js in a text editor to view Gatsby’s configuration.

The following is gatsby-config.js with the configurations that come with the Gatsby Default Starter template:

module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}

The Gatsby config file is also home to the plugins.

Every Gatsby Default Starter template contains the same generic metadata. Let us personalize this data and start the process of making this site our own.

Replace the text for the title, description, and author with the following code:

module.exports = {
siteMetadata: {
title: `Getting Started with Gatsby`,
description: `A tutorial that goes over Gatsby development`,
author: `@yourname`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}

Now, save and exit the file.

Modifying the Index Page

In this section, we are going to learn about JSX, change the markup on the index page, add an image, and run the Gatsby site locally.

It is time to see what the Gatsby website looks like in the browser. Open a new window in the terminal and enter gatsby develop in the command line to view the local version of the site:

$ gatsby develop

The gatsby develop command starts the development server. If we head over to the browser we can access the site at localhost:8000.

A default Gatsby starter looks like the one below:

Change the markup

We are going to change the markup on the page to make it look more like the content we would find on an e-commerce site.

To change the markup on the index page, open “src/pages/index.js” file with an available text editor. It may contain the following contents:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)

export default IndexPage

The code here is JSX. JSX allows us to write HTML elements in JavaScript.

Let us make some modifications to the text in the code.

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hello Shoppers, we are open for business!</h1>
<p>We sell fresh fruit.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)

export default IndexPage

Save the changes. As Gatsby comes with hot reloading it refreshes the files in the app that we changed.

Change the image

To change the image, open the image in the browser and download the image to src/images folder in the Gatsby project. Save the image as shark.jpeg.

Double-check to see if the image is in the right folder. Navigate to the images folder:

$ cd src/images

After we have made the way to the images directory, check if shark.jpeg is in the images folder:

Now that we have confirmed that the file is there, we will open image.js with an available text editor.

Further, to swap out the Gatsby astronaut image with Shark, return to the src directory. Then, open the image.js component:

$ nano components/image.js

Replace gatsby-astronaut.png with shark.jpeg:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
* This component is built using `gatsby-image` to automatically serve optimized
* images with lazy loading and reduced file sizes. The image is loaded using a
* `useStaticQuery`, which allows us to load the image from directly within this
* component, rather than having to pass the image data down from pages.
*
* For more information, see the docs:
* - `gatsby-image`: https://gatsby.dev/gatsby-image
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
*/

const Image = () => {
const data = useStaticQuery(graphql`
query {
placeholderImage: file(relativePath: { eq: "shark.jpeg" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`)

return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}

export default Image

Gatsby uses GraphQL to make data queries, and here the image.js file in Gatsby queries the PNG image and optimizes it. In this snippet, Gatsby scales the image size of shark.jpeg to a maximum width of 300.

Save the file. The server will restart, and we will find Shark on the Gatsby page.

We now have our Gatsby e-commerce site up and running locally.

[Need any further assistance to install Gatsby on Linux? – We’re available 24*7]

Conclusion

In short, the Gatsby command-line interface will allow us to create and customize a new site from a template. Today, we saw how our Support Engineers install Gatsby on Linux and customize the websites built from a template.