Hugo のテーマを作ってみます 5(Custom 404 Page)

前回の記事では、 Taxonomy Templates を使ってみました。 今回は、 Custom 404 Page を使ってみます。

最初に、この記事の通り、サイトとテーマの骨組みを作成しておきました。

環境

  • Hugo Static Site Generator v0.38.2

Custom 404 Page

Custom 404 Page

If you know how to create a single page template, you have unlimited options for creating a custom 404.

When using Hugo with GitHub Pages, you can provide your own template for a custom 404 error page by creating a 404.html template file in your /layouts folder. When Hugo generates your site, the 404.html file will be placed in the root.

Custom 404 Page | Hugo

/layout/404.html ファイルを作成すればいいみたいです。

404.html

404.html ファイル (themes/<THEME>/layouts/404.html) を次のように作成しました。

{{ define "main" }}
  <main>
    <h1>404</h1>
    <p>Not Found.</p>
    <p><a href="{{ "/" | relURL }}">Go Home</a></p>
  </main>
{{ end }}

baseof.html

以前の記事を参考に、 baseof.html ファイル (theme/<THEME>/layout/_default/baseof.html) を次のように作成しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      {{ block "title" . }}
        {{ .Site.Title }}
      {{ end }}
    </title>
  </head>
  <body>
    {{ block "header" . }}
    {{ end }}
    {{ block "main" . }}
    {{ end }}
    {{ block "footer" . }}
    {{ end }}
  </body>
</html>

Hugo のサーバーで確認

$ hugo -t <THEMENAME> server

http://localhost:1313/404.html にアクセスします。 すると、 404 Page が表示されました。

Automatic Loading

Automatic Loading

Your 404.html file can be set to load automatically when a visitor enters a mistaken URL path, dependent upon the web serving environment you are using. For example:

  • GitHub Pages. The 404 page is automatic.

Custom 404 Page | Hugo

GitHub Pages は、ファイルが見つからない場合は、自動的に 404.html を表示してくれる設定になっているようです。

終わり

404 Page もサイトに合わせておきたいです。

参考

12 April 2018 追記

次の記事を書きました。