Custom 404 Page in Hexo

Custom 404 Page

First, create a post named 404:

hexo new 404

In the corresponding markdown file, we can customize the 404 page. Due to the characteristics of the Hexo framework, we can write JS scripts to make the page interactive.

Here is my 404 page. As you can see, there’s a countdown on the page. When the countdown reaches 0, it will automatically redirect to the homepage. Of course, users can also manually click to return to the homepage.

Below is the code, which can be directly placed in the markdown file:

<script src="./../js/jquery-3.3.1.min.js"></script>

<div align="center">You are visiting a non-existent address 🤔</div>
<div align="center">You will be automatically redirected to the homepage in <span id="seconds">10</span> seconds,</div>
<div align="center">Or you can click this <a target="_self" href="/en">link</a> to redirect now!</div>

<script>
    $(function () {
        setInterval(function () {
            var seconds = $("#seconds").text();
            $("#seconds").text(--seconds);
            if (seconds == 0) {
                location.href = "/en";
            }
        }, 1000);
    });
</script>

I chose to host the jQuery code locally for faster response.

Here, jQuery is only used to manipulate the DOM, so you can also write it using native JS functions.

How to Redirect to a Custom 404 Page?

Note: The following method is limited to GitHub Pages. Other platforms may have different methods.

Add the following in the front-matter of the markdown file, and GitHub Pages will set this page as the 404 page:

permalink: /404.html

Why not try visiting a non-existent page to see how it works? ▶ Click me

References

Creating a custom 404 page for your GitHub Pages site

theme-next: custom-pages