使用自己的服务器搭建hexo博客如何创建一个404页面

网上有很多使用 github 托管自己博客的帖子教你如何创建 404 页面,因为 github 自动响应 404 状态码,所以不需要任何其他配置。但是自己的 nginx 或者 caddy 不配置的话只会返回明文状态码。看起太 low 了。下面教你如何配置

在本地博客文件夹创建一个 404 pages

进入到本地博客文件夹,输入

hexo new page 404

然后在 source 文件夹下面就会出现一个新的文件夹 404 , 打开文件夹里面的 index.md 文件,粘贴以下代码(使用 typora 的话记得按 ctrl+/ 进入编辑模式):

---
title: 404 Not Found:该页无法显示
toc: false
comments: false
permalink: /404
---
<!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://blog.pakro.top"></script>
    </body>
</html>

记得把 homePageUrl 改成自己的博客链接。

然后推送到远程服务器上

hexo clean && hexo g && hexo d

修改你的 web 服务器配置

我使用的 caddy 服务器。随便说一句,caddy 配置起来真的比 nginx 简单多了,尤其是新开一个服务器的时候。

caddy 配置方法

Caddyfile配置

找到自己 Caddyfile (一般在 /etc/caddy 文件夹下),添加红框内的三行代码

  errors /var/log/caddy_errors.log {
    404 404.html
  }

重启 caddy 即可。

nginx 配置方法

我好久都没有用 nginx 了,所以这一部分是抄的: https://www.suscrb.com/2019/10/17/Configure404pages/

编辑 /etc/nginx/nginx.conf 文件

在 http 区域添加:

fastcgi_intercept_errors on;

在 server 区域 listen 443 处修改:

error_page 404 /404.html;
location = /404.html {
  root  /home/hexo/404;
}

其中:

第一处的 error_page 的/ 404.html 代表你 404 文件名字 , 一般不用改, 如果不放心就进入服务器里面的文件夹看看文件名是什么

location引用上面的 404.html,并且在里面配置 404 页面的文件夹路径

重启 nginx 即可。

查看是否成功

访问: https://blog.pakro.top/404 试试。