ワードプレスから静的ページに移行！

自営業の私は、いつも勉強姿勢。自分でAWSのアカウントを持ち、EC2マシンを立ち上げ、自分でDBサーバーやウェブサーバーを設定して、さらにワードプレスを使いこなしてブログ書く、という面倒なことをしています。みな自分の勉強のためと思って（実際は非常にケチ）。しかし、このワードプレス、とにかく攻撃がひどい！ついこの間までは１週間に必ず１度はすべてのサービスを落として再スタートしなければ、CPUがほとんど100%近い状態。このサイトに来てくれる人に申し訳ない。ということでワードプレスから脱却して静的ページに移行しました。さて、どう移行したか？　ヒント：実はまだ裏ではワードプレスを使っています。

ヘッドレスワードプレス

なんかマジックのようなこと書きましたが、なんのことはない同じワードプレスを違うサイトに移動して、それを作業サイトとしてそこで今までのようにブログを書いて、プラグインを使って、そこから本サイトのために静的ページを生成します。静的ページはプログラムでないから、攻撃されてもなにも影響なく、しかもPHPとかDBとかのお世話にならないので非常に軽いのです。おかげさまでここ何週間とCPUは50%を超えることなく快適です。

しかし、記事のタグとかカテゴリとかのページもすべて静的ページとなるから、生成後の総ファイル数は1600以上にもなりました。生成にかかる時間は11分くらいです。ちなみにEC2のt3.smallのマシンを使用しています。

もちろん、すべての人向けというわけではないですが、興味のあるお方のためにこれを可能にした素晴らしいプラグインをSimple Staticを紹介します。でもそのための準備やらなんやで結構いろいろ過程があります。もちろん、これらはこのブログの読者であるあなただからできることです（忠告）。

静的ページへの道

プラグインのことをどこかで読み、試行錯誤で始めた私はつっかえたところたくさんありました。その経験を生かして、まず移行作業のプランをします。動的ワードプレスサイトから静的ページサイトへの変換のステップとして以下あります。

作業ワードプレスサイトを構築
Simple Staticのプラグインを設定
Simple Staticで静的ページを生成
使えなくなった機能を補う

作業ワードプレスサイトを構築

作業ワードプレスサイトは、基本的に現ワードプレスサイトのコピーサイトです。しかし、ワードプレスは同じドメインでも記事のリンクや画像のリンクをドメイン入りURLでDBにばんばんと収納するので、単にサイトのファイルとデータをコピーで終わりとはなりません。それらを作業サイトのホスト名への変更も必要です。ということで、以下のような処理が必要となります。

ワードプレスの作業サイトを用意する。作業サイトのホスト名は、例えば、現在サイトがwww.example.comなら、icecream.example.comとかわからない名前にすること勧めます。作業サイトが攻撃されたら意味ないです。もちろん、Lets Encryptでセキュア認証も取得して、ウェブサーバーの設定も必要です。ここではすべて説明しません。
ワードプレスが使用しているDBのデータをmysqldumpでエクスポートしてファイルに落とす。一応これがバックアップにもなります。
作業サイトが使用する新規のDBを作成して、先のデータをインポートする。

DBのデータを作業サイトのドメインに変換する。以下mysqlのコマンドラインで実行します。

UPDATE wp_options SET option_value = replace(option_value, 'www.example.com', 'icecream.example.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'www.example.com','icecream.example.com');
UPDATE wp_posts SET post_content = replace(post_content, 'www.example.com', 'icecream.example.com');

既存のワードプレスのファイルをすべて作業サイトの新規のディレクトリにコピーする。rsyncあるいはtarを使うかな。
作業サイトにアクセスしてみる。ここで問題なくアクセスできればハッピーですが、使用しているプラグインで問題になるかもしれません。私の場合はGoogle Site KitやW3 Total Cacheを使っていてそれらを無効化にする必要ありました。ここの対応はケースバイケースです。

Simple Staticのプラグインを設定

作業サイトが構築されたところで、次は本サイトの静的ページ生成のためのプラグインのインストールです。作業サイトのワードプレスの管理画面で、以下のように、プラグインを検索してインストールします。

上の画面でのインストール後には、「有効化」ボタンが出るのでそれもクリックします。

次は、以下のようにプラグインで静的ページの生成かの診断を実行します。

ここで１つでも赤字のエラーがあるなら、解決する必要あります。同画面の一番下に診断のデバッグログの生成のチェックボックスあるので活用してみてください。

次は設定です。ここではデフォルトの配送方法はzipとなっています。新作業サイト現サイトと同じマシンに物理的に存在するので、以下のようにローカルディレクトリを選択し、そのパスを入力します。そして「変更を保存」します。もちろん、現サイトのディレクトリにはワードプレスのファイルがあるので、最初は違うディレクトリとして生成後にディレクトリをスワップした方がよいです。

Simple Staticで静的ページを生成

さて、いよいよ静的ページの生成です。以下の画面で「静的ファイルを生成する」ボタンを押します。ボタンの下の「アクティビティログ」にメッセージが出てきてページ生成の開始をします。私のケースではなぜかいつもボタンを２回クリックしないとスタートしませんでした。

生成が完了したら、「ログのエクスポート」としていろいろなメッセージがリストされます。これが結構重要です。特にエラーとなる、
3xxや4xxや5xxの部分です。

私の場合は、3xxのリダイレクトのエラーに問題があり、生成されたホームページがおかしくなり表示できない問題ありました。上のログには問題のページのメモが記されているのでそれを手がかりに解決する必要あります。もちろん解決したら再度「静的ファイルを生成する」必要あります。

使えなくなった機能を補う

さて、上の作業をすべて完了して成功して問題なければハッピーですが、そうは問屋です。静的ページに変換することにより使えなくなった機能があります。私のケースでは、以下の解決すべき問題ありました。まだ解決できてないものもあります。

プラグインのGoogle Site Kitは現サイトでは、Google Analyticsのスクリプトを自動的に埋め込んでくれます。しかし作業サイトは本サイトと違うドメインであり、Google Site Kitでは違うドメインを対応することできません。それゆえに手動で「外観」のテーマに埋め込みました。
以前は、お問い合わせの画面では、Contact Form 7を使用していました。しかしそれはPHPのプログラムのゆえに静的ページでは使えなく、mailtoを使用することにしました。Simple Static Proを買えば、どうかしてContact Form 7が使えるようですが、有料なゆえに足踏み。
以前はテーマの機能として検索機能がありました。DB内のデータ検索です。しかし、静的ページゆえにそれを使うことはできません。現在は本サイトには検索機能はありません。不便です。Algoliaを使うことを考えているので、完成したら説明のブログ書く予定です。

メルマガ購読の申し込みはこちらから。