独自の404ページを作る

404とはNot Foundエラーのレスポンスのことである。つまり該当URLのページが見つからなかった場合のエラーレスポンスである。

https://ja.wikipedia.org/wiki/HTTP_404　- HTTP 404

HTTP 404、またはエラーメッセージ Not Found（「未検出」「見つかりません」の意）は、 HTTPステータスコードの一つ。クライアントがサーバに接続できたものの、 クライアントの要求に該当するもの (ウェブページ等) をサーバが見つけられなかったことを示すもの。 また、要求に応えられない理由をごまかすためにも使われる。

Hugoの場合、カスタムの404レスンポンスページ表示を作るには、/layouts/404.html を作ればOKとのこと。

https://gohugo.io/templates/404/ - Custom 404 Page

公式サイトの説明を参考にして

/layouts/404.html

{{ define "main"}}
    <main id="main">
      <div style = "text-align:center;">
       <h1 id="title">ページが見つかりません!<br/><a href="{{ "/" | relURL }}">ホームに戻る</a></h1>
      </div>
    </main>
{{ end }}

こんなHTMLを用意してみる。

404ページの動作チェック

さて、ローカルテスト環境で404エラーの動作をチェックするには直接に http://localhost:1313/404.html を開いてチェックする。

実際に表示させてみるとこんな感じになる。

なお、hugo serverでローカル動作チェックしている時は存在しないページにアクセスしてもデフォルト文言のページが表示されるだけで、こんな感じになる。

つまりローカル環境でhugo server起動でチェックしている時に自前で用意した404エラーのページをチェックするには、404.htmlを直接指定しない限り、自前作成の404.htmlが表示されないので注意が必要だ。

なお、NetlifyのWEBサイトホスティングを利用している場合、特に404.htmlを用意していなくても、存在しないページにアクセスすると、こんな感じで表示された。

ただ、なるべくなら自前の404エラー表示のページを用意した方がいいだろう。