Improve this page

カスタム404ページ

11 March 2017 ashmaroli

壊れたリンクへアクセスしたときに表示されるデフォルトのError 404 – File Not Foundページを、Jekyllで簡単にカスタム404エラーページに置き換えることができます。

GitHub Pagesの場合

_siteディレクトリのrootに404.htmlがGitHub PagesとローカルWEBrick開発サーバーにより自動で提供されます。

簡単には、404.mdか404.htmlをサイトのソースディレクトリのrootに追加し、テーマの基本レイアウトを使用するようfront matterを記載します。

エラーページ用のファイルを細部ディレクトリに入れる場合は、以下のようにfront matterにpermalink: /404.htmlを記載します。これで、コンパイル後の404.htmlはサイトのrootディレクトリに存在することになり、サーバーに認識されます。

---
# example 404.md

layout: default
permalink: /404.html
---

# 404

Page not found! :(

Apache Webサーバーによるホスティングの場合

Apache Webサーバーはその機能に変化を加えるために、.htaccessという設定ファイルを読み込みます。

簡単には、以下の内容を.htaccessに追加します。

ErrorDocument 404 /404.html

.htaccessファイルでは、サブディレクトリのエラーページも自由に指定できます。

ErrorDocument 404 /error_pages/404.html

パスは、サイトのドメインからの相対パスです。

Apache Errorページの設定に関する更なる情報は、official documentationをご覧ください。

Nginxサーバーによるホスティングの場合

Apacheサーバーの場合と同様に簡単ですが、少し異なります。

Nginxの設定ファイルは、インストールされているシステムに依存します。多くの場合は、/etc/nginx/か/etc/nginx/conf/にあるnginx.confです。しかし、Ubuntuの様な他のサーバーでは、サーバー関連の情報を含むdefaultというNginx設定ファイルを探す必要があります。通常は/etc/nginx/sites-available/か/etc/nginx/sites-enabled/にあります。以下をNginx設定ファイル（nginx.confファイルやdefaultファイル）に追加します。

server {
  error_page 404 /404.html;
  location = /404.html {
    internal;
  }
}

もし、serverブロックが既にあれば、上記のserverブロックに中身だけを追加してください。locationはユーザーが直接404.htmlページを見ることを防ぎます。

Nginxエラーページに関する更なる情報は、nginx official documentationをご覧ください。

設定ファイルの編集は注意して進めてください。

Back

Next