きっかけ
Porkbun で .io ドメインのセールが行われており、勢いで tsukimiya.io を取得してしまったので、ドメインを活用すべくブログをはてなブログから移行することにした。
技術選定
数ある静的サイトジェネレーターの中から Hugo を選定した理由は単に「周りが使っているから」というだけで、あまり深い理由はない。要件として Markdown で執筆できればそれで良いので、いずれ他のものも検証するかもしれない。
静的サイトのホスト先としてパッと思いつくのは Netlify と Vercel だが、Netlify の無料プランでは日本のエッジノードが利用できない一方で、Vercel は無料でも利用できるとのことだったので、表示速度を考慮して Vercel を選定した。 両者とも個人的に利用経験があり、UI もわかりやすいので特に困ることはなかった。
環境構築
Building a personal blog with Hugo and Vercel を参考にした。参考サイトそのままの形になるが、執筆フローは下記の図を参照。
ローカルで作成・プレビュー→問題がなければそのまま Vercel の本番にデプロイ、という形が最もシンプルだが、ローカルで執筆する環境が複数ある関係で GitHub を活用している。
テーマの設定
テーマは hugo-theme-stack を使う。ドキュメント に従ってインストールを進めていき、推奨されている テーマのモジュール化 によって導入した。この方法の仕組みやメリットをまだよく理解できていないので、後々調べることにする。
テーマの導入にあたって Vercel でのデプロイ時にいくつかトラブルが発生したのでメモしておく。
Go をインストールする
|
|
おそらくテーマのモジュール化の影響なのか、上記のエラーが発生してデプロイに失敗する。
Settings > General > Build & Development Settings から、BUILD COMMAND を amazon-linux-extras install golang1.11 && hugo -D --gc で Override すると解決した。
Hugo のバージョンアップ
|
|
上記のようなエラーが発生してデプロイに失敗する。
Settings > Environment Variables で下記のように Hugo Extended の最新バージョンを指定すると解決した。
おそらく Vercel 特有である上記の問題はテーマの開発者も認識しており、Hugo Theme Stack Starter Template という初心者向けのテンプレートに解決策が記載されていた。
はてなブログからの移行
記事の移行
ろくに書いていないブログだったので、まともな記事が3ページしかなかった。これなら別にツールを使うまでもないので、手動で Hugo のフォーマットに合わせてすべて移行した。
旧ブログのリダイレクト
本来であればブログを移転する際は旧サイトから新サイトへのリダイレクトをするべきだが、面倒なのでやめた。