Hexo と Netlify で404 File Not Found ページを表示する

Hexo で存在しないページにアクセスすると、Cannot GET /dummy/ 書かれた簡易ページが表示されるが、Netlify でちゃんとした 404 ページを表示する方法を調べてみた。

404ページを生成する

ブログ記事ではなく、固定ページとして 404 ページを作成する。

1
$ hexo new page 404

中身は、こんな感じ。

1
2
3
4
5
6
7
---
title: ページが見つかりません
meta: false
actions: false
comments: false
---
![404 NOT FOUND](/404/index/404_page_not_found.png)

404ページを登録する

Netlify の場合

  • Netlify では、404エラーが発生するとルートディレクトリー内の 404.html ファイルが表示される。

  • ドキュメントルートにリダイレクトのルールを記述した _redirects ファイルを設置すると、アクセスをリダイレクトする。

そこで、source ディレクトリーに _redirects ファイルを作成し、以下を記述する。

1
2
# 404 Redirects
/*  /404/  404

このままだと、 hexo generate コマンドを実行しても _redirect ファイルが public ディレクトリーに移動しないので、_config.yml 内の以下の設定を変更する。

1
2
include:
  - _redirects

これで、hexo generate コマンド実行時に、source ディレクトリー内の _redirects ファイルが public ディレクトリーに移動される。