Hexoブログのカスタムホームページの作り方

背景

デフォルトの設定でHexoのブログを作っている場合、ホームページ(index)がすでに存在しています。かなり便利でありがたい機能ですが、カスタマイズしようとしたら、手数がやや掛ってしまいます。
具体的に言うと、テーマ内のindex.ejsファイルに記入されているコードはlayout.ejsの<%- body %>に入ります。すなわち、indexページのレイアウトはindex.ejsのほか、layoutフォルダ内のlayout.ejsにも左右されます。別に悪い仕様とは全然言えませんが、ホームページだけは通常のテンプレートに適用されたくないというユースケースもあるでしょう。
それを回避するために、HexoのGitHub上のIssueを調査したり、何回か試したりして、ようやく分かりましたので、ここで整理してみたいと思います。

手順

hexo-generator-indexというプラグインを削除します。自分でインデックスページを作るので、当然ながら自動生成の機能は不要になります。Hexoプロジェクトのルートディレクトリに行って、npm uninstall hexo-generator-indexを打てば問題ないはずです。
sourceフォルダーの中でindex.mdというファイルを作ります。こちらのファイルはエントリーポイントになります。
layout.ejs内に以下のような条件分岐を加えます。

<% if (page.source == 'index.md') { %>
  <span>こちらはホームページのテンプレート</span>
<% } else{ %>
  <span>こちらはその他のページのテンプレート</span>
<% } %>

背景

手順

参考リンク