How to setup droplet as subdirectory of App

Hi there,

To serve the HTML site as a subfolder of your main domain, you can use reverse proxy functionality in Nginx:

https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-reverse-proxy-on-ubuntu-22-04

To do this, first, you need to make sure your Droplet with the HTML site has a domain name or a subdomain pointing to it.

For example, you can create a subdomain like htmlsite.mysite.com and point it to the droplet’s IP address.

Next, you need to configure Nginx on the server running the Hugo site to proxy requests for the subfolder to the droplet with the HTML site. You’ll need to modify the Nginx configuration file, typically found at /etc/nginx/sites-available/default. Here’s an example configuration:

server {
    listen 80;
    server_name mysite.com www.mysite.com;

    # Serve Hugo site
    location / {
        root /path/to/hugo/public;
        try_files $uri $uri/ =404;
    }

    # Proxy requests for the subfolder to the HTML site droplet
    location /subsite/ {
        proxy_pass http://htmlsite.mysite.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Make sure to replace /path/to/hugo/public with the correct path to your Hugo site’s public directory, and http://htmlsite.mysite.com with the correct domain or subdomain of your HTML site.

After modifying the configuration, restart the Nginx service:

sudo service nginx restart

Now, your main domain should serve the Hugo site, and the /subsite path should proxy requests to the droplet running the HTML site.

Best,

Bobby