How to Deploy a Gatsby Static Site on Your Breeze

How to Deploy a Gatsby Static Site on Your Breeze

Gatsby is a React-based static site generator that produces blazing-fast websites with built-in performance optimizations like image processing, code splitting, and prefetching. It is ideal for marketing sites, blogs, portfolios, and e-commerce storefronts. This guide walks you through building and deploying a Gatsby site on your Breeze instance.

Prerequisites

• A Breeze instance with Ubuntu 22.04 or later
• Node.js 18+ and npm installed
• A web server (Nginx or Apache) configured
• Basic familiarity with React and JavaScript

Step 1 — Install Node.js

Install Node.js using the NodeSource repository:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node --version
npm --version

Step 2 — Install the Gatsby CLI

sudo npm install -g gatsby-cli
gatsby --version

Step 3 — Create a New Gatsby Site

Use a starter template to scaffold your project:

gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default
cd my-gatsby-site

Explore the project structure:

• src/pages/ — page components (each file becomes a route)
• src/components/ — reusable React components
• src/images/ — images processed by gatsby-plugin-image
• gatsby-config.js — site metadata and plugin configuration

Step 4 — Develop Locally

Start the development server to preview your site:

gatsby develop --host 0.0.0.0

Your site will be accessible at http://your-breeze-ip:8000. Gatsby supports hot-reloading, so changes appear instantly in the browser.

Step 5 — Build for Production

When your site is ready, generate the optimized production build:

gatsby build

The output is placed in the public/ directory. Gatsby automatically optimizes images, minifies CSS and JavaScript, generates service workers for offline support, and creates an optimized bundle with code splitting.

Step 6 — Deploy with Nginx

Copy the built files to your Nginx web root:

sudo rsync -avz --delete public/ /var/www/gatsby-site/

Create an Nginx server block:

sudo nano /etc/nginx/sites-available/gatsby

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/gatsby-site;
    index index.html;

    location / {
        try_files $uri $uri/ /404.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

sudo ln -s /etc/nginx/sites-available/gatsby /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Automating Builds

Create a build script for easy redeployment:

#!/bin/bash
cd /home/user/my-gatsby-site
git pull origin main
npm ci
gatsby build
sudo rsync -avz --delete public/ /var/www/gatsby-site/
echo "Deployment complete at $(date)"

This can be triggered by a webhook or cron job for automated continuous deployment.