How to use the command 'gatsby' (with examples)

Gatsby is a static site generator for React that allows developers to create high-performance websites and apps. This article will walk you through various use cases of the gatsby command, demonstrating how to create a new site, start a local development server, perform a production build, and more.

Use case 1: Create a new site

Code:

gatsby new site_name

Motivation:

This command allows you to easily scaffold a new Gatsby site with a basic folder structure and starter code. It provides a quick starting point for your project, saving you time and effort.

Explanation:

• gatsby is the command for creating a new site.
• new is an argument that informs the command you want to create a new site.
• site_name is the name you give to your new site.

Example output:

info Creating new site from default starter...
info Successfully created site!

Use case 2: Create a new site with a Gatsby ‘starter’

Code:

gatsby new site_name url_of_starter_github_repo

Motivation:

Gatsby starters are preconfigured project templates to help you build websites faster. By using a Gatsby starter from a specific GitHub repository, you can kickstart your project with a ready-to-use template.

Explanation:

• gatsby is the command for creating a new site.
• new is an argument that informs the command you want to create a new site.
• site_name is the name you give to your new site.
• url_of_starter_github_repo is the URL of the GitHub repository containing the Gatsby starter.

Example output:

info Installing template "gatsby-starter-blog" from "https://github.com/gatsbyjs/gatsby-starter-blog.git"...
info 
Success! Created site at path "/path/to/site_name"
...

Use case 3: Start a live-reloading local development server

Code:

gatsby develop

Motivation:

Running a live-reloading development server allows you to see your changes instantly as you work on your Gatsby project. This feature significantly speeds up the development process and provides a more seamless development experience.

Explanation:

• gatsby is the command for starting a development server.
• develop is an argument that informs the command you want to start a live-reloading local development server.

Example output:

You can now view your Gatsby site in the browser.
...
success Building development bundle - 12.219s
...

Use case 4: Perform a production build and generate static HTML

Code:

gatsby build

Motivation:

A production build generates optimized static HTML files, JavaScript bundles, and other assets that can be deployed to a web server or a content delivery network (CDN). This allows your Gatsby site to load quickly and perform well in a production environment.

Explanation:

• gatsby is the command for performing a production build.
• build is an argument that informs the command you want to generate static HTML and assets for production.

Example output:

success Building production JavaScript and CSS bundles - 23.651s
success Building static HTML for pages - 4.931s
...

Use case 5: Start a local server which serves the production build

Code:

gatsby serve

Motivation:

Starting a local server to serve the production build allows you to preview your Gatsby site exactly as it would appear in a production environment. You can test the performance, accessibility, and other aspects of your site before deploying it to a live server.

Explanation:

• gatsby is the command for starting a server.
• serve is an argument that informs the command you want to start a local server to serve the production build.

Example output:

info Server started successfully. Navigate to http://localhost:9000/
...

Conclusion:

The gatsby command is a powerful tool for creating, developing, and deploying Gatsby sites. Whether you want to start a new project, test changes in a local development server, or generate a production-ready build, the gatsby command provides a range of useful features to streamline your workflow. Explore these use cases to get started with Gatsby and build amazing websites powered by React.