S3でWordPressブログを表示した話

By:

S3でWordpressのブログを運用してみました

結論から言うと、
Wordpressのプラグイン「Simply Static」を使って静的HTMLを出力させ、S3にアップした話になります。

対象

  1. S3でサイトが動いているが、その中でブログを始めてみたい
  2. 1msでも応答速度を上げたい

全体像

  1. Simply Staticとは
  2. Simply Staticを使うために
  3. WordPressを動かそう
  4. プラグインをインストールしよう
  5. 出力してみよう
  6. 設定を変更しよう
  7. パーマリンクに気を付けよう
  8. 終わりに

1. Simply Static とは

WordPressのプラグインです
https://ja.wordpress.org/plugins/simply-static/
自分のWordpressサイトの構造を解析、それをHTMLとCSS、その他img等をまとめて別な場所に吐き出してくれるプラグインです。

これにより、phpで動的に生成されない分いくらか高速で動くはずです。
またphpが動かせないS3等でも表示可能な内容になります。
注意が必要な点として、コメントやサイト内検索などphpの機能が必要な機能はS3では動かせない点に注意が必要です。

2. Simply Staticを使うために

WordPressが動く環境がそもそも必要です。
もしすでに動いているものがあればそれに越したことはないのですが、
そもそも動かす環境があればこのプラグインいらない、という人も多いのかもしれません（私含む）。

その場合、ローカルで動けば何とかなるのでその方向で解決するのが良いと思います。

3.Wordpressを動かそう

2からの流れでローカルで WordPress を動かす方法をまとめると

  1. xampp を使ってローカルサーバをたてる https://www.apachefriends.org/jp/index.html
  2. Instant WordPressを使う方法 http://www.instantwp.com/

どちらも難しい話ではないので方法は割愛させていただきます。
複数人で運用する可能性があるのであれば xampp にしておく方が後々共有サーバ等で動かす場合に楽かもですね。
私は xampp で運用しています。

4. プラグインをインストールしよう

割愛します。頑張ってください。

5. 出力しよう

プラグインのインストールが成功し、有効化していればメニューに下の画像のように Simply Static が追加されているはずです。
tool_bar.png

これをクリックして、Generate Static Files を押せばとりあえず出力されます。
Generate.png

6. 設定を変更しよう

出力されます、は良いが、どこに出力されたのか？ という話です。
Settingsから Local Directoryを変更しましょう。
local_directory.png

ついでに Destination URL も変更しましょう。
これを設定しないまま出力してサーバにアップすると様々なリンクエラーが出ます。
これは xampp 等で動かしてたりすると http://localhost/… の部分が問題になるからです。
それを変更する項目です。
destination_url.png

7. パーマリンクに気を付けよう

6の設定も十分な状態で再度 Generate Static Files を押してもうまく記事が表示されない方もいらっしゃるかもしれません。
その場合、高い確率でURLがタイトル等になっていてかつ日本語なのではないかと思われます。

その際にLocal Directoryを見に行ってみると %e3%83%86%e3%82%b9%e3%83%88URL のようなディレクトリが出来ているかと思います。
これはURLエンコードされた文字で、”テストURL”という文字列をURLエンコードすると上のような感じになります。
パーマリンクというのはURLの設定の話になります。

もし可能であれば、パーマリンクの設定を変えて
parma_link.png

手作業でリンクの設定をするのが SEO 的にも良い気がします。
edit.png

そうはいってももう既に運用していてURLがそこかしこに or やっぱ日本語がいいんだよ、という人は色々頑張る必要があります。

PHPがわかる方はプラグイン編集で

simply-static/includes/class-ss-url-fetcher.php
PHP
1
    public function create_directories_for_static_page( $static_page )

のあたりをいじると何とかなるんじゃないですかね。
ワタシ PHP 詳しくないのでよくわからないですが。
これを見た詳しい人がコメント等でアドバイスくれるかもしれません。

出力された後でツールを実行する方法で良ければ私が作ったツールを使うのも手です。
http://xhift.com/public_tool/DirectoryConverter.exe
exeなので、バカ野郎お前のことを信用するぞこの野郎、という方だけ使ってもらえればと思います。
さすがにちょっと、という方はプログラムが書けるなら「C# URLデコード」とかでググればすぐ解決するかと思います。

7.終わりに

この状況ならあとは S3 のバケットに突っ込めば普通に表示されるかと思います。
ですがコメント欄がやっぱり欲しい、や最新の投稿を別な場所で自動で表示したい、みたいなことは出来ません。
個人的に最新投稿の一覧は欲しかったのでそれは対応しました。
http://xhift.com/bonopri/ が例です。
その方法に関しては別な機会でまとめたいと思います。

Qiita にも同様の内容を投稿しております。
Qiita

More from my site