本文章最初发表在XJHui’s Blog，未经允许，任何人禁止转载！

为使您获得最好的阅读体验，强烈建议您点击 这里 前往 XJHui’s Blog 查看！

前言

本教程仅适用于部署在Zeit.co的个人网站。

我的博客使用的是Hexo框架+Butterfly主题+GitHub仓库+Zeit.co部署+又拍云CDN（这不是在打广告，很认真的在写博客），主题配置文件中有404页面的具体设置：

这样配置能渲染出404页面：

但当你真正404时：

配置好404后也没有测试过，一直以为我的404页面是正常的…

踩坑经历

这里记录踩坑经历，想跳过的可以直接传送到 这里 。

  1. 百度找到Yavin的这篇文章中有说解决方法：

    创建now.json文件：

    1
    2
    3
    4
    5
    6
    7
    {
      "version": 2,
      "routes": [
        { "handle": "filesystem" },
        { "src": "/(.*)", "status": 404, "dest": "/404.html" }
      ]
    }

    并把它放到根目录（我当时认为是Hexo的根目录），hexo g 后自动在/public下生成now.json文件：

    于是我兴奋的hexo d后发现提交至Zeit.co仓库失败了：

    英文看不懂？就是说生成的json文件不符合规范（存在语法错误），仔细看上图会发现json文件中包含了JavaScript，至于为什么会这样至今我也不知道，如果您知道原因欢迎到评论区留言（失败）。

  2. 于时更换了now.json文件位置，把他放在了主题的根目录，结果发现hexo g后在/public文件夹下未生成now.json文件（失败）。

  3. 既然无法生成，那我就直接到GitHub仓库，创建now.json文件并把上面的代码沾了进去，再次提交竟然成功了，这才明白原来Yavin说的根目录是指仓库根目录，但这样做存在的问题是下次hexo d后now.json文件会直接被删掉（失败）。

  4. 我知道hexo d其实就是把/public中的文件上传到仓库。想把json文件放到仓库根目录其实就是先放到/public中，于时开始想哪里的文件hexo g后能直接生成在/public中，看了一眼仓库中的文件：

    ​ 有点熟悉呀，这三个文件夹不就是主题根目录/source（不是hexo根目录下的/source）中的三个文件夹？：

    ​ 于时我很开心的把now.json文件放进了/source中

    ​ 哈哈，测试没问题，终于解决了。

解决404页面无法显示

本博客提供的方法仅在Hexo博客框架下Butterfly主题测试，其余框架或主题可自行尝试。

若您的主题使用了页面压缩（gulp…），需要先排除掉conf.json这个文件。

在主题根目录/source下新建now.json文件，粘贴下面的代码：

1
2
3
4
5
6
7
{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}

注：该json文件会调用404.html，所以要保证仓库根目录有404.html文件，当然也可以写成其他文件（也为下面自定义404页面创造可能）。

感谢：Yavin

自定义404页面

主题404页面可配置项不多（仅支持修改背景图片），但你可以按照本教程让你的博客拥有喜欢的404页面

当然你可以去修改404的pug文件，但我实在是不想动源代码（主要是怕博客报错，然后gg）

先上gif，看看我的404页面：

404页面代码来自CodePen，感谢！

其实很简单，大致思路是新建page页面 -> 禁止渲染该页面 -> 修改json.now文件。

新建page页面

怎么创建应该都会吧，这里以404为例：

1
hexo new page 404

别担心这个404会渲染出404.html然后与原有的404.html冲突，因为page页渲染出来的是/404/index.html

创建后的文件：

禁止渲染

为什么要禁止渲染？如果不禁止会像其他页面那样被加上顶部图、页脚…

主要有两种方法，想具体学习的可以看这篇文章，本篇教程指介绍一种我认为简单的：

  1. index.md中添加：

    1
    layout: false

  2. 插入html代码时，使用标签：

    1
    2
    3
    4
    5
    {% raw %}
    ...
    html
    ...
    {% endraw %}

例如：

如果喜欢我的404页面，可以使用下面的代码（太长了，使用PasteMe平台）：

点击查看代码，点击该位置可以直接复制哦：

说起PasteMe，又让我想起来iamzxf，还是很感谢他…

修改now.json文件

来到了最后一步，离成功又近了一步。

将原now.json文件中的：

1
"dest": "/404.html"

修改为：

1
"dest": "/404/"

至于为什么这样修改，应该很好理解，不多解释了。

不足之处，欢迎留言，评论会及时回复，错误会及时更正！

创作不易，感谢支持！

最后的最后，欢迎访问我的个人博客XJHui’s Blog。