You are currently viewing WordPressをwgetとNetlifyでお手軽に静的サイト化する話
  • 投稿カテゴリー:-- Web
  • 投稿の最終変更日:2021-07-24

WordPressって便利ですよね。基本的な機能はもちろん、テーマやプラグインがたくさんあって「それっぽい」サイトなら簡単に作ることができます。でもWordPressって無駄な処理が多くて遅いし、管理画面への不正アクセスだったりデメリットも目立ちますよね。特に、もう更新する気のないサイトともなると、本体やプラグインのアップグレードを怠ってしまい、不正アクセスの絶好の標的になってしまいます。

じゃあどうするか…と考えてみると、WordPressは動的な仕組みとはいえ、ページに出す記事自体は固定のものなので、いっそのこと静的ファイルにしてしまえばいいのではと考えました。静的ファイルになることで、煩わらしい更新作業や管理画面への不正アクセスを恐る必要がなくなります。さらに副産物として、作成した静的ファイルをホスティングサービスに設置することで、高速に表示してもらえるようになります。

というわけで今回はWordPressで動ているサイトからプラグイン不要で静的ファイルを生成し、それを「Netlify」というホスティングサービスに設置することで高速安心な静的サイトを構築していきたいと思います。(wgetコマンドが実行できる環境構築とNetlifyの細かい設定については触れません…。)

静的化の注意点

さて、導入部分ではさも静的化がメリットまみれのように書いてしまったので、ここでWordPressを静的サイト化するデメリットについて触れておこうと思います。

動的部分が動かなくなる

まずは、当然ながらWordPressの動的部分が動かなくなります。記事部分のような静的でも問題ないところを抜くと、よく使われていそうな動的部分はサイト内検索や記事へのコメント機能などの機能が動かなくなります。また、テーマやプラグインによっては意味がなくなったり、正しく動作しなくなるものもあると思います。

テーマやプラグインなど独自のものについては、サイトごとに対応方法も異なるため何とも言えませんが、コメント機能とサイト内検索については外部のサービスを活用することで静的化と同じように動作させることができるそうです。 検索でしたら「Google カスタム検索」コメント機能では「Disqus」というサービスが使えそうです。

ページが増えると静的化に時間がかかる

もう一つのデメリットは今回の方法では記事数が増えると静的化の処理にとても時間がかかるという点です。今回の方法はファイルを作成する際に実際にページにアクセスして返ってきた内容を保存しています。 そのため生成するすべてのページにアクセスする必要があります。これはカテゴリやタグごとの一覧ページもひとつずつ保存する必要があるため、記事が増えることで、一覧ページも増えるため静的化がどんどん遅くなってしまうわけです。

もう運営・更新するつもりがないサイトではこれらのデメリットはあまり関係ありませんが、自分が静的化したいサイトでデメリットを許すことができるかは確認する必要があると思います。

静的化するよ

さて、デメリットについても書きましたので、いよいよ静的化です。静的化するにあたり動かなくなる部分はこのタイミングで消しておきます。私のサイトの場合ではコメント,ピンバック,検索でした。また不要な固定ページもありましたので合わせて削除しました。

準備が完了したのでwgetしていきましょう。wgetをする際はローカルでもリンクが切れないようにするオプションと、ページ内で使用している画像なども一緒にダウンロードするオプション(+α)を設定して実行します。

$wget --mirror \
      --no-parent \
      --page-requisites \
      --convert-links \
      --adjust-extension \
      --restrict-file-names=windows \
      --no-verbose \
      [サイトのURL]

このコマンドを実行することで指定したURLからリンクを辿っていきたどり着いたページがHTMLファイルとして保存されます。あとはこのファイルを煮るなり焼くなりで公開することができます。ちなみに設定しているオプションの効果は以下の通りです。

オプション名説明
–mirror無限に再帰してローカルよりも新しいファイルをDL
–no-parent親ディレクトリは対象にしない
–page-requisitesページを表示するのに必要な全ての画像等も取得する
–convert-links HTML内のリンクをローカルパスに変更する
–adjust-extensionDLファイルに合わせた拡張子をつける
–restrict-file-names指定したOSに対応したファイル名を付ける
–no-verboseログ出力を省略する (オマケ)
[サイトのURL]DLするサイトTOPのURL

ファイルを設置するよ

最後にやっとの思いで作成したファイル達を静的ホスティングサービスで公開していきたいと思います。今回はタイトルにもある通りNetlifyというサービスを使います。Netlifyは静的なサイトを簡単高速に提供できるWebサービスで、公式サイト曰く、わずか3ステップでWebサイトを公開できるようです。

Netlifyにファイルを設置するにはGitリポジトリを使います。Netlifyでは、GitHub, GitLab, Bitbucketのいずれかで作成したリポジトリを接続することで簡単にデプロイすることができます。操作の詳細は省きますが、(Gitの操作ができれば)簡単にできると思います。デプロイ後はドメインやSSLの設定を行うことで普通のWebサイトとして公開することができます。

最後に

さて、ここまでWordPressサイトの静的化について書いてきました。もともとはもう更新する気のないサイトを放置しておくのが怖かったというところからこの作業を始めたのですが、作業を進めていくにつれだんだん楽しくなり、今書いているこのサイトも静的化したくなってしまいました(実際に静的化しちゃいました)。

今回は更新がないサイトということで、簡単に必要最低限やってきましたが、更新があるサイトとなると追加で気にしなくてはいけないことが増えていきます。そんなわけで続編として、更新があるWordPressサイトの静的化の手順もまとめていきたいと思います。

追記 2020/06/01

続編の記事を公開しました!

今回の登場人物

WordPress … サイトやらブログやら簡単に作れるCMS
Netlify … 静的ホスティングサービス
GitHub, GitLab, Bitbucket … Gitホスティングサービス。 私はGitLab派!