It is well known that sites made with Gatsby can be deployed to Netlify. This blog is hosted on Netlify for free! But you could as well be in the need to deploy a Gatsby site to another service like DigitalOcean.
I have been working on a Node + React application for some months now and it is hosted on DigitalOcean. A couple of weeks ago I stumbled upon a new requirement. I had to deploy a Gatsby blog to that same server and access it through the same domain.
The process was very straightforward but I had to do some tweaks to both my Gatsby and Nginx configurations. I’ll describe it here step by step. It shouldn’t take you more than an hour to set everything up.
Before moving on:
- I assume you already have a DigitalOcean account and an Ubuntu Droplet created. The commands used in this guide may also work on other Linux Droplets but I worked with an Ubuntu one.
- Make sure you have Nginx installed on your Droplet as we are gonna use it to serve our Gatsby generated static files.
- You have your Gatsby project hosted on a remote repository like Github. For this guide, I’m just gonna clone a Gatsby starter from the starters library. You’ll need Git installed on your Droplet to clone your repo.
- Optional: Install Node and Npm on your Droplet. I chose to perform the build on my Droplet so I needed NPM installed for both installing all the dependencies and performing the build but you can also just build your Gatsby site locally, push the built files to your repo and pull them from your Droplet.
SSH into your Droplet
So to perform all the cloning, building and setup we’ll need to remotely connect to our Droplet via SSH. Here’s the guide for doing so if you’ve never done it.
Clone your Gatsby project
Once in your Droplet, clone your Gatsby project from your remote repo. I did this at the root to keep it simple. For this guide, I’m just gonna clone a gatsby starter I liked by Justin Formentin
git clone https://github.com/justinformentin/gatsby-v2-tutorial-starter.git
Install dependencies and build project
You can ignore this step if you already had your built files pushed to your repo. This way you can avoid installing the dependencies and building on your Droplet. I preferred to perform all this on my Droplet.
On the terminal, go into your project folder
cd gatsby-v2-tutorial-starter
Let’s first install gatsby-cli globally:
npm i -g gatsby-cli
Then install all the project dependencies:
npm install
Now perform the build with either:
gatsby build
Or
npm run build
If everything went well, a /public
folder should’ve been created. It includes the static files that we’re gonna serve through Nginx.
Configure Nginx to serve your Gatsby static files
Before configuring Nginx, we have to create a symbolic link from where your Gatsby static files are to where Nginx expects to serve these files.
Nginx serves files that are in the var/www folder but instead of moving our files over there we just create a symlink:
sudo ln -s /home/jose/blog/public /var/www/blog/html
Remember to put the path where your Gatsby files are as the first parameter. As for the second parameter, make sure you created a directory in there, in my case I created a /blog
directory and an /html
directory inside it.
Now, to configure Nginx to serve those files we have to open the default Nginx config file and make some tweaks. Let’s first open the file using nano:
sudo nano /etc/nginx/sites-available/default
Paste the following config in there. Preferably after the server_name property.
location / {
alias /var/www/blog/html/public;
index index.html;
}
About the server_name ; the default value is an underscore, this means you’ll need to access your site using the server’s IP address. If you are using a domain, that’s where you should put it. For example:
server_name example.com www.example.com;
Save and exit nano and then restart nginx using the following command:
sudo systemctl restart nginx
And that’s it!
Test your site!
If everything was configured properly, you should be able to access your blog either through your domain (if you configured Nginx to use it) or through the server’s IP address.
Nginx bonus: Configure Nginx to serve two sites from the same domain
As I mentioned above, the reason I had to deploy a Gatsby site to Digital Ocean rather than Netlify was that I already had a Node + React app running in Digital Ocean and I had to deploy the blog to the same server and use the same domain for both apps.
I used the following Nginx configuration to accomplish this:
location / {
proxy_pass http://localhost:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /blog {
alias /var/www/blog/html/public;
index index.html;
}
What I have there is the Node + React app being served at the root and the blog being served at /blog
.
Now, there's a small change we have to do to our Gatsby config. We have to add a path prefix so our blog's routing works with a /blog
prefix before the rest of the path. This is a very simple change described here.
This way our articles' url will look like: example.com/blog/posts/post-slug
.
And that’s it! I hope this was useful and if you have any comments or feedback feel free to reach out.
Cheers!
Top comments (2)
Great article but I am wondering with this configuration every time you add a new post you have to rebuild the blog right ? is it possible to add something like a CRON Task to rebuild the blog automatically when you save a post from a WordPress website, for example, it's what I am looking for :)
thanks
Wow. Great article!