ホーム > Web site / サイト作成

HexoでWordPressを置き換えてみる

数年前からWordPressをやめて静的サイトに移行するという動きが出てきているようです。

なのでウチのWordPressサイトもHexoという静的サイトジェネレータを使って作り直してみます。

静的サイトジェネレータHexoのテーマを作る

Hexoには残念ながらAMP対応のテーマが少ない。元のサイトはAMP対応のWordPressテーマを適用しているので、置き換え後もAMPサイトにしたいのです。

ないなら作ろう。

Hexoをインストールしたときにデフォルトで入るlandscapeというテーマを改造します。

Hexoインストールディレクトリを~/myblog、テーマディレクトリをmythemeとすると、以下ファイルをいじることになります。

場所 ファイル 内容
~/myblog _config.yml サイトの設定ファイル
~/myblog/themes/mytheme _config.yml テーマの設定ファイル
~/myblog/themes/mytheme/layout layout.ejs doctypeとhtmlブロック
~/myblog/themes/mytheme/layout/_partial head.ejs headブロック
~/myblog/themes/mytheme/layout/_partial header.ejs body内のheaderブロック
~/myblog/themes/mytheme/layout/_partial sidebar.ejs ウィジェットなどを置くサイドバーブロック
~/myblog/themes/mytheme/layout/_partial footer.ejs body内のfooterブロック

サイドバーの中身は~/myblog/themes/mytheme/layout/_widgetディレクトリ中のファイルを参照しているのだけれど、今回は直接sidebar.ejsに書き込んでしまうことにします。

トップページやカテゴリページ、アーカイブページなどのインデックスページはWordPressのページを使います。Hexoはブログタイプの静的サイトジェネレータですが、これの個別投稿機能だけを使う感じです。

これは一気にサイト置き換えするのは大変なので、新規ページから少しづつ静的サイトに置き換えていって、古い記事はアップデートと統廃合をしながら徐々に切り替えてゆくためです。

Bulmaでデザインする

サイトデザインにはBulmaというCSSフレームワークを使います。今までどおりBootStrapを使うことも考えたのですが、レイアウトにflexboxを使っているBulmaを試してみました。

クラス名などは当然違うものの、グリッドレイアウトの考え方は基本的に同じです。

AMPのガイドラインに従ったテンプレートを元にサイドバーに表示するブロックを足してゆきます。モバイル表示のときはメインコンテンツの下に表示され、PC表示のときは2カラムになるようにグリッドを組みます。

これにBulmaのパーツを適用してWordPressサイトのデザインに近づけてゆきます。

モックアップを分割する

ある程度出来上がったところでモックアップのコードをHexoの各ファイルに分割してゆきます。手がつけやすいのはhead.ejsとかfooter.ejsですね。

Javascriptは大昔に少しいじったきりで忘れちゃったしEJSもよくわからんのですが、<% 〜 %>ブロックがコード部分っていうのはphpの<?php 〜 ?>みたいなもんだし、ifやらforやらはだいたいどの言語でも同じ感じ。

<%- 〜 %>ブロックは何らかの関数(?)の実行結果と置き換わるようで、<%- partial(‘〜’) %>は分割されたejsファイルを読み込むらしい。

<%= 〜 %>ブロックはコード内変数に置き換わるようで、~/blog/_config.yml内に定義された変数はconfig.で、~/blog/themes/mytheme/_config.yml内に定義された変数はtheme.で、各記事のfront-matter内に定義された変数はpost.でそれぞれ修飾して取り出せばよさそう。

この辺がわかれば何となくいける。

こんな仕上がり。だいたい良くない?