Hexo 配置 404 页面

发表于 阅读次数：

在博客中，如果链接错误，指向了一个不存在的地址，默认情况下会进入 Nginx 简陋的 404 页面。那么如何配置自定义的 404 页面呢。

Hexo 404 页面创建

在 Hexo 项目的 source 目录下会创建一个 404 目录。在其中新建一个 index.md 文件。在文件中，添加以下内容：

1
2
3
4
5
6
7
---
title: 404 Not Found
---

<h1 align="center">页面未找到，来吹空调吧</h1>

<iframe style="width:100%;" height="800" frameborder="no" src="https://ac.yunyoujun.cn"></iframe>

这个页面中使用 iframe 引入了一个网页小空调，项目地址 YunYouJun/air-conditioner。也可以根据自己的需要填写其他内容。

在本地使用以下指令在本地运行 Hexo 之后，可以通过链接 http://localhost:4000/404/ 来查看 404 页面的显示效果。

1
2
3
hexo clean
hexo g
hexo s

配置 Nginx 404 页面跳转

创建完成 404 页面之后，就需要调整 Nginx 的配置，使当前域名下的 404 发生时自动跳转到我们的自定义链接。

首先编辑 Nginx 的配置文件 /etc/nginx/nginx.conf。在 http 部分加入下面这一行。

1
fastcgi_intercept_errors on;

接着进入 Hexo 博客所使用的配置文件，添加下面这一行。具体 /404/index.html 这个路径可以查看运行 hexo g 命令时，在 Hexo 项目源码根目录下生成的 public 目录中 404 页面的具体路径。根据实际情况来填写。

1
error_page 404  /404/index.html;

接着重启 Nginx 服务，并查看 Nginx 重启后状态是否正常。

1
2
sudo systemctl restart nginx
sudo systemctl status nginx

查看效果

将博客部署完成后，使用域名开启博客，点击进入随便一篇文章，随意修改一下链接，就能看到自定义的 404 页面了。这里是本博客的 404 界面预览。