銀の光と碧い空

クラウドなインフラとC#なアプリ開発の狭間にいるエンジニアの日々

更新しなくなった WordPress を StaticPress で静的ファイルに変換して S3 で公開する

http://techblog.hilife-jp.info/ という以前更新していたブログがあるのですが、はてなブログに移行してから更新しなくなったのもあってより安く維持できないかと検討していました。 もう更新しない以上、やはり Amazon S3 によるWebHostingが一番安いだろうということで、静的ファイルに変換して公開しました。その手順をまとめておきます。

コメントやRSSなどを削除(任意)

やらなくてもいいですが、コメント欄や検索フォームなど動的にサイトを更新するものは使えないですし、RSSももう更新されないのでほぼ無意味です。そこでこれらを削除しておきます。

削除の方法については、使っているWordPressのテーマによって、ウィジェットを削除したり、テンプレートのPHPを編集したりと異なるので、自分のテンプレートをにらみながら削除しました。

StaticPress でサイトを静的ファイルに変換

次にWordPressのサイトを静的ファイルに変換します。WordPressのプラグインも複数あるようで、いくつか試したのですが、

  • 日本語URLがあっても正しく動く
  • そこそこの量でも変換してくれる

という条件を満たしたStaticPress

StaticPress

を使うことにしました。サイトにも手順が書いてあるのでその通りでいいのですが、こんな感じに変換後のサイトのURLを設定し(下はドメイン直下で公開する場合の例)、保存先を指定します。

f:id:tanaka733:20140401194402p:plain

あとは再構築ボタンを押すと出力されます。

f:id:tanaka733:20140401194828p:plain

S3 にアップロードする

先にS3にホスティング用のサイトを作成する必要がありますが、

お名前.com で取ったドメインを Amazon Route53で管理し、サブドメインをはてなブログに割り当てるまで - 銀の光と碧い空

の「トップレベルドメインをS3 WebHostingにする」を参考にしてください。今回はトップレベルドメインではないので、CNAMEによる参照で、DNSはRoute53でなくても大丈夫です。

作成したら出力したファイルをS3にあげるのですが、AWS CLIのs3 syncコマンドが使えると便利なのですが、なぜか正しく動かなかったので、地道にいったんダウンロードして、CloudBeryy Explorer を使ってUploadしました。

S3 でRedirectを設定する(任意)

前のブログでC# 関連の記事は少しずつはてなブログの方に移行させていました。で、Redirections プラグインでリダイレクトかけていたのですが、これも静的サイトでは動かなくなります。そこで、S3のRedirect機能を使ってRedirectさせます*1

やりかたとしては簡単で、リダイレクトさせたいURLに対応するBucketに0バイトでいいのでindex.html を作成します。AWS Management Consoleで設定する場合は、このindex.htmlのMetadata に Website Redirect Location を追加し、Value にリダイレクト先URLを指定します。

f:id:tanaka733:20140401201644p:plain

これでリダイレクトができるようになりました。

という感じで割と簡単にS3 にアップロードできました。1か月くらいしたらお値段も比べてみたいと思います。

*1:ただし、S3のRedirectだとリダイレクト元は特定のURLのみ。Redirectionプラグインのように正規表現マッチはできない。