I have a 404 page for this site long time ago. When a bad URL is visited, the 404 page shows and redirects back to the index page after 5 seconds. It works fine locally since the day added, therefore I assumed it would work when the site is deployed.

Here is how it behaves like:

Local 404

Problem

Disappointingly, not until today did I notice my 404 page never have worked on the actually deployed one (junhan.xyz). By the moment you see this, the problem should have been fixed since this post is about how I fixed it.

Previously, it failed as this:

Failed 404

super boring, isn't it?

Sub-problem

Jekyll documentation provides an answer for nginx case: Add the following lines to your nginx.conf file

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

However, I used Heroku to host my site, I don't have access to such a file...

Solution

So I did some research and it turned out there is a Heroku Buildpack named heroku-buildpack-static is used to support nginx configuration and I used it (mentioned in Build an 'xyz' domain site with Jekyll and Heroku) when setting up the site.

Therefore the specific solution for a Heroku hosted site is to add a new config to the static.json file:

{
  ...
    "error_page": "404.html",
  ...
}

After a new deployment, it worked!

Conculsion

Well, now I at least get what that buildpack was used for. Then I deployed another 401 page for unauthorized payments, which is working nicely too.

happy