Hosting Gatsby on a subdirectory using NGINX

Question

How do i host gatsby.js on a subdirectory using nginx, i have already tried to do this using proxy_pass http://127.0.0.1:8000 with gatsby develop but i'm facing issues with Socket.io. Does anyone know how to host gatsby on a subdirectory i've tried using the following rewrite code rewrite ^([^.\?]*[^/])$ $1/ permanent. But that does nothing.

Fix

Okay so at first i was using gatsby develop so that i can make use of HMR, but i guess beggars can't be choosers, so based on what fabian said, i did the following.

Here is what i did, ultimately,

I added the line pathPrefix: '/blog' on my gatsby-config.js file

I ran gatsby build --prefix-paths on the home directory of my project

And copied the contents on the public folder moved to a folder called blog in the root directory of my website and it works perfectly (without HMR, that's).

Answer 1

GatsbyJS is a static site generator, which means it outputs static HTML, CSS and JS. You don't actually need to set up a NodeJS server to make it run. gatsby develop should only be used in development (locally), not in production.

Basically, you'll want to run gatsby build and move/upload all the files inside the local public directory to the subdirectory on your server. Of course, that subdirectory needs to be publicly available/served via NGINX, Apache or similar. For example by:

location /subdirectory {
  root /html/my-site/public;
  index.html;
}

Find more details on deploying GatsbyJS here. Also, don't forget to add a Path Prefix.