StaticPressで静的サイトデータを作ってみる

2016-11-20-16-28-10

Webコンテンツを今風に

これまでのWebコンテンツはiWebで製作していて、昨今のトレンドであるスマホなどからのモバイルアクセスには全くもって非対応でした。
iWebのデザイン自体は優秀で、PCやMacだととても綺麗な表示になるのですが、スマホではそのままスケールダウンしてしまい文字が小さすぎてまず読めません。
しかもiWebが吐き出すhtmlは、なぜか行ごとに文字のスタイル属性が指定されていたり、iPhoneで見た時リーダー表示ができたりできなかったり、リーダー表示できてもインライン画像が表示できなかったりなど、ページのソースとしてイマイチ感がありました。
更にここにきてGoogle様が、モバイルフレンドリーではないサイトはモバイル端末からの検索では結果に表示しないとのお触れを出してみたり、
モバイルファーストのインデックス登録とか宣われたりしています。
相当に偏った趣味の話ばかりなサイトですのでSEOがどうとかについては割とどうでも良かったりしますが、スマホで読みにくいのは改善したいですし、せっかくヲタクでピンポイントなキーワードでは検索結果上位にいたりもするので、この際ですのでiWebに代わるサイト構築に切り替えたいと思います。

もちろん、HTML5の時代に手書き(手打ち)で作るのは無理があり、何らかツールのお世話になりますのでツール選びのための要件を抽出します。

要件は
・無料で使えること
・操作が簡単なこと
・一つのページソースでモバイルフレンドリーとなるレスポンシブウェブデザインであること
・デザイン(みてくれ)の選択肢があり、入れ替えやある程度のカスタマイズが可能なこと
・サーバー上、静的なファイルで構成されていること
てな具合でしょうか。。

WordPressなどのCMSを使えば無料で簡単でRWDでデザインの選択肢もあるのはわかっていますが、サーバーでPHP、データベースを動かす必要があり、最後の「静的」という要件を満たせません。
自宅サーバーの運用で常に不正アクセスにビクビクしなければならないというのは避けたいところですので、CGIやPHP、データベースなど、サーバー側でコードを実行する環境は使いたくありません。
かといって、MacでフリーでモバイルフレンドリーでカッコいいWeb作成ツールという要件を満たすパッとしたものも見当たりません。
WordPressなどのCMSで作ったページを静的ページに変換できたらいいのに。。
と思って調べてたら、静的ファイルを吐き出すWordPressのプラグインがある事がわかり、実験したところうまくいきそうなので導入してみました。

ただし、そのまま使うといろいろ不具合もあり、StaticPress公式サイトには載っていない調整が必要だったり、MAMPの運用上の課題も分かりましたので、こちらも自身の備忘を兼ねて書き留めておきます。

MAMP(またはMac)が異常終了すると簡単にデータが飛ぶ
MAMPとWordPressの導入については情報も多くありますので特に問題はありませんでしたが、使っていくなかでMAMPを上げたままにしてた時に一度Macが落ちたことがあったのですが、MAMPが見事におかしくなりました。(MAMP上でサーバーの起動ができなくなりました。)
TimeMachineのバックアップから復元してもダメ。(MAMP上げっぱなしにしていたので起動中のスナップショットしかなかったようです)
その時はMAMPの入れ直しになったのですが、旧ブログの文章全部移し終わった後だっただけにショックが大きかった。。
MAMPは必要な時だけ起動して終了したらファイルをバックアップしておかないとおっかないです。
ちなみに私のMacが落ちるのはMAMPのせいではありませんが、MAMP自体もそんなに安定していないとも聞きますので、予防措置は必要と思います。

パーマリンクの設定が必要
これはStaticPressの注意点としてあちらこちらに情報が出ていますが、StaticPressの公式サイトには記述が見当たらない部分です。
WordPressはPHPで動くためブラウザのアクセス先は「〜.php」になりますが、StaticPressではhtmlを書き出しますので「〜.html」というファイルにする必要があり、WordPressのパーマリンク設定でファイル名が「〜.html」で終わるようにカスタム設定します。
私はブログの記事を「〜〜/年/月/記事番号.html」にしたかったので、
/%year%/%monthnum%/%post_id%.html
としました。

画像ファイルのあるブログページが表示できない
これもStaticPress公式サイトに記述が見当たりませんでした。
上記パーマリンクのカスタム設定があるおかげで画像ファイルがあると「〜.html」をフォルダ名として処理しちゃうことに起因する。というのはわかりましたが、具体的な対策方法を記述しているところが少なく難儀しました。
(不具合に近いような気がしますが、結構長いこと修正されていないところを見ると仕様なのかもしれません。。)
現状、こちらを参考にさせていただき、
staticpress/includes/class-static_press.phpにパッチを当てることで対処しています。
具体的には、
$permalink = get_permalink($post->ID);
if (is_wp_error($permalink))
continue;
$count = 1;
となっているところを、
$permalink = get_permalink($post->ID);
if (is_wp_error($permalink))
continue;
if (preg_match(‘/.*\.html\/.*/’, $permalink, $m)) {
continue;
}
$count = 1;
に変更しました。

これをベースにサイトを構築し直しました。

サイトの移行についてはまた別記事に書きたいと思います。