自定义 Jekyll 的 404 页面

11 March 2017 ashmaroli ashmaroli

如果你想用 Jekyll 创建自定义的 404 错误页面,替换默认的 Error 404 – File Not Found 页面,只需要几个简单的步骤。

在 GitHub Pages 上部署

只要你在网站的 _site 目录根部放一个 404.html 文件,GitHub Pages 和本地的 WEBrick 开发服务器都会自动使用它作为 404 页面。

你可以在网站源文件目录的根部添加一个 404.md404.html 文件,并在文件头部(Front Matter)中指定使用主题的基本布局。如果你想把文件放到子目录下,请确保文件的头部包含 permalink: /404.html。这样编译后的 404.html 文件就会放在你网站的根目录,服务器就能找到它了。

---
# example 404.md

layout: default
permalink: /404.html
---

# 404 错误

## 页面找不到! :(

> 页面可能不存在或已被删除了。

Apache 服务器配置 404 页面的方式

Apache Web 服务会预处理 .htaccess 文件中的内容,可以通过修改 .htaccess 文件自定义站点的部分配置。

只需将以下内容添加到 .htaccess 文件中,即可自定义 404 页面。

ErrorDocument 404 /404.html

通过修改 .htaccess 文件中 ErrorDocument 404 参数的值,可以任意自定义 404 文件的位置,比如你可以把错误页面放到子目录中。

ErrorDocument 404 /error_pages/404.html

这个路径是相对路径,相对于你网站页面根目录下。

更多关于 Apache 错误页面的信息,请参考Apache 官方文档中错误页面部分

Nginx 服务器配置 404 页面的方式

Nginx 服务器配置 404 错误页面的方式和配置 Apache 错误页面一样简单,只是文件路径和配置写法不同。

在不同的操作系统中,nginx 配置文件所在位置略微不同,大多数系统中文件名为 nginx.conf ,一般存放在 /etc/nginx//etc/nginx/conf/ 中。 但是在 Ubuntu 等其他系统中,需要查找包含服务器相关信息的 default nginx 配置文件,这个文件一般存放在 /etc/nginx/sites-available/ 或者 /etc/nginx/sites-enabled/ 中。添加到 nginx.conf 文件或 default 文件中:

server {
  error_page 404 /404.html;
  location = /404.html {
    internal;
  }
}

如果 server 配置片段已存在,直接在里面添加 server 相关参数即可。 该 location 指令阻止用户直接浏览 404.html 页面。

更多 nginx 错误页面的信息,请查看 nginx 官方文档

修改 Nginx 配置文件时请谨慎操作!