This blog steps through how to deploy and host your Gatsby site on a DigitalOcean Droplet with Ubuntu and Nginx.

DigitalOcean delivers a cloud medium to deploy, operate, and scale applications of any size, emptying infrastructure friction and delivering predictability so developers and their teams can give more time to build better software.

DigitalOcean’s effect droplets are scalable computer IaaS or a VPS on the cloud which has excellent dependability and scalability. They come with various price ranges ideal for small apps to giant enterprise-level apps.

They deliver services to choose from different Unix-based distributions and establish your technology-based platform with preinstalled prerequisites from the marketplace. This blog will step through the exact options that work best for deploying a Gatsby site with DigitalOcean.

Prerequisites

• A Gatsby site in a Git repository
• A DigitalOcean Droplet is configured with sudo group
• A custom domain name for your Gatsby site to maintain with configuring HTTPS

How to deploy the Gatsby site to DigitalOcean

Install Node.js, npm and Gatsby-CLI

Log in to your droplet as a non-root user.

Install Node.js

sudo apt-get update
sudo apt-get install nodejs

Install npm

sudo apt-get install npm

Run the code

nodejs -v
npm -v

To download the new stable Node.js release using the n package,

sudo npm install -g n
sudo n stable
hash nodejs
hash npm

Download the Gatsby CLI globally. This will be good ahead in making the Gatsby site for production.

sudo npm install -g gatsby-clip

Clone your repository to the droplet

The subsequent step is to clone the storehouse having your Gatsby app

< your-github-repo-site> 
git clone < your-github-repo-site>

Copy the way where your

 < your-github-repo-site>

is cloned, for forthcoming reference.

pwd

In case of a notification associated with “Permission refused”, check if

< your non-root user>

has sudo rights. Or before cloning your storehouse, change authorizations for

< your non-root user>

to access the .

config

directory of under

 /home/< your non-root user>/:
cd ~/
sudo chown -R $(whoami) .config

Generate your Gatsby site for production

The fixed files will be posted publicly on the droplet. The

 gatsby build 

command gives utility to create the site and build the static files in the

 /public.

Go to the path where

< my-gatsby-app>

is. You can utilize the simulated path for reference in a previous step.

cd 
sudo npm install

Run build to generate static files.

sudo gatsby build

Install Nginx Web Server and open firewall to accept HTTP and HTTPS requests

To host a website or static files onto a Linux-based server a web server like Apache or Nginx is needed.

Nginx is a web server. It delivers the infrastructure code for managing client requests from the World Wide Web, along with elements like a load balancer, mail proxy, and HTTP Cache.

Install Nginx.

sudo apt-get install nginx

Configure firewall sets of the droplet to attend to HTTP and HTTPS requests on ports 80 and 443.

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

To check the connection,

sudo ufw app list

If ufw status is disabled, you can capable it with the following command:

sudo ufw enable

Allow the OpenSSH if not done, to not disconnect from your droplet.

sudo ufw allow 'OpenSSH'

Configure Nginx to point to your Gatsby site’s directory and include your domain

Change the root configuration of Nginx in the default server

Go to

 /etc/nginx/sites-available/
cd /etc/nginx/sites-available/

Open the

default

in Vim

sudo vim default

Revise the file and complete the following modifications for the below-mentioned fields, exit the remainder of the fields as-is. Your actual path may change, but it may reach

 /home///public.
default
server {
 root /public;
 index index.html index.htm index.nginx-debian.html;
 server_name ;
 location / {
   try_files $uri $uri/ =404;
 }
}

Restart the Nginx

sudo systemctl restart nginx

You should now be capable of considering your built Gatsby site at your DigitalOcean IP address, before configuring a domain. Go to the Advanced DNS locations in your domain provider’s console and put an A record that means to the IP address of the droplet.

Configuring HTTPS for your Gatsby site

Observe the below steps to configure your site with a complimentary SSL/TLS certificate Let’s Encrypt using their Certbot CLI tool. Download Certbot onto your droplet. You’ll need to install Certbot using snapd.

sudo snap install core; sudo snap refresh core
sudo apt-get remove certbot

Execute the below command to install Certbot.

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

Develop the certificate. Certbot will automatically cleanse and configure the Nginx config file and file to the certificate file. Execute the below command:

sudo certbot --nginx

If you are operating Certbot for the first time on this droplet then you resolve to be prompted to type your email for purposes.

Agree to the license contract on prompt. Restart the Nginx service.

sudo systemctl restart nginx

Now, you can connect your site at

< your-domain>

with a safe connection.

View your Gatsby site live

Once you’ve observed all the actions and configuration correctly, you can visit the site live at

< your-domain>.

Whenever there’s an update to your site, run a

sudo gatsby

build in the root of your

< my-gatsby-app>.

You’ve deployed your Gatsby App on a DigitalOcean droplet along with HTTPS for it.

If you have any doubt about the above topic. Don’t hesitate to contact us through the below email. Airzero Cloud will be your digital partner.

Email id: [email protected]

Author - Johnson Augustine
Cloud Architect, Ethical hacker
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/