自分のサイトを見直すと動的な部分はなく、プラグインは使っていない状態で運用しており、WordPressを使う必要は無いのではと思うようになりました。静的サイトジェネレーターに興味を持ち移行も考えたのですが、新たに覚える事が多すぎるので実行に移せませんでした。

それならば、WordPressを使って静的サイトを作成してみようと考えました。静的サイトなら無料で使えるCloudflare Pagesを使うことでホスティングサービスのコストを0にします。

WordPressを使って静的サイトを作る前提として、サイトの中に動的な部分が存在すると、今まで使っていた機能が失われます

例えば、吹き出しの表示はプラグインを使ってのHTML表示なので静的サイトとして書き出しても問題はありません。しかし、問い合わせ機能をプラグインで実装するような場合はボタンを押すことでPHPが動作するので動かなくなります。静的サイトとして成り立つかはSimply Staticプラグインを使ってローカル用に作成されたもので確認ができます。

静的サイトとして運営できるならデーターベースが不要なのでホスティング料金が安く抑えられます。特にCloudflare Pagesを使えば無料です。ドメインの更新料以外のコストをかけずにブログの運営ができます。

Localを使ってWordPressを動かす

今回の作業については大きな流れだけを書き残します。あまりいらっしゃらないと思いますが、同じことをされる方は、ご自分の環境に合わせた詳細を調べてください。ローカル環境でWordPressを動かすためにLocalを使います。Localのインストールについては下記の投稿で説明しています。

LocalによるWordPressローカル開発環境の構築と活用法

Localを使ったWordPressローカル環境の構築手順や初期設定、データ移行のポイントを詳しく解説。開発やテストを安全かつ効率的に進める方法を紹介します。ローカルIPの固定やデータベースURL修正、UpdraftPlus活用など、実践的なノウハウをまとめています。WordPress開発の参考にご活用ください。sumibi-blog.com

ホスティングサーバーからローカル環境へデータを移動させるにはUpdraftplusプラグインが便利です。データベースのバックアップのデータの内、サイトアドレスの２箇所を変更し、データの移転を行います。LocalのSite DomeinをインストールしたPCのローカルIPアドレスに変更するとスマートフォンからサイトのデザインの確認ができます。ただし、ルーターなどを使ってローカルIPは固定してください。

Simply Staticプラグインで静的サイトを出力

まずSimply Staticプラグインをローカル環境へインストールします。「Settings」>「General」を選択し「Replacing URLs」の項目で「Offline Usage」を選択します。プラグインを利用しxmlサイトマップを出力している場合は「Include」の項目の「Additional URLs」にサイトマップのurlを入力します（http://ローカルID/sitemap.xml）

404ページを表示させる場合は「Generate 404 Page?」に、各ページのfeedを出力する場合は「Include Feeds?」を有効にします。

「Deploy」>「Deployment Settings」から「Zip Archives」を選択します。

上の設定が終わると「Generate」ボタンを押します。サイトの大きさにもよりますが数分で処理が終わります。「Activity Log」を選ぶと出力された静的サイトがダウンロードリンクが表示されます。フォルダーの直下にある「index.html」がサイトのトップページなので各ページが正常に表示されるか確認します。

サイトを書き出す時間を短縮するにはアップロードされている画像のディレクトリを設定で除外すると良いです。ただし、新たに画像をWordPressに加える時に、Simply Staticで作成したファイルとは別に画像をアップロードする必要があります。

手動のリンク修正

当サイトではシンタックスハイライトの「prism.js」を利用しています。コードの色分けをするためにJavaScriptでspanタグを大量に追加する場合にページの読み込みが遅くなります。そこで少しスクロールした時点で「prism.js」とそのCSSを読み込んでいるのですが、JavaScript内のパスは修正されませんでした。修正されない箇所があれば手動で修正する必要があるようです。

feedの出力

feedフォルダーの「feed.html」はトップのページと最新の投稿を含めたものですが、私の環境では「feed.html」にfeedのデータが含まれていません。各投稿ページのfeedも出力されません。仕方がないので「http://ローカルID/feed」へアクセスするとダウンロードできる.rss拡張子のファイルをルートにおいています。ただ、このファイルにはguidタグを使いショートリンクが含まれるので削除しています。

画像のように必要なファイルを用意します。robots.txtが必要な方は追加してください。

アップロード用ファイルの作成

「Settings」>「General」を選択し「Replacing URLs」の項目で「Absolute URLs」を選択します。「SCHEME」と「HOST」を使って公開サイトのアドレスを指定します。（当サイトではhrrps://sumibi-blog）

ローカル用と同じく作成後にダウンロードします。

Cloudflere Pagesプロジェクトの作成

Cloudflere Pagesでプロジェクトを作成します。「Works & Pages」を選び「作成」を押します。上部の作成の左「＋追加」を押します。ドロップダウン画面が表示されるので「Pages」を選びます。「アセットをアップロードする」を選びます。プロジェクトの名前を入力します。

Cloudflere Pagesにファイルをアップロード

プロジェクトの名前を入力するとファイルのアップロードが可能になります。フォルダーとzipファイルがアップロード可能のようなので、上で作ったファイルをzip形式でアップロードしようとすると25MB以上のファイルはアップロードできないとエラーが出ました。

次にフォルダーでアップロードすると一度にアップロードできるファイルは1000までだとエラーが出ます。少しずつアップロードしようとするとフォルダに入れて一度にアップロードしろエラーが出ます。

どうしたら良いものかと調べると「Wrangler」というものを使うようです。

Wranglerを使ってアップロード

「Wrangler」はCLI（Command Line Interface）のアプリケーションです。ファイルが更新されたり、新しいファイルが存在する分だけアップロードできるのが特徴だそうです。「Wrangler」をインストールするには「node.js」「npm」のインストールが必要です。

1. node.jsとnpmのインストール
2. npmのバージョンアップ
3. Wranglerのインストール

「Wrangler」をインストールするときに「npm」のバージョンが古いよ、とエラーが出たのでバージョンを上げてインストールを終えました。

npx wrangler login

上のコードを実行するとブラウザが開いてCloudflareにログインするように促されます。

ログインできると実際にファイルをアップロードします。

npx wrangler pages deploy static_folder --project-name abcdblog

静的サイトのファイルが入っているフォルダーが「static_folder」、作成したプロジェクト名が「abcdblog」のとき、上のコードを実行してアップロードします。

カスタムドメインの設定

このままでは「プロジェクト名.pages.dev」上の例では「abcdblog.pages.dev」というアドレスで公開されるので、カスタムドメインの設定をします。次からの説明のためにここでは「abcdblog.org」というカスタムドメインを設定することにします。

プロジェクトを選択すると上部にカスタムドメインタブがあるのでそこからドメインを登録します。SSLなどの設定はCloudflareが自動で行ってくれます。

pages.devドメインからカスタムドメインへのリダイレクト設定

カスタムドメインを設定したあとでも「abcdblog.pages.dev」は有効のままです。無効にする方法はないのでカスタムドメインにリダイレクトさせます。

「一括リダイレクト」を選びリストを作成します。

次にルールを作成します。チェックを入れ先程作ったリストを選びルール名を入力し保存します。ルールが有効になり、リストがアクティブになっていることを確認します。

www付きアドレスとなしのリダイレクト設定

cloudflareのルールを使ってwww付きのアドレスをwwwなしにリダイレクトします。逆の場合も同じで記述を逆にすればwwwなしからwww付きにリダイレクトします。

「ルール」>「リダイレクトルール」においてルール名を入力し「カスタム フィルタ式」を選択します。

実行内容に

上記の設定ですべてのwww付きのページが、wwwのないスラッグの同じページに301リダイレクトします。

404ページの表示設定

WordPressで404.phpを作っているとアドレスにページが存在しない場合は404.phpの内容をWordPressが表示していました。WordPressが動いていない状態で404.htmlの内容を表示させるには「.htaccess」に下のコードを加えます。加えて、Simple Staticによって作成された404ディレクトリのindex.htmlを「404.html」にリネームしルートディレクトリに移動します。

ErrorDocument 404 /404.html

設定は以上になります。便利なWordPressを捨てて静的サイトにするメリットはほとんどないような気がします。強いて言えばセキュリティが固くなったのでしょうか。ページの読み込み速度が全く変わらないのは想定外でしたが、cloudflareは無料のプランでもきっちりと役に立っていたということでしょう。

最後までお読みいただき、誠にありがとうございます。