Hexoで作成したウェブサイトのページで404エラーが出たときの対処法

当サイトはHexoを使って作成しているのですが、ウェブサイトの構成やカテゴリー・タグの編集、ページ名の修正等をしていると404エラーに遭遇するケースがありました。 そこでこの記事では、私のケースにおける404エラーが出た際の対処法について備忘録的にまとめていきます。

環境

  • Hexo: 4.2.1
  • hexo-deployer-git: 2.1.0
  • GitHub Pages (Host)

404エラーが出た原因

私の場合は、ローカルで作業をした後hexo-deployer-gitモジュールを使ってGitHubへとアップロードする運用にしています。 ここでお気づきの方はいるかもしれませんが、404エラーはGitがデフォルトでは大文字・小文字を区別しないことに起因していました。

私の場合は例えば、

  1. 初めにContactというページを作成
  2. 後にcontactとディレクトリ名を変更(これでデプロイすると404エラーになる)

というような感じです(他にはCategories/カテゴリーについても同様の原因でありました)。

以降ではhexo-deployer-gitがどのようにGit管理をしているかについて簡単に触れつつ、上記の例についての対処法について記載していきます。

対処法

まず初めに全体の流れについてまとめておきます。

1
2
3
4
5
6
7
8
9
10
11
12
cd .deploy_git/
git config core.ignorecase false

# もしContact, contactが共存してしまっている場合===
git rm -rf Contact
git commit -m "delete Contact"
git push
# ====

cd ../
hexo clean
hexo deploy -g

以上がざっとした流れになります。

どういうケースかによって微妙に操作が異なってくるかと思いますが、基本的な流れをこれで把握しておけば対処できるかと思います。 それではそれぞれの操作の意味について解説していきます。

hexo-deployer-gitについて

hexo-deployer-gitは一体どこでGit管理をしているのかというと、Hexoのホームディレクトリ直下の.deploy_git/ディレクトリがそれにあたります。 GitHubに上がるファイルも全てここに存在していますので、ここで適切な対処をすればデプロイしたウェブサイトにも修正を反映させることができます

もちろん.deploy_git/Git管理されているので、gitコマンド以外でのファイルの変更・修正をするとバグりますのでご注意ください。

Gitの大文字・小文字区別について

Gitはデフォルトでは大文字・小文字の区別をしません。 ですのでそれを意識せずにURLの大文字・小文字を修正してしまうと404エラー(File Not Found)に繋がることになります。

このような事態を防ぐために、Gitで大文字・小文字を区別するように設定を以下の通り変更します。

git config core.ignorecase false

この設定しておけば今後、大文字・小文字を区別してGit管理してくれるようになります。 ですが、今までやってしまったことに関してはマニュアルで修正していく必要があるのでそれをやってしまいましょう。

Git管理から外したい・消したいファイル

以上までの設定を終えていれば、今後はGit起因の404エラーには遭遇しにくくなると思います。 なのでこれ以前までの負の産物をGitコマンドを使ってきれいに精算してしまいましょう。

git rm -rf Contact
git commit -m "delete Contact"
git push

デプロイ

ここまでやれば、後は一度Hexoで生成してたものをきれいにしてデプロイしなおせば終わりです。

cd ../
hexo clean
hexo deploy -g

終わりに

以上が私のケースにおけるHexoでの404エラーの対処法になります。 今回はページについての対処法を例に挙げて解説しましたが、他に私が遭遇したものとしてはCategoriesの大文字・小文字の変更でも同様の404エラーが起きていて同じように対処しました。

日本でHexoユーザーがどれくらいいるのかはわかりませんが、もし同じようなエラーに遭遇した人の助けになればと思いまとめておきました。

それでは。