ブログをHugoとAmazon S3に移行しました

長らく VPS を使って WordPress で運用してきたこのブログですが、WordPress の更新もきつくなってきたのでここらで静的サイトに移行しようということで、重い腰を上げてHugoに移行してみました。合わせてホスティング先をAmazon S3にしました。

移行手順

メモ程度に残しておきます。

StaticPress で既存のブログコンテンツを HTML に吐き出す

StaticPressという WordPress を静的コンテンツに変換するプラグインがあります。最初はこれを使ってホスティングしようかと思っていたのですが、WordPress の面倒をローカルですらみたくなかったので諦めました。ただ、ここで一度吐き出しておいた HTML から移行を行いました。

HTML をパースして必要な部分のみ Hugo 形式に変換

サイドバーとかは不要なので、コンテンツの本文相当の部分とコメントを抜き出して、Hugo の Markdown 形式に変換するスクリプトを書いて実行しました。

その際に、<!-- more -->を挿入したり、URL が publish time になってるのでそこから date を生成したり、URL が変わらない様に slug を生成したりしておきました。

アーカイブ一覧ページを作成

casperという Ghost から来てる theme を使わせて頂いてるのですが、post セクションの一覧を出したいなと思ったのでここだけ layout(layouts/_default/section.html)を作成しました。main 部分だけ抜き出すとこれだけ。

これでこの一覧ページが生成されるようになりました。

デプロイ手順

Circle CI を使って、github に push するとaws s3 syncでアップされるようにしています。ただし、手元で HTML の生成まで行って git 管理しておきたかったのでちょっと変則です。こういう面倒なのをまとめるにはRakeを使うのが簡単なので、こんな感じのRakefileを書きました。

hugo server では都度 public を全て生成

消したファイルとかが微妙に残る時があるので、hugo serverを叩く前にpublicディレクトリを削除しています。

リンクは本番と同じ

ローカルで生成した HTML をそのまま Amazon S3 にアップロードしたいので、当然localhost:1313になっていては困るので、-bで明示的に BaseUrl を指定しつつ--appendPort=falseにしています。

もちろんこのままだと名前解決の都合上本番のファイルを常に見に行ってしまうので、そこは/etc/hostsファイルに127.0.0.1 blog.riywo.comと書いて、さらにローカルの Apache から proxy する設定を書いています。ちなみにhugo serverしてないときは通常通り本番が見えるようにProxyBalancerMemberを 2 つ書いています。

あとは public ディレクトリを Amazon S3 に sync するだけ

そのままデプロイできる HTML 等がpublicディレクトリにあるのでaws s3 syncするだけなのですが、Circle CI で checkout されたファイルの時刻は常に Amazon S3 上のファイルより新しいので全ファイルが sync されます。最初は git の log からタイムスタンプ修正して、変更あったものだけ云々とかやってみてたんですが、凝ってもしょうがないやと思ってやめました。

今後

はてブ数とかはてなスターとかは一旦後回しにしちゃったので、これから時間みつけてやっていきます。

まとめ

というわけで、これで WordPress や VPS のセキュリティ、スケーラビリティに気を使う必要がなくなりかなり気持ちが楽になりました。

また Hugo の使い方もわかったので今後静的サイトを作る際には大いに活用していければと思います。あとはテンプレートをスラスラと作れるだけの HTML/CSS/JS 力さえつけば、、、と 5 年くらい思って未だに成長がないところをどうにかするだけです。。。