nginx rewrite html file and add trailing slash

Question

I have read a dozen rewite questions. Most questions are for .php but I have simple .html files so about => about.html .But I am not able to get nginx to do this:

accept url with or without "/"
redirect domain.com/about and domain.com/about/ to domain.com/about.html
add trailing slash to the URL so if I write domain.com/about it writes domain.com/about/

I have tried with this code rewrite ^/([a-zA-Z0-9]+)$ /$1.html; but it gives me 404 error on url ending with "/". Also tried this rewrite ^([a-zA-Z0-9]+)/?$ $1.html with same error.

Some suggest I should be using try try_files?

I tried this also which gives a 500 error:

location / { 
rewrite ^(.*)$ /%1 redirect; 
rewrite ^/([^\.]+)$ /$1.html break; 
}

I tried to convert apache to nginx (winginx.com) from suggestion here with no success.

This code does not work. I am trying to redirect and add trailing slash:

if (!-e $request_filename){
rewrite ^/(.*)/$ /$1 redirect;
}
if (!-e $request_filename){
rewrite ^/(.*[^/])$ /$1/ redirect;
}

Any suggestion would make me happy.

The simplest solution would be to rename about.html to about/index.html then nginx pretty much does what you want with its index module. — Richard Smith
– Richard Smith, Commented Jan 12, 2017 at 17:53
This sounds a bit overkill. Instead of single html files I would have to make a folder for every html file and put the contents in a index.html file into that folder?!? — Asle
– Asle, Commented Jan 12, 2017 at 19:43

Richard Smith · Accepted Answer · 2017-01-12 20:24:33Z

2

I have tested this configuration and it appears to meet your requirements (YMMV):

root /path/to/root;

location / {
    try_files $uri @rewrite;
}
location @rewrite {
    rewrite ^(.*[^/])$ $1/ permanent;
    rewrite ^(.*)/$ $1.html break;
}

The first location attempts to serve the file as is which is necessary for resource files. Otherwise it defers to the named location.

The named location will permanently redirect any URIs which do not end in /. Otherwise, the .html file is served.

See this document and this document for details.

answered Jan 12, 2017 at 20:24

Richard Smith

50.3k7 gold badges97 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asle Over a year ago

Hi, sorry this is not working. With this config I get a 404 page on index.html (root). When I click on e.g. "projects" it shows projects.html and the URL is "example.com/projects" but all css and images are broken. On the page projects I click on link "about" (the page is about.html) and I get "example.com/projects/about" -> It should be "example.com/about" and from there it goes to "example.com/projects/about/about/about ...." etc. so there is an internal loop.

Richard Smith Over a year ago

Using path relative resources (css & js) will not work with your scheme, as the browser assumes that the trailing / is a subdirectory. The link to about.html should probably be /about.html to avoid getting /project/about.html for the same reason. I don't get the internal loop - but it is a big risk with these types of scheme.

Asle Over a year ago

I agree with the risk Richard! I rewrote the paths to absolute and the css and images are working. Also made the links absolute. That fixed the wrong URLs . Thanks for the insight and for understanding what I was trying to solve!

Faisal Memon · Accepted Answer · 2017-01-12 17:57:34Z

0

I think a try_files would be appropriate here. For example:

location /about {
    try_files about.html;
}

answered Jan 12, 2017 at 17:57

Faisal Memon

1,1078 silver badges7 bronze badges

2 Comments

Asle Over a year ago

Will work for about.html but I have many files, about.html, contact.html, projects.html, gallery.html etc...

Faisal Memon Over a year ago

You can create a block for each one or use a regex like: location ~ ^/(.*)/?$ {try_files $1.html;}

Collectives™ on Stack Overflow

nginx rewrite html file and add trailing slash

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related