続・WordPressをwgetとNetlifyでお手軽に静的サイト化する話

前回の記事では、もう更新する気のないブログを放置するという方針でWordPressの静的化しました。まだ読んでいない場合は一読お願いします。今回は更新する気バリバリ、いまご覧になっているこのサイトを静的化していきます。静的化する理由は、前回静的化して楽しかったからなのですが、WordPressを静的化することにより、ページ表示の高速化はもちろん、管理画面など動的部分と切り離すことができるので、不正アクセスなどの対策にもなります。

この記事では、静的化元のWordPressの準備からNetlifyへのデプロイまでを書いていこうと思います。この記事に書いてあることを実行することで、このサイトと同じような状況にできると思います。今回は、WordPress静的化の作業をメインに書いていこうと思いますので、Webサーバの設定方法やDNSの設定など直接関係のない部分の説明は省きますのでご了承ください。

オリジンを作成

まずはNetlifyで使用する公開用のドメインとは別に、WordPressにより動的にページを生成して静的化の元にするオリジン用のドメインを準備します。本記事では、本サイトで作業することをイメージし、公開用のドメインを「koneta.click」、オリジン用のドメインを仮に「origin.koneta.click」として書いていこうと思います。今回はサブドメインを使いますが、別のドメインを用意していただいても問題ありません。

オリジン用のドメイン(とWebサーバ)の準備ができましたら、次はWordPressの設定です。とはいえ、特別な設定は不要なので、オリジン用に準備したドメイン(本記事ではorigin.koneta.clickの方)でいつも通りWordPressの初期設定を進めてください。初期設定が終わったら、その後もいつも通りでテーマの設定や必要なプラグインのインストールなど、サイトオープンに必要な作業を行い下準備は完了です。

動的必須部分の対応

今回はサイトを静的化してしまうため、動的で動作する部分は停止しなくてはいけません。これは使用しているテーマやプラグインによるところが多いと思いますが、本記事では多くのサイトで使われているであろう項目を挙げて停止していただきたいと思います。

まずはコメント機能です。コメントの無効化は簡単で、WordPressの設定画面から記事編集時のコメント有効の設定をデフォルトで無効にできるため、こちらを修正するだけで無効になります。合わせてウィジェットなどに新規コメントなどを表示している場合は、そちらも削除すれば完了です。

本サイトでは、コメント機能は残しておきたかったので、WordPressのコメント機能とは別のDisqusというサービスを使用することで、静的化後もコメント機能を利用できるようにしています。こちらの作業については後ほど紹介します。

検索

次は検索機能です。こちらも対応は簡単でウィジェットに表示されている検索ウィンドウを表示しないようにすれば完了です。しかし、もしテーマに検索機能が組み込まれている場合は、そちらも対応が必要になりますのでご注意ください。

検索機能はGoogleカスタム検索などを活用することで、静的化後も利用することができますが、私の経験上ではサイト内の検索機能はほとんど使われず、カテゴリやタグでの絞り込みは静的化後も使えるため、本記事では検索機能はなかったモノとして進めていきます。

更新情報サービス/ディスカッション設定など

次は投稿した際に使われる通知系です。今回はオリジン側で投稿機能を残すため、投稿時の処理は動作はするのですが、ここで通知されるのはオリジンのURLで送られてしまうため、効果はなくなってしまっています。そんなわけで、こちらも動かないようにしていいと思います。

設定方法は管理画面設定の「投稿設定」から「更新情報サービス」の項目を削除して保存、また「ディスカッション設定」から「デフォルトの投稿設定」の各種設定をOFFにすれば完了です。

その他の動的部分

先ほど書きました通り、WordPressにおいて動的部分は使用しているテーマやプラグインによってもだいぶ異なります。本サイトで使用しているテーマやプラグインは最低限の機能しかないもののため、上記の項目程度でしたが、高機能なテーマなどを使用して、何もかも動的で生成するしているような場合は、最悪の場合諦めるのも手かもしれません。

静的化する

ここまでできましたら、準備は完了です。いよいよ静的化を行います。静的化は前回の記事と同じようにwgetコマンドを使用し、コマンドのに使用している各種オプションについての説明なども書いてあるのでコマンドは前回記事を参照してください。

WordPressをwgetとNetlifyでお手軽に静的サイト化する話

WordPressで動ているサイトからプラグイン不要で静的ファイルを生成し、それをNetlifyに設置することで高速安心な静的サイトを構築していきたいと思います。

これで静的化は完了です。あとはNetlifyで公開するだけなのですが、その手順も前回書いたので今回は省略させていただきます。公開するときのドメインは、オリジンのドメインとは違う公開用の方のドメインで設定してください。

プラスアルファ作業

今回の静的化はwgetにより、画像など静的コンテンツやリンクはローカルだけで解決できるように自動で書き換えられていますが、meta情報などリンク以外のアドレスは変換されません。そうなるとmeta情報は公開しているドメインとは変わってしまいますし、オリジンのドメインがもろバレなので、セキュリティ面でも意味がなくなってしまいます。そこで、プラスアルファ作業として、これらを解消していこうと思います。また先ほど書いた通りコメント機能も使えるようにしてみようと思います。

オリジンを隠す

まずは静的化したファイルから管理画面を含むオリジンのドメインを公開用のドメインに変更しようと思います。変更の方法は何でも大丈夫ですが、私は以下のコマンドを使って一括で変更しようと思います。

# 隠蔽単語を置換
find $WORK_DIR$ORIGIN_DOMAIN -type f | xargs sed -i -e "s|$ORIGIN_DOMAIN|$SITE_DOMAIN|g"

コマンドは上記の通りです。これを静的化したファイルのルート部分で実行することでオリジンドメインと公開用ドメインを置換することができます (後ほど本記事で使用するコマンドをまとめますので、今は無視で大丈夫です)。

あとは、オリジンの方にアクセス制限を行います。こちらは念のための設定ですが、無駄にアクセスされないためにも設定しておいて損はないと思います。アクセス制限の方法はいくつかありますが、今回は簡単にBASIC認証でやってみました。おまけで後ほど出てくるコマンドもBASIC認証に対応させみました。

コメントフォームを追加

次はコメント機能を直していこうと思います。今回は「静的サイトコメント」で出てきたDisqusというコメントサービスを使ってみます。

Disqus – The #1 way to build your audience

Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.

テーマによって導入手順が異なるため詳細な説明は省かせていただきますが、WordPressのプラグインで導入するのではなく、HTMLタグで導入します。「Install Disqus」を押すと「WordPress」の選択肢がありますが、こちらではなく、手動で登録するため、ページ下部にある「I don’t see my platform listed, install manually with Universal Code」からコメントフォームを表示するHTMLタグを取得できます。

このタグで使用しているテーマのコメント表示部分(おそらくcomments.phpの中)の<?php if (comments_open()) : ?>~~~<?php endif; ?>内を書き換えてあげるだけでコメントフォームを設置することができます。

<?php do_action('bp_before_commentpost'); ?>

<div id="commentpost">

<?php if (comments_open()) : ?>
    [取得したHTMLタグ]
<?php endif; ?>

</div>
<?php do_action('bp_after_commentpost'); ?>

完成イメージは上記の通りです。これでコメントフォームが表示されれば完了です。

自動でコミットするようにする

今のままでは、記事などを更新した後は手動で静的化を行い、NetlifyでのデプロイをするためGitに変更を登録する作業が必要になります。しかし、それは限りなくめんどくさいので…最後に、Netlifyへのデプロイを自動化してみようと思います。NetlifyではGitの指定リポジトリの指定ブランチコミットされた内容を自動的にデプロイしてくれるため、ここでは静的化とオリジンドメインの隠蔽、コミットまでを行う処理を自動で動くようにしてみます。

#!/usr/bin/sh

##### 設定 ##### ##### ##### ##### ##### ##### ##### #####

# サイト情報
SITE_DOMAIN="koneta.click(要修正)"          # 公開用URL
ORIGIN_DOMAIN="origin.koneta.click(要修正)" # オリジンURL

# 作業ディレクトリ
WORK_DIR="/var/path/to/wordpress/(要修正)"

# BASIC認証
BASIC_USERNAME="basic_username(要修正)"
BASIC_PASSWORD="basic_password(要修正)"

##### ##### ##### ##### ##### ##### ##### ##### ##### #####

SITE_URL="https://$ORIGIN_DOMAIN"

cd $WORK_DIR
rm -dfR $WORK_DIR$ORIGIN_DOMAIN

# サイトを静的HTML変換
wget --mirror \
     --no-parent \
     --page-requisites \
     --convert-links \
     --adjust-extension \
     --restrict-file-names=windows \
     --no-verbose \
     --http-user=$BASIC_USERNAME \
     --http-passwd=$BASIC_PASSWORD \
     $SITE_URL

# 隠蔽単語を置換
find $WORK_DIR$ORIGIN_DOMAIN -type f | xargs sed -i -e "s|$ORIGIN_DOMAIN|$SITE_DOMAIN|g"

# 現座時刻を作成
now_date=`date +'%Y/%m/%d %H:%M:%S'`

# 変更内容をコミット
git pull
git add -A
git commit -m "[modify] ブログ更新更新 $now_date"
git push origin master

実際のコマンドは上記のようになるのです。この「(要修正)」部分をご自身の環境に合わせて修正後、cronなどで定期実行されるようにすることであとは放置しているだけで更新の変更箇所がNetlifyに反映されます。これにて作業は押しましです。あとはサイトの更新をするだけです！

終わりに

ここまで長い記事を書いたのは初めてです。技術系記事はほとんど自分用の備忘録で書いていますが、果たしてこの記事が役立つことはあるのか…でも静的化は楽しかったので良しとします。最近は静的サイトジェネレータでのサイト作りが増えていて、WordPressは重い遅い脆弱と散々に言われていますが、個人的には使い慣れていることもありまだまだ使っていきたいと思います！