Introduction

Here are the steps to deploy a Gatsby project to a DigitalOcean droplet. It'll take you through the step of installing required packages on the droplet, setting up the firewall, and configuring Nginx to serve the website.

Prerequisites

A Gatsby site in a Git repository.
A DigitalOcean Droplet.
A domain name that's on DigitalOcean with DNS record configured.

Step 1 - Set Up the Droplet

Install Node.js, npm and Gatsby-CLI

Connect to the droplet through SSH (ex. PuTTy for Windows).
Install Node.js and NPM. Check the versions with -v.

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
nodejs -v
npm -v

Install n, Node's version manager and use that to install the latest stable Node.js release.

sudo npm install -g n
sudo n stable

Install the Gatsby command line tool (CLI).

sudo npm install -g gatsby-cli

Step 2 - Clone GitHub Repo to the Droplet

The next step is to clone the repository containing your Gatsby app.

git clone <your-github-repo>

NOTE: If you see “Permission denied”, check if the current user has sudo privileges. Or before cloning your repository, update the permission for the .config:
sudo chown -R $USER /home/<current user>/.config

Step 3 - Generate your Gatsby site for production

Install dependencies.

cd <my-gatsby-app>
sudo npm install

Run build to generate static files in the /public directory.

sudo gatsby build

NOTE: If the build fails due to lack of RAM or other hardware limitations on the droplet you can always build it locally and copy the /public folder to the user using something like PSCP.

Step 4 - Install Nginx Web Server to host the site and open firewall to accept HTTP and HTTPS requests

Install Nginx to serve as the web server.

sudo apt-get install nginx

Configure firewall settings to listen to HTTP and HTTPS requests.

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

To check the access,

sudo ufw app list

Output:

Available applications:
    OpenSSH

NOTE: You may have to allow access to port 443 explicitly using sudo ufw allow 443/tcp. You can delete rules by entering commands such as sudo ufw delete allow http.
Allow the OpenSSH so you don't get locked out.

sudo ufw allow 'OpenSSH'

Enable ufw.

sudo ufw enable

Step 5 - Configure Nginx to point to your Gatsby site’s `/public` directory and add your domain

Install Nginx if it's not already installed. Use the -v tag to check for installation.

nginx -v
sudo apt-get update
sudo apt-get install nginx

Copy the default config file for the server block config so the default isn't overwritten.

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/gatsby-app

Now, open the new file and update the configuration to look like what's below. Press ESC then type :wq to save and quit.

sudo vim /etc/nginx/sites-available/gatsby-app

gatsby-app

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root <path to gatsby-app>/public
    index index.html index.htm;

    server_name <domain-name>;

    error_page 404 /404;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

NOTE: listen tells Nginx the port where it should listen for HTTP connections

NOTE: root points to the site’s document root that you created

NOTE: server_name is set to match domain name. It can allow multiple domains to be served from a single IP address.

Step 6 — Enable your Server Blocks

Create symbolic links from these files to the sites-enabled directory

sudo ln -s /etc/nginx/sites-available/gastby-app /etc/nginx/sites-enabled/

Remove the symbolic link for default so it won't be read.

sudo rm /etc/nginx/sites-enabled/default

NOTE: Nginx reads from sites-enabled during startup. The default server block file is removed so it doesn't conflict with our file that has the default_server parameter set.

Restart Nginx to enable your changes.

sudo service nginx restart

By this time, you can view your site live at <your-domain>.

NOTE: If there is an update to the site on GitHub, you want to get the changes and then build the site again.
git pull origin master
sudo gatsby build

Hosting Gatsby Project on DigitalOcean