WordPressは優れたコンテンツ管理システム（CMS）です。WordPressを使えば、ほとんど何でも実現できます。その動的な性質から、ボタンをクリックするだけでどんなコンテンツでも変更することができます。これは素晴らしいことですが、多くの経路は、セキュリティ面での懸念となることがあります。

WordPressサイトを静的に変換し、そんな問題に対処することが可能です。

静的ウェブサイトとは

静的サイトを説明するためには、まず動的サイトの仕組みを理解する必要があります。

ウェブサイトにアクセスするたびに、サーバーがPHPファイルを解析し、データベースに照会してデータを取得し、最終的にレンダリングしたHTMLをブラウザに返します。

一方で静的ウェブサイトでは、最初にすべての処理が行われます。つまり、ウェブサイトへのアクセスが発生する前に、すべてのページが静的HTMLとして保存されます。そして、ユーザーが目的のページにアクセスすると、サーバーはそれをそのまま提供します。

静的サイトの長所

スピードとパフォーマンス

静的ウェブサイトは素早く、パフォーマンスが高いのが特徴です。というのも静的な「HTML」だからです。つまり、サーバーがしなければならないのはただひとつ、ウェブサイトを提供すること。解析したり、データベースからのデータを待ったりする必要がありません。

また、静的ウェブサイトは、CDN（エッジキャッシュも同様の働きをしますが）でホストするのが簡単で、すべてのファイルが可能な限り近くに配置されます。

全体として、静的ウェブサイトはトラフィックが多い状況でも素晴らしいパフォーマンスを発揮します。

セキュリティ

WordPressコアでは高い安全性が確保されています。しかし、プラグインやテーマは必ずしもそうではありません。また、ログイン名やパスワードの推測もされてしまうかもしれません。

簡単に言えば、WordPressは「たくさんのドアと窓がある家」のようなものです。実際にそれをどれだけ安全なものにするかは私たち次第ですが、それでも、ドアが1つでも十分安全でなければ、侵入者にとっての狙い目になってしまうかもしれません。

ウェブサイトを静的なものに変えることで、あらゆる攻撃を回避することができます。基本的にはHTMLだけという性質上、ハッカーは脆弱なプラグインを標的にしたり、安全性の低いパスワードにつけ込むことができなくなります。

安心

一般的なWordPressサイトは、PHPやデータベースサーバー、テーマ、プラグインなど多くの動的な部品で構成されており、その調整が乱れると全体が壊れてしまう可能性があります。一方で静的サイトでは、そのほとんどが介在しません。サーバーからHTMLのみが配信され、コンテンツはCDNを活用することで世界中に拡散され、DDoS攻撃に対する守りを固めることもできます。

その結果、故障が発生する確率は通常よりずっと小さくなります。

静的サイトへの変換の欠点

機能導入の手間

ウェブサイト内を検索したり、コメントを追加したり、フォームを送信したりといったことが、WordPressではすぐにできます。その機能性には多くの人が慣れていることでしょう。静的サイトでは、それほど単純ではありません。すべてをHTMLに変換することで、その柔軟性が削がれてしまいます。

この機能を取り戻すには、サードパーティのツールなどが必要になります。

ビルドという手間

「公開」ボタンを押したら新しいコンテンツがウェブサイト上で公開される─そんな処理が当たり前だと感じる人も少なくないはずです。静的サイトでは、サイト更新時に毎回、変換という作業がつきまといます。そのため、ボタンを押してからそれが、一般に閲覧可能な状態になるまで数分かかることがあります。

利用開始にあたっての準備

利用を始める前に、ちょっとした準備が必要になります。

1. Gitリポジトリを作る

この例ではGitHubを使っていますが、他のGitサービス（GitLabやBitBucketなど）を使ってもかまいません。アカウントを作成して（まだ持っていなければ）空のリポジトリを作成します。

これを行うことで、Kinstaに接続できるようになります。

リポジトリにファイルを追加する
リポジトリにファイルを追加する

2. 静的サイトホスティングでこのリポジトリを接続する

MyKinstaに行き、サイドバーから「静的サイト」を選択し、「サイトを追加」を選択します。

作成したリポジトリを選択し、「コミットに際し自動でデプロイ」を忘れずにクリックするようにしてください。

Kinsta静的サイトホスティングのセットアップ
Kinsta静的サイトホスティングのセットアップ

WordPressサイトを静的サイトに変換する

WordPressサイトを静的サイトに変換するには、いくつかの方法があります。この記事では、そのうちの2つについてご説明します。

  1. WPプラグインとGitを使う
  2. WP-CLI、CI/CD、Gitを使う

プラグインとGitを使う

要件

ステップ

  1. ブラウザでサイトを開き、Simply Staticプラグインをインストールします。
  2. 「Simply Static」＞「Settings」＞「Deployment」に移動し、デプロイメント方法を「Local directory」に設定し、ローカルフォルダを設定します。例えば、「/www/kinstaapi_533/public/public_static」など、プレースホルダーが示すヒントに従うことができます。プラグインがこのフォルダを作成してくれるわけではないことにはご注意ください。
  1. 「Generate Static Files」ボタンを押します。

数分待てば、すべての静的ファイルが前のステップで指定したフォルダに入ります。

コードをGitリポジトリにプッシュする

  1. GitHubにリポジトリを作成します。
  2. ターミナルかPowershellを開き、静的ファイルのあるフォルダに移動して次を実行します。
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

このコマンドにより、リポジトリとの接続、そしてすべての静的ファイルのGitHubへのプッシュが行われます。変更内容をプッシュすると、このリポジトリとKinstaの静的サイトホスティングがすでに接続されているため、自動デプロイがトリガーされます。

WordPressサイトで何か変更を加えた後には、次のコードを実行してください。

git add .
git commit -m "static content"
git push --force -u origin main

Simply StaticのProバージョンでは、ビルドプロセスを自動化するGitHubアドオンが利用できます。しかし、場合によってはこれを手動で行うことで十分かもしれません。

WP-CLI、CI/CD、Gitを使う

こちらの方法は、先ほどと同じWPプラグインを使いますが、有料であり、Buddy CIのCI/CDパイプラインを使ってコードをGitHubリポジトリにプッシュします。

この方法はセットアップがより複雑ですが、デプロイ時の作業が少なくて済みます。また、各ステップをコントロールできるので、より拡張性があります。パイプラインにアクションを追加することもできます。

要件

  • Simply Static Pro（ProバージョンだけがWP-CLIの統合に対応しています）
  • あなたのウェブサイトは一般にアクセス可能でなければならず（そのためローカルホストにはできません）、サーバーにはSSHアクセスとWP-CLIがインストールされている必要がある─Kinsta WordPressホスティングはこの目的に合致
  • サイトのコードベースがGitHubリポジトリにホストされている
  • すべてをオーケストレーションするCI/CDツール─この例では、使いやすさとシンプルさからBuddyを使用（GitHub ActionsやGitLab CI/CDなど、他のツールを使うこともできます）

ステップ

  1. ブラウザでWPサイトを開き、Simply Static Proプラグインをインストールします。
  2. 「Simply Static」＞「Settings」＞「Deployment」に移動し、デプロイメント方法を「Local directory」に設定し、パスを指定します（プレースホルダーが示すヒントに従ってください）。
  3. プラグインがこのフォルダを作成してくれるわけではありませんのでご注意ください。
  4. GitHubリポジトリにアクセスし、リポジトリにアクセスするためのアクセストークンをwrite権限で作成します。これは後ですぐに必要になります。
  5. Buddyのアカウントにログインして、新しいプロジェクトを追加し、リポジトリと接続します。

Buddyで以下のようなパイプラインを作成しましょう。

  1. SSH経由でSimply StaticにWP-CLIコマンドを実行
  2. すべてをZipとして圧縮
  3. Buddyのファイルシステムにダウンロード
  4. すべてを解凍
  5. すべてをGitリポジトリにプッシュ
提案されたBuddyのワークフロー
提案されたBuddyのワークフロー
  1. まず「SSH command」というアクションを追加
  2. 「Run CMDs」タブで以下を実行
wp simply-static run
cd public_static
zip -FSr ../static.zip .

このスクリプトによってウェブサイトが静的なものに変換され、zip圧縮が実行されます。

  1. 「Target」タブで、すべての認証情報を入力し（MyKinstaで見つかります）、作業ディレクトリを「public」に設定します。
Targetのセットアップ
Targetのセットアップ
  1. 次に「Local Shell」アクションを追加し、その中で以下を実行します。
rm -rf *

このコマンドにより、不要なファイルが存在しないように徹底できます。

  1. サーバーからzipファイルをダウンロードするには、新しいアクションを追加し（アクションの一覧で「+」をクリック）、一覧から「SFTP Download」を選択します。認証情報とは別に、zipファイルのパスを渡して、上書きオプションにチェックを入れてください。
Buddyのダウンロードアクションのセットアップ
Buddyのダウンロードアクションのセットアップ
  1. すべてのファイルを解凍する「Local Shell」アクションを追加し、zipファイルを削除（不要であるため）します。以下を実行してください。
unzip -o static.zip
rm static.zip
  1. 「Ubuntu」タブを開き、「Packages & Tools」で「unzip」を選択します。これを行うには以下を実行してください。
apt-get update && apt-get install -y unzip
  1. 最後のステップでは、「Git Push」アクションを使います。最初のステップで設定したGitHubアクセストークンとそのパスワードを利用します。また、「Force Push」と「Push revision to the specific branch」に忘れずにチェックを入れるようにしましょう。
BuddyのPushアクションの設定
BuddyのPushアクションの設定

ウェブサイトを再デプロイしたいときには、Buddyの「Run」ボタンを押せばOKです。このプロセスを自動化するには、WordPress用プラグインが利用できます。

提案されたBuddyのワークフロー
提案されたBuddyのワークフロー

Buddyのドキュメントでは、ワークフローを自動化する方法がさらに紹介されています。

WPを静的サイトに変換するその他の方法

静的サイトジェネレーター

APIを使って、多くの静的サイトジェネレーターをCMSと接続することができます（WordPressにはREST APIが組み込まれており、プラグイン経由でGraphQLを利用可能です）。Astro、Eleventy、その他を使うことができます。

高い柔軟性を誇りますが、上記の方法よりも多くの作業を必要とします。

まとめ

WordPressサイトを静的サイトに変換するのは優れたアイデアでしょうか。その答えは、状況次第です。いくつもの要素を考慮しなければなりません。確かに、賢い選択肢です。前述したように、静的ウェブサイトには多くの長所があり、それをフル活用しないのは実にもったいないものです。

Maciek Palmowski

Kinstaの開発アドボケートアナリスト、ウェブ開発者。仕事以外の時間は、コードを書いたり、ニュースレター向けの有益情報を探したり、コーヒーを飲んだりして過ごしている。