Wyam with Nginx, url rewrite and custom 404 page

Published on Saturday, 15 April 2017

Wyam with Nginx, url rewrite and custom 404 page

For this blog I decided to use static site generator. I choose Wyam, because it is open-source and written on C#. I'm C# developer myself, so I figured out that it would be interesting experience to use it for my blog.

For the web server I'm using nginx it is it is fast, lightweight, and I think ideal for static sites. I have some experience with nginx but not too much, and first issue that I faced was a problem with urls.

Wyam in its blog recipe use post file name as url. If you have a post with the file name my-today-postin your input folder, then the url to that post will be yourblog.com/posts/my-today-post. But it is static generator, so as a result we have post/my-today-post.htmlin our site, so when we try to open url yourblog.com/posts/my-today-post we get 404 page. So instead of trying to open posts/my-today-post we need to setup redirect to posts/my-today-post.html but we want url to be the same posts/my-today-post because it just looks better.

To solve this I use nginx try_files directive (see Creating NGINX Rewrite Rules)

        location / {
                # First attempt to serve request as file, then
                # as directory, then file.html, directory with index.html, then fall back to displaying a 404.
                try_files $uri $uri.html $uri/index.html =404;
        }
}


The next thing that I want to improve is 404 page. Nginx default 404 page isn't pretty, so let's try to build something better.

As a template for our 404 page we could use a simple page generated by Wyam.

Lets create a file 404.md in our input folder:

TItle: 404 Page
---
Page not found :(

Save it, and run:

wyam -r Blog -t CleanBlog

We got 404.html in our output folder. Lets check it out, Yes it looks good but we have another menu item in navbar which says 404 Page

menu

We don't need that, so let's edit html directly, and remove this item.

Ok it's better now but I want to add a picture there too, so it looks nicer. (Of course you could use any html there and build your own 404 page. )

But how we keep this page from changing every time when we rebuild our site?

The answer is that we could just put this 404.html with changes that we just made into input folder and remove 404.md and then Wyam just copy 404.html into output without any changes.

The next question is how we tell nginx to use our custom page instead of default one?

error_page directive will help us:

....
        error_page 404 /404.html;
	# The location directive here prevents users from directly browsing the 404.html page.
        location  /404.html {
                internal;
        }

don't forget to restart nginx after any config changes.

To make sure that config doesn't have errors before restart it use nginx -t

Final Nginx config:

server {
        listen 80;

        root /your_site_dir;
        index index.html index.htm;

        # Make site accessible from http://yourdomain.com/
        server_name yourdomain.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then file.html, directory with index.html, then fall back to displaying a 404.
                try_files $uri $uri.html $uri/index.html =404;
                error_page 404 /404.html;
	        # The location directive here prevents users from directly browsing the 404.html page.
                location  /404.html {
                        internal;
                }
        }
}

So how we have 404 page that we want.