Prologue

When you use Nginx for static pages, e.g. personal blog, you might not be content with the basic configurations. For example, you may want more unified URL, or redirect URLs with the same resource to only one. Based on my experience on hosting this blog with Nginx, I’ll talk about some useful tips to better serving your static pages.😊

If you are new to Nginx, you may want to see Basic Serving and Proxying in Nginx first.😉

Tips To Take

Error Page

If Nginx could not find a resource, you’ll see its default error page. However, ~~and of course,~~ this can be configured using error_page option. Here, both 403 and 404 errors are redirected to /404.html.

1
2
3

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

Note that, the URL in user’s browser will not change. Nginx just return 404.html as the missing resource.

Default Page

Usually, the index.html is the default page for a directory. However, users have to explicitly type index.html at the end of the URL. If you want to make it easier for users, you can use index option to specify the default page. You can use autoindex to have Nginx handle this for you. Or you can use index to specify the index HTML file.

server {
    listen 80;
    server_name: xx.xx.xx.xx;
    
    root /home/wwwroot/;
    
    location /pages/ {
        autoindex on;
    }
    
    location /also/ {
        index index.html index.htm;
    }
}

Now, you will get /pages/tags/index.html with URL /pages/tags/, and the URL in the browser will still be /pages/tags/.

Be warned, autoindex only works for URLs that end with /.

URL Rewrite

It is good to have a default page for a directory. However, this introduce another problem. That is to say, user can access the same page with two different URLs. For example, /some/page/ and /some/page/index.html will show the same page. It is bad for SEO, and it will cause the same page to show up as two entries in analytics tools.

Luckily, Nginx can rewrite the requested URL, so that we can merge them into one. In the following example, we identify trailing index.html and remove it.

location / {
    if ( $request_uri ~ "/index.html" ) {
        rewrite ^/(.*)/ /$1 permanent;
    }
    index index.html index.htm;
}

Now, when user visits /some/page/index.html, the URL will automatically change to /some/page/. All query parameters and anchors will be preserved.

Note that URL rewrite will change the URL in user’s browser.

Redirect

Suppose you have a domain, so people can visit your website with www.tonys-studio.top. However, some lazy people may just type tonys-studio.top, and find nothing. What’s more, if someone knows your IP, he can also visit your website with xx.xx.xx.xx! Three names for one website, what a mess!😨

To avoid this, you can redirect all these URLs to www.tonys-studio.top. To achieve this, you can simply declare another server in the same configuration file, and return a 301 redirect.

server {
    listen 80;
    server_name www.tonys-studio.top;
    
    # other configurations
}

# redirect all other URLs
server {
    listen       80;
    server_name  tonys-studio.top 8.130.103.241;
    return       301 http://www.tonys-studio.top$request_uri;
}

This will retain the request path and query parameters. However, the host name will be changed to www.tonys-studio.top on the client side.

The same goes with redirecting HTTP to HTTPS. In this case, we simply add a check for protocol, and redirect to HTTPS if it is HTTP.

server {
    listen 80;
    server_name www.tonys-studio.top;

    if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
    }
    
    # other configurations
}