Jekyll

JekyllはRubyベースで動く、静的サイトジェネレータ。

Front MatterとLiquidテンプレートが便利。

Netlify

Netlifyは静的サイトホスティングなどのサービスを提供する。

Gitレポジトリとの連携が容易で、例えばプレイベートレポジトリのファイルを基に自動でビルドしてくれる。

CMSの機能や、DNSのサービスもあり、今話題のJAMstackベースのウェブサービスの先頭を走るサービス。

表示された404ページ

Netlifyでサイトが表示できるようになって、404エラーの動作確認をしたところ、以下のようなNetlify独自の404ページが表示された。

Jekyll Netlify 404 error

今回は、テーマファイルを全てダウンロードしてサイトを作ったので、404ページの準備を忘れたかと思い確認したが、404.htmlは準備していた。

Jekyllのカスタム404ページ

Jekyllでカスタム404ページを設定するには404.htmlか404.mdをルートディレクトリに設置するだけ良い。

Simply add a 404.md or 404.html at the root of your site’s source directory and include front matter data to use the theme’s base layout.

Custom 404 Page | Jekyll • Simple, blog-aware, static sites

つまり生成される_siteのディレクトリに404.htmlというファイルがあれば良い。

JekyllサイトをNetlifyでホストするときも、404.htmlを作れば良いという解説をよく見かける。

しかし、確かに404.htmlのための元ファイルが存在するにもかかわらず、カスタム404ページが表示されなかった。

原因と解決

_config.ymlでpermalink: /:year/:title/と設定していた。

ルートに配置している404.htmlにアクセスすると/404/で表示されていた。

Jekyllの公式ページでは、サブディレクトリに404ページ用のファイルを設置して管理するときだけ、Front Matterにpermalink: /404.htmlを設定すると書いてある。

If you plan to organize your files under subdirectories, the error page should have the following Front Matter Data, set: permalink: /404.html. This is to ensure that the compiled 404.html resides at the root of your processed site, where it’ll be picked by the server.

Custom 404 Page | Jekyll • Simple, blog-aware, static sites

しかし、_configで独自のpermalinkを設定していたことが関係しているかは分からないが、404.htmlbuildの際に404ページは/404/index.htmlとして生成されるようです。

なので、どの環境でホストするにしても404.htmlまたは404.mdには、Front Matterにpermalink: /404.htmlと書いておくのが良いということだと思います。

jekyll newで生成されるJekyllサイトのデフォルトテーマであるminimaでもpermalink: /404.htmlが書いてありました。