Posted on In , Word count in article: 294 Reading time ≈ 1 mins.

Custom 404 Page

First, create a post named 404:

1
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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?

Read more »