読者がリンク切れやURLの入力ミスによって、サイト内に存在しないページへアクセスしてしまった時。
Hugo標準のそっけない「404 Page Not Found」という真っ白な画面が表示されると、読者は困惑してそのままサイトから離脱（ブラウザの「戻る」ボタン等で帰ってしまうこと）してしまいます。

迷子になった読者をトップページや代わりの記事へ優しく案内するために、テーマに合わせたオリジナルの 404エラーページ を作成しておきましょう！

layouts/404.html を作る

テーマフォルダの中に layouts/404.html というファイルを作ります。
この名前で作れば、Hugoが勝手に認識してくれます。

baseof.html を使って、デザインを統一しましょう。

{{ define "main" }}
<div style="text-align: center; padding: 50px 20px;">
  <h1>404 Page Not Found</h1>
  <p>申し訳ありません。お探しのページは見つかりませんでした。</p>
  <p>URLが間違っているか、ページが削除された可能性があります。</p>
  <br>
  <!-- トップページに戻るボタン -->
  <a href="{{ .Site.BaseURL }}" style="display: inline-block; background-color: #333; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px;">トップページへ戻る</a>
</div>
{{ end }}

ポイント

  1. {{ define "main" }} で囲む: baseof.html のメイン部分 (block "main") に内容を流し込みます。こうすればヘッダーやフッターは共通のものが出ます。
  2. 親切な案内を入れる: 「見つかりません」だけでなく、「トップへ戻る」リンクや「検索窓」などを置いてあげると親切です。

hugo server でローカルサーバーを起動し、ブラウザで適当な存在しないURL（例: http://localhost:1313/not-found-test/）にアクセスしてみてください。
作成したデザインの「ページが見つかりません」画面が表示されれば成功です！

親切な404エラーページで読者の離脱を防ごう

layouts/404.html を配置するだけで、エラー発生時でもサイト全体の統一されたデザイン（ヘッダーやフッター）を崩すことなく、オリジナルの案内ページを表示できます。
「トップページへ戻る」ボタンのほか、「サイト内検索」や「おすすめ記事」などを配置して、迷子になったユーザーを適切にナビゲートしましょう。🚀