How to create a custom 404 page on Zeit Now(zeit.co)

When using @now/static-build, now will serve the internal 404 page. That's the issue with some static site generators like GatsbyJS. But github pages handles this effectively by showing 404.html(if exists) for any page not found.

Here, I am using the example of the GatsbyJS. But this works with any static builds that you host using Zeit Now.

Solution

Modify your now.json, something like this:

{
  "version": 2,
  "name": "awesome-utopian",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "public"
      }
    }
  ],
  "routes": [{ "handle": "filesystem" }, { "src": "/.*", "status": 404, "dest": "404.html" }]
}

Note:
Based on your technology, you might need to change the config.distDir property.