自定义404页面

当使用Hugo与GitHub Pages时，你可以通过在layouts文件夹的根目录下创建一个404.html模板文件来提供自己的自定义404错误页面模板。当Hugo生成你的站点时，404.html文件将会被放置在根目录下。

404页面将包含可以在模板中使用的所有常规页面变量。

除了标准页面变量之外，404页面还可以访问由.Pages提供的所有站点内容。

▾ layouts/
    404.html

404.html

这是一个基本的404.html模板示例：

layouts/404.html

{{ define "main" }}
  <main id="main">
    <div>
      <h1 id="title"><a href="{{ "" | relURL }}">回到主页</a></h1>
    </div>
  </main>
{{ end }}

你的404.html文件可以在访问者输入错误的URL路径时自动加载，这取决于你使用的Web服务器环境。例如：

GitHub Pages、GitLab Pages和Cloudflare Pages。404页面是自动加载的。
Apache。你可以在你的站点根目录下的.htaccess文件中指定ErrorDocument 404 /404.html。
Nginx。你可以在你的nginx.conf文件中指定error_page 404 /404.html;。详情请参阅此处。
Amazon AWS S3。当设置一个桶用于静态网页服务时，你可以在S3的图形用户界面中指定错误文件。
Amazon CloudFront。你可以在CloudFront控制台的错误页面部分指定页面。详情请参阅此处
Caddy Server。使用handle_errors指令来指定一个或多个状态代码的错误页面。详情请参阅此处
Netlify。在content/_redirects中添加/* /404.html 404。详情请参阅此处
Azure Static Web App。在配置文件staticwebapp.config.json中设置responseOverrides.404.rewrite和responseOverrides.404.statusCode。详情请参阅此处
Azure Storage作为静态网站托管。你可以在Azure门户的静态网站配置页面中指定Error document path。详情请参阅此处.
DigitalOcean App Platform。你可以在应用程序规范文件中指定error_document，或使用控制面板设置错误文档。详情请参阅此处.
Firebase Hosting：/404.html会自动用作404页面。