ブログをWordPressからHugoに移行しました

Lifehacking.jpは2007年に現在の形で開設されて以来ずっとWordPress上で運営されていましたが、ここにきて維持管理の手間がかかるようになってきました。そこで今回、新しい技術で作り直すことをしました。

採用したのは、技術者のあいだではすでにここ4-5年で利用が広まっている静的サイトジェネレーターという仕組みで、数あるそうした仕組みの中でも今回は Go言語で書かれた Hugo を選んでいます。

管理の手間とセキュリティ、そしてなにより執筆の手間

移行した理由はさまざまありますが、大きいものとしてWordPressの管理がしだいに負担になってきたのが挙げられます。

最近ではWordPress自体のアップデートもプラグインのアップデートもJetPackを経由で自動的にできるようになったとはいえ、プラグインの相性を考えると自動ばかりだと痛い目を見るのがWordPressの管理です。

かといって、手を抜いているとセキュリティ的にも安心できません。実際、Lifehacking.jp には不審なアクセスやログイン試行が常に存在していて、ブラックリストでそれらを管理する手間が負担でした。

そして実際にもっとも楽しい執筆作業にかかる手間も、最近ではWordPressのGutenbergへの移行もあって煩雑に感じるようになっていました。

Gutenbergは嫌いではないのですが、私はもともとマークアップオタクだったというのもあるので、自分の執筆はよりマークアップに近いところで行いたいという欲求があったのです。

Hugoへの移行。いまの執筆方法

というわけで、WordPressのように動的にページを作成するのではなく、あらかじめ作成したテンプレートに従ってHTMLを生成する静的サイトジェネレーターという仕組みに環境を移行することにしました。

この分野にもさまざまなツールがあって、事前にHugo、GatsbyJS、Jekyll、Nuxtなどを事前に調べたのですが、自分の考え方と相性のよかったHugoを選択しました。

とはいえ、やっていることはたいてい同じなので、あとで別のツールに移行するのもそれほどの負担ではありません。

静的サイトジェネレーターでは、記事は可搬性を考慮してMarkdownで執筆します。記事の本文をテキストファイルで用意し、画像を同じフォルダに入れておけば、あとはジェネレーターがいい感じにHTMLを作成してくれますし、タグやカテゴリのリンクなどもやってくれます。

最も簡単にHugoを使うなら、Markdownを書き、ジェネレーターが作成したHTMLをftpクライアントでレンタルサーバーにアップするだけでいいのですが、それだと自宅だけでしか執筆ができなくなるという弊害があります。

そこで今回は記事と画像をすべてGithubのレポジトリで管理し、Github Actionという仕組みを使ってHTMLを生成、デプロイするようにしています。

Github Actionは CI / CD、Continuous Integration／Continuous Deliveryの仕組みですが、今回の利用の仕方だとあまり難しく考えずに、「記事をプッシュしたら自動的にHugoを使ってHTMLを生成、結果をレンタルサーバーに同期」という自動化をやらせていると思ってください。

また、Hugo の特徴として、記事を執筆中にもサーバーモードでHugoを立ち上げておけばブラウザのなかでリアルタイムに原稿がどのようにレンダリングされるのかを見ながら執筆ができますので、執筆環境はGutenbergよりも快適です。

エディタは好きなものを使えますし、完成ページを横目でみながら作業をおこなうことができます。