フロントエンドでJSなしに実装するGitHubブログのコメント機能

フロントエンドでいかなるJSコードも配信しないブログを目標に始めました。

既存のブログには giscus を使ったコメント機能があり、
JSなしでコメント機能を実装することが大きな障壁だったのですが。

Cloudflare Workers と GitHub Actions を使ってコメント機能を実装しました。

以下の流れで動作します。

1. Cloudflare Worker にホスティングされたコメントフォームを表示します。
2. ユーザーはそのコメントフォームから GitHub アカウントでログインし、コメントを送信します。
3. Worker は送信されたコメント内容をエスケープし、GitHub Actions の workflow dispatches API を通じてその内容を GitHub に渡します。
4. GitHub Actions は渡された内容をもとに、記事の HTML ファイルにコメントコードを追加し、その変更をコミットします。
5. コミットされた成果物は GitHub Pages Actions のデプロイ手順に従って本番環境に反映されます。

3〜5番の手順に従って反映されるまでに少し遅延があるのですが…

案内文をひとつ追加するだけで済ませました。WordPress のようなブログプラットフォームには「管理者の確認後にコメント公開」のような機能が一般的なので、その程度の遅延は管理者が確認しているふりをすることにしました。この記事を見ているあなただけ、気づかないふりをしてください。

UXの面では解決しました（笑）

個人レベルの小さなブログで、どうしてもJSを使わないという目標があったときにだけ意味のある方向性なので、気楽に楽しんで見ていただければと思います😅

以下のリンクから直接試すことができます！
https://nemorize.me/blog/202507/blog-renewal

[kylian]

案内文を1つ追加するだけでごまかした。WordPress のようなブログプラットフォームでは「管理者の確認後にコメントを公開」といった機能が一般的なので、その程度の遅延は管理者が確認しているふりをすることにした。この記事を見ているあなただけ、気づかないふりをしてくれればいい。 <<

天才では……？ｗｗｗｗｗｗｗｗｗ

[aqqnucs]

ふと、こういうこともllmにできるのだろうかと気になりました（笑）

[huiya]

レイテンシの解決方法が斬新で面白いですね 👏

[halfenif]

一種のheadless CMSでしょうか？ 面白いですね。