Setting up GitHub Pages to serve from a subfolder path

Other Questions Github
1

I’m trying to configure my web application to work with a subdirectory path instead of the root domain. Here’s my current setup:

Current Architecture:

  • Frontend: React app deployed via GitHub Pages
  • Backend: ASP.NET Core running in Docker container with Nginx on AWS EC2
  • DNS: Managed through Hostinger

Right now everything works fine with mysite.com for frontend and api.mysite.com for backend, both on HTTP.

What I want to achieve:
Change from mysite.com to mysite.com/app as the main access point.

Configuration changes I made:

  1. GitHub Pages still deploys from root directory

  2. CNAME file unchanged: mysite.com

  3. Updated vite config: base: '/app/'

  4. Modified package.json: "homepage": "mysite.com/app"

  5. DNS records updated:

    • Added A record: @ ec2_ip_address
    • Kept A record: api ec2_ip_address
    • Kept CNAME: www mysite.com

  6. Nginx configuration addition:

server {
    listen 80;
    server_name mysite.com;
    
    location /app/ {
        proxy_pass https://myusername.github.io/my-repository/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_ssl_server_name on;
    }
}

After deploying these changes, I’m getting a 404 “File not found” error when trying to access the subdirectory path. What am I doing wrong in this configuration? Is there a step I’m missing to make GitHub Pages work properly with subdirectory routing through Nginx proxy?

2

The main issue here is that you’re creating a circular proxy configuration. Your GitHub Pages is still configured to serve from the root domain with the CNAME pointing to mysite.com, but then you’re trying to proxy /app/ back to the same GitHub Pages deployment. This creates confusion in the routing.

I had a similar problem when I tried to move my React app to a subdirectory. The solution was to change the GitHub Pages CNAME file to point to a subdomain instead, like app.mysite.com, then update your DNS to have a CNAME record for app pointing to your GitHub Pages URL. Then your Nginx proxy configuration should work correctly.

Alternatively, you could serve your React build files directly from your EC2 instance instead of proxying to GitHub Pages. This gives you more control over the routing and eliminates the proxy complexity altogether.

3

looks like your nginx proxy config might be the issue. when you proxy to github pages, you need to strip the /app/ prefix before sending to gh-pages. try proxy_pass https://myusername.github.io/my-repository/; with proxy_redirect and maybe use rewrite ^/app/(.*)$ /$1 break; before the proxy_pass line. also check if your react router is handling the base path correctly