ブログを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年くらい思って未だに成長がないところをどうにかするだけです。。。