Jekyll+Netlifyで404ページが表示されない
Jekyll
JekyllはRubyベースで動く、静的サイトジェネレータ。
Netlify
Netlifyは静的サイトホスティングなどのサービスを提供する。
Gitレポジトリとの連携が容易で、例えばプレイベートレポジトリのファイルを基に自動でビルドしてくれる。
CMSの機能や、DNSのサービスもあり、今話題のJAMstackベースのウェブサービスの先頭を走るサービス。
表示された404ページ
Netlifyでサイトが表示できるようになって、404エラーの動作確認をしたところ、以下のようなNetlify独自の404ページが表示された。
今回は、テーマファイルを全てダウンロードしてサイトを作ったので、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.html
buildの際に404ページは/404/index.html
として生成されるようです。
なので、どの環境でホストするにしても404.html
または404.md
には、Front Matterにpermalink: /404.html
と書いておくのが良いということだと思います。
jekyll new
で生成されるJekyllサイトのデフォルトテーマであるminimaでもpermalink: /404.html
が書いてありました。
人気の記事
EX予約は途中駅からでも乗車可能!ただし発券が必要!
2617 views | Jan 27, 2020
Googleフォームの回答が消えた。削除した質問の回答を復元する方法
597 views | Dec 16, 2019
Chromeでパスワードを常に保存しないにしてしまった後に保存するようにする方法
251 views | Oct 1, 2020
Wordで画像が荒くなる。Word for Macで挿入した画像が圧縮されないようにする方法
196 views | May 18, 2021
Googleフォームの回答の保存先はどこ?回答を削除しないために
177 views | Dec 16, 2019
学生でスーパーフライヤーズゴールドカードを取得することができました【ANA SFC】
137 views | Jan 23, 2020
【利用再開方法・10.18.0】Payパスワードが設定されていないため〜と表示されてLINE Payが利用できない【LINE Pay】
104 views | Nov 17, 2020
SidecarでWiFiが遅くなる。有線接続には「信頼する」必要があった
97 views | May 21, 2020
最近の記事
Tag
#4K (2) #adobe (1) #AirPods (1) #Apple (10) #BigSur (1) #CORSAIR (1) #Display (2) #EX予約 (1) #Gmail (1) #GoodNotes (2) #GoodNotes4 (1) #GoodNotes5 (1) #Google (5) #GoogleCalender (1) #GoogleChrome (2) #googleform (2) #GoogleTasks (1) #headset (1) #iCloud (1) #iOS (3) #iPad (4) #iPadPro (1) #iPhone (2) #Jekyll (2) #KEIAN (1) #LINE (1) #LINEPay (1) #Mac (4) #Microsoft (2) #Netlify (1) #PowerToys (1) #PWA (1) #sfc (3) #Sidecar (1) #VIRTUOSO (1) #Windows10 (1) #Word (1)