カスタム 404 ページ

GitHub Pages  と共に Hugo を使用する場合、layouts フォルダのルートに 404.html テンプレートファイルを作成することによって、カスタム 404 エラーページ  のテンプレートを独自に用意することができます。 Hugo がサイトを生成するとき、404.html ファイルはルートに置かれます。

404 ページは、テンプレートで使用できるすべての通常の ページ変数 を持つことになります。

標準的なページ変数に加えて、404 ページは .Pages からアクセスできるすべてのサイトコンテンツにアクセスできます。

▾ layouts/
    404.html

404.html

以下は、404.html テンプレートの基本的な例です。

{{ define "main" }}
  <main id="main">
    <div>
      <h1 id="title"><a href="{{ "" | relURL }}">Go Home</a></h1>
    </div>
  </main>
{{ end }}

オートローディング

404.html ファイルは、Web サーバー環境に応じて、訪問者が間違った URL パスを入力したときに自動的に読み込まれるように設定できます。例えば、以下のようになります。

• GitHub Pages 、GitLab Pages 、Cloudflare Pages では、404 ページは自動で表示されます。
• Apache では、 ErrorDocument 404 /404.html は、サイトのルートにある .htaccess ファイルで指定できます。
• Nginx では、nginx.conf ファイルに error_page 404 /404.html; を指定できます。 詳細はこちら  を参照してください。
• Amazon AWS S3 では、静的 Web サービス用にバケットを設定する場合、S3 GUI 内からエラーファイルを指定できます。
• Amazon CloudFront では、CloudFront コンソールの Error Pages セクションでページを指定できます。詳細はこちら  を参照してください。
• Caddy Server では、1 つ以上のステータスコードに対してエラーページを指定するには、 handle_errors ディレクティブを使用します。 詳細はこちら  を参照してください。
• Netlify では、content/_redirects に /* /404.html 404 をします。詳細はこちら  を参照してください。
• Azure Static Web App では、設定ファイル staticwebapp.config.json に responseOverrides.404.rewrite と responseOverrides.404.statusCode を設定します。 詳細はこちら  を参照してください。
• 静的 Web サイト ホスティングとしての Azure Storage では、Azure ポータルの静的 Web サイトの設定ページで、Error document path を指定できます。 詳細はこちら  を参照してください。
• DigitalOcean のアプリ プラットフォームでは、アプリの仕様ファイルに error_document を指定するか、コントロールパネルを使用してエラードキュメントを設定できます。 詳細はこちら  を参照してください。
• Firebase ホスティング  では、/404.html が自動的に 404 ページとして使用されます。