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

发表于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

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

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

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

1
hexo new page 404

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
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 改成自己的博客链接。

然后推送到远程服务器上

1
hexo clean && hexo g && hexo d

修改你的 web 服务器配置

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

caddy 配置方法

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

1
2
3
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 区域添加：

1
fastcgi_intercept_errors on;

在 server 区域 listen 443 处修改：

1
2
3
4
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 试试。