Hexo 博客添加腾讯 404 公益页面 / Configure a 404 page for Hexo

Posted on Edited on In Views: Word count in article: 507 Reading time ≈ 2 mins.

背景

当用户点击我们发布的一些旧链接，而 Hexo 的链接都是永久链接，如果该文章被我们删除或者更改了链接，那么用户便会显示 nginx 的 404 页面，这个页面不够友好并且不能帮我们跳转到首页。

其实，hexo 本身是具备自定义 404 页面的，并且 nginx 会自动拦截并显示指定的 404 Not Found 页面，我们可以通过配置 hexo 和 nginx 来跳转自定义界面。

你可以在我的域名下随便修改一个网址，查看自定义 404 页面展示效果，如 http://www.yanlongwang.net/123_404。

希望新的一年每个家庭都能够幸福美满，充满孩子们的欢声笑语。我也想尽自己的所能，来帮助离家的孩子们能够回到温暖的父母身边。我在今天这个特殊的日子，在自己的博客添加了腾讯 404 公益页面，希望光顾我博客的朋友如果看到 404 页面的时候，能够有现实的意义。每一个孩子都不应该被放弃，如果有万分之一的希望。

设置 hexo 的 404 页面

  1. 在 Hexo 命令行执行 
1
hexo new page 404

那么在 Hexo 的根目录下，创建一个文件夹：\hexo\source\404。

  1. 编辑 index.md，自动跳转腾讯公益。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.yanlongwang.net"></script>
true</body>
</html>

其中，修改 homePageUrl 设置为自己的网站主页。

  1. 重新发布网站

设置 nginx 环境以支持 404 页面显示

  1. 编辑服务器上 nginx 的配置文件，将 error_page 设置为 hexo 的 404 页面。
1
2
3
4
5
6
## location in /etc/nginx/conf.d/xxx.conf
location / {
   root /your_root;
   index index.html index.htm;
   error_page 404 /404/index.html;
}
  1. 重启 nginx 并检查 nginx 状态 
1
2
3
4
5
6
## 重启 nginx
- systemctl restart nginx 
## 检查重启后 nginx 的状态
- nginx -t
  * nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  * nginx: configuration file /etc/nginx/nginx.conf test is successful