ぼくは一生に何度ブログのシステムを更新するのだろう
ブログのシステムを更新した
更新した。
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
- Incoming Webhookを受け取れるタスクランナー
- GitHubライクな
X-XXX-Signatureをよしなに読んでくれる
esa.ioから記事を取得してレポジトリに投げるやつ(pigeon)
- esa.ioの記事を、特定のレポジトリにコミットしてpushするやつ
- 画像をGCSに上げたり一緒にコミットしたりして、URLを置き換えてくれる
gitをos.Execで叩くなど結構怪しいことをしているので、使う場合はコードを読んだほうがいい
Vercel
- 静的サイトをエッジで配信
- 静的サイトをビルド
- 今回はビルドにHugoを使った
仕様
- esa.ioで記事を投稿する
- esa.ioから弊鯖にWebhookが自動で飛ぶ
- Webhookがpigeonを叩く
- pigeonが記事のMarkdownを取得、よしなにしてからブログ用レポジトリにpush
- Vercelがビルド、配信
作ってみてどうだったか
作っておいてアレだが、おすすめはしない。
現代に生きていて7500記事以下ならNext.jsのData Fetching的な機構を使ってSSGする方が作るのも維持するのも楽だと思う。残念ながらHugoにはそのような機構はないので、どうしても今回のような迂遠な方法を取らざるを得ない。
だが、 使ったツール群はめちゃめちゃよかった。
まず、adnanh/webhook 。
正直API用のハンドラくらい自分で書いてもいいのでは感があったが、 X-Signature を少しの設定で検証してくれるのは強みだと思う。
次に、 Vercel 。
ゼロコンフィグと謳う通りビルド用の設定をすることなく、 config.toml (Hugoの設定ファイル)があればHugoが、他のフレームワークっぽければそれが走る。
これまで使っていたGitHub Pages だと基本的にActionsのワークフローを書いていく必要があるので、jekyll以外のSSGを使うのにはVercelのようにはいかない。