Tutorial
February 8, 2023

Hexo 404 page setup

Steps

  1. Go to your blog folder, and create a new page named 404. Hexo will generate a subfolder named 404 under the folder source. Inside subfolder 404 contains a markdown file named index.

File structure: source > 404 > index.md

1
2
cd MyBlog
hexo new page "404"
  1. Edit index.md with the information you want to display on your 404 error page. Also, edit the front-matter area.

Defining permalink for the error page

1
permalink: /404.html

Hide the date of this page

1
no_date: true

Hide the comment area of this page

1
no_comments: true

Hide the about/copyrights area of this page

1
no_about: true

index.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: Oops 404 Error
no_date: true
no_comments: true
no_about: true
permalink: /404.html 
---
<style>
  h2 {
    text-align: center
  }
</style>
<h2>
This is the edge of my blog <br/>
But not the edge of the world <br/>
Heading to the Stars <br/>
And keep going! <br/>
</h2>
  1. Generate static files by using hexo generate.
1
2
hexo g 
# Or hexo generate

This will generate a subfolder 404 with an index.html file.

  1. If you host your website on a cloud server, modify your Nginx config.
1
2
3
#ERROR-PAGE-START
error_page 404 /404.html;
#ERROR-PAGE-END

Example link: https://jinchuan.site/404



Reference

About this Post

This post is written by Andy, licensed under CC BY-NC 4.0.

#Hexo#404