Nginx configuration for static html-css

Question

I have the below configuration for nginx,

server {
    listen 80;

    root /vol/www/home;
    index /index.html;

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    location / {
        try_files $uri $uri/ =404;
    }
    location /about {
        try_files /about.html =404;
    }
}
    

this is working well, but when I select some paths in the home page say About Us page, the uri comes with the full filename including the ending .html . I was able to get ride of those by adding a separate location in the nginx configuration and changing all the href links to the location instead of filename. So that is one workaround to get ride that but to run locally without server it is not possible.

I have seen a rewrite config in nginx, but I was unsuccessful with that. So I am here to ask how do I setup the uri without a html part in it and without modifying the href path to a uri instead of filename.

My configuration is like so, but it is not working

server {
    listen 80;

    root /vol/www/home;
    index /index.html;

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    location / {
        rewrite ^\/(.*)(\.html)?$ /$1 last;
        try_files $uri $uri/ /index.html =404;
    }
}

A 500 error is thrown: rewrite or internal redirection cycle while processing "/"

Answer 1

replace this to

   rewrite ^\/(.*)(\.html)?$ /$1 last;
        try_files $uri $uri/ /index.html =404;

this

rewrite ^(/.*)\.html(\?.*)?$ $1$2 permanent;
rewrite ^/(.*)/$ /$1 permanent;

try_files $uri/index.html $uri.html $uri/ $uri =404;