前の記事では、自分のパソコン内にローカルWordPressを構築し、記事を書いたりサイトのデザインを整えたりできる環境を作りました。
次のステップは、作成したWordPressサイトを静的ファイルとして出力する「静的化」です。
ここでは、WordPressを静的化する仕組みを簡単に説明したうえで、実際に静的化したサイトを自分のパソコン上で確認できるところまで進めます。
WordPressを静的化するとは
普段見ているブログの記事ページは、一見すると1枚の完成した書類のように見えます。
しかし通常のWordPressでは、その完成したページがあらかじめ用意されているわけではありません。
誰かがページにアクセスするたびに、記事の内容や画面構成のルールなどをもとに、その場でページを組み立てて表示しています。
それに対して静的化では、あらかじめ完成したページをファイルとして作っておき、アクセスされたときにはその完成済みのファイルをそのまま表示します。
つまり、
- 通常のWordPress：アクセスされるたびにページを作る
- 静的化したサイト：あらかじめ作っておいたページを表示する
という違いです。
※実際の仕組みはもう少し複雑ですが、ここでは分かりやすさを優先して単純化しています。
あらかじめ作ったファイルを表示するだけなので、公開側で行う処理が少なくなり、ページを高速に表示しやすくなります。
また、公開サイトにWordPressの管理画面などを置かずに済むため、外部からの攻撃リスクを減らせることも大きなメリットです。
WordPress静的化の全体像
静的化の流れは、大きく分けると次のようになります。
WordPressから静的ファイルを作る
まず、ローカルWordPressで作成したサイトから、公開用のファイル一式を作ります。
静的化には専用のWordPressプラグインを利用できます。
私は「Simply Static」を使用しています。
静的化したサイトを確認する
ファイルを作成できたら、実際に自分のパソコン上で静的化後のサイトを表示します。
トップページや記事、画像、リンクなどが正常に表示されれば、公開用のサイトデータが作成できたことになります。
生成AIに静的化の手順を教えてもらう
ここからの具体的な作業は、ローカルWordPressの構築と同じように生成AIに案内してもらいます。
前の記事から続けて作業する場合
生成AIがこれまでの作業内容を把握しているため、簡単な指示で構いません。
次に、このWordPressを静的化する手順を教えてください。あとは生成AIの案内に従い、提示された操作を実行して結果を返しながら進めます。
この記事から作業を始める場合
新しいチャットを使う場合や、すでにローカルWordPressを持っていて静的化から始める場合は、現在の状況と最終的な目的を伝えます。
※共通ルールについては こちらの記事 を参照してください。
現在、ローカル環境でWordPressを運用しています。
このWordPressを静的化し、最終的にはCloudflare Pagesへデプロイしてブログとして公開したいです。
まずは現在の環境を確認したうえで、WordPressを静的化できる状態まで作業を進めてください。
作業は、事前に伝えた共通ルールに従って進めてください。使用するプラグインや設定方法など、具体的な方法は生成AIに現在の環境を確認してもらったうえで判断してもらいます。
私の環境ではSimply Staticを使用していますが、重要なのは特定の方法に合わせることではなく、最終的にCloudflare Pagesへ公開できる静的ファイルを正しく作れることです。
静的化したサイトを自分のパソコンで確認する
静的化が完了したら、次は出力されたファイルを使って、実際にサイトを表示してみます。
WordPressのプレビュー画面ではなく、静的化によって作られた公開用のサイトそのものを確認するのがポイントです。
確認方法が分からない場合は、生成AIに次のように依頼します。
WordPressの静的化が完了しました。
出力された静的サイトを、自分のパソコン上で実際に表示して確認したいです。
現在の環境を確認し、適切な方法で表示できるようにしてください。ブラウザで表示できたら、トップページだけでなく、記事ページや画像、メニュー、内部リンクなどもいくつか確認してみましょう。
自分のパソコン内にWordPressとは別に、完成したブログサイトのファイル一式ができていることを実感できると思います。
まだインターネットには公開されていませんが、次のステップでCloudflare Pagesへ送れば、そのサイトをそのまま公開できる状態です。
静的化ファイルに関する注意点
Cloudflare Pagesへのアップロードにあたり、以下2点の制限に抵触していないかを確認しておきます。
- 静的ファイルの総数が20,000以下であること
画像が多い記事だと想像以上にファイル数が多くなっていることがあります。 - 1ファイルの容量が25 MiBを超えるものが含まれていないこと
動画を置いている場合は要チェックです。
WordPress静的化のチェックリスト
静的化とローカルでの表示確認が終わったら、作業漏れがないか確認します。
- WordPressから静的ファイルを出力できる
- 静的化処理が正常に完了する
- 出力された静的サイトを自分のパソコン上で表示できる
- トップページが正常に表示される
- 個別の記事ページが正常に表示される
- サイトのデザインが崩れていない
- 画像が正常に表示される
- メニューや内部リンクが正常に動作する
- 利用したい機能が静的化後も正常に使える
- ローカルWordPress専用のURLなどが公開用サイトに不要な形で残っていない
- 静的ファイルの総数が20,000以下
- 25 MiBを超えるファイルが含まれていない
このチェックリストは、自分で確認しても構いません。
生成AIにそのまま渡して、確認を依頼することもできます。
WordPressの静的化と、静的化後のサイトの表示確認まで完了しました。
以下のチェックリストをもとに、作業漏れや問題がないか確認してください。
[ここにチェックリストを貼り付ける]
必要に応じて現在の環境や静的化したファイルを確認し、問題があれば原因を確認してから対応方法を案内してください。すべて確認できれば、公開用の静的サイトを作成する環境は完成です。
静的化が完了したら
ここまでで、
WordPressでブログを作る → 公開用の静的ファイルを作る → 自分のパソコン上で確認する
という流れができました。
今後、記事を追加・修正するときは、WordPressで編集 → 再び静的化して公開用ファイルを更新 という手順が必要になります。
まずは記事を少し修正してもう一度静的化し、変更した内容が静的サイト側にも反映されることを確認してみると、実際の運用イメージをつかみやすくなります。
静的化すると使えない機能
良いことだらけのように見えるWordPressの静的化ですが、一部の機能が使えなくなる、という制約もあります。
代表的なものは次のとおりです。
- コメント機能
- サイト内検索
- お問い合わせフォーム
- 人気記事リストなど、アクセス状況に応じて内容が変わる機能
- ログイン、会員機能、ショッピングカート、決済機能など
ただし、これらの機能の多くには代替手段があります。
こうした静的サイトで使えない機能と、その代替手段については別の記事で詳しく紹介します。
まとめ
WordPressを静的化すると、普段の記事作成は使い慣れたWordPressで行いながら、公開するときには完成済みのファイルとしてサイトを配信できるようになります。
この段階で、ブログを書くためのWordPress環境と、公開用の静的サイトを作る仕組みまでが完成しました。
次のステップでは、作成した静的ファイルをCloudflare Pagesへデプロイし、実際にインターネット上へ公開していきます。