ブログのシステムを更新した esa.io + Hugo + Vercel編

技術

ぼくは一生に何度ブログのシステムを更新するのだろう

ブログのシステムを更新した

更新した。

Next.jsとesaを使った個人サイト構築 | corocn.dev

この記事を眺めていて、esa.ioのGeneric WebhookやVercelを使おうと思い立った。

なお、先の記事にあるようなNext.jsを使った今風のSSGではなく、既存のブログ基盤で設定していたHugoをそのまま使うことにした。

構成

  • esa.ioのGeneric Webhook
  • adnanh/webhook
  • esa.ioから記事を取得してレポジトリに投げるやつ
  • Vercel
    • Hugo

esa.io

  • 個人で契約しているMarkdownなWiki (月500円)
  • 記事投稿時にGitHubライクなWebhookが投げられる
    • 発火タイミングは「下書き(WIP)から清書(Ship It)したとき」、「アーカイブしたとき」など細かく決められる

adnanh/webhook

esa.ioから記事を取得してレポジトリに投げるやつ(pigeon)

  • esa.ioの記事を、特定のレポジトリにコミットしてpushするやつ
  • 画像をGCSに上げたり一緒にコミットしたりして、URLを置き換えてくれる
  • gitos.Exec で叩くなど結構怪しいことをしているので、使う場合はコードを読んだほうがいい

Vercel

  • 静的サイトをエッジで配信
  • 静的サイトをビルド
  • 今回はビルドにHugoを使った

仕様

  1. esa.ioで記事を投稿する
  2. esa.ioから弊鯖にWebhookが自動で飛ぶ
  3. Webhookがpigeonを叩く
  4. pigeonが記事のMarkdownを取得、よしなにしてからブログ用レポジトリにpush
  5. Vercelがビルド、配信

作ってみてどうだったか

作っておいてアレだが、おすすめはしない。

現代に生きていて7500記事以下ならNext.jsのData Fetching的な機構を使ってSSGする方が作るのも維持するのも楽だと思う。残念ながらHugoにはそのような機構はないので、どうしても今回のような迂遠な方法を取らざるを得ない。

だが、 使ったツール群はめちゃめちゃよかった。

まず、adnanh/webhook 。 正直API用のハンドラくらい自分で書いてもいいのでは感があったが、 X-Signature を少しの設定で検証してくれるのは強みだと思う。

次に、 Vercel 。 ゼロコンフィグと謳う通りビルド用の設定をすることなく、 config.toml (Hugoの設定ファイル)があればHugoが、他のフレームワークっぽければそれが走る。 これまで使っていたGitHub Pages だと基本的にActionsのワークフローを書いていく必要があるので、jekyll以外のSSGを使うのにはVercelのようにはいかない。