最近AIに自分のポートフォリオサイトを作ってもらいました。
このサイトに最新のブログ記事も表示したいなぁと思って、Copilot Agentにお願いしたら、これも一瞬でAIが作ってくれました。
技術ブログと日常ブログで最新3件のブログをコンパクトに表示してとお願いしたらこれが出来上がりました。ブログのURLは元からリポジトリにあるものを勝手に持ってきたし、feedのURLも特に与えず勝手にAgentが見つけてきました。すごいですね。
さて、このウェブサイトはAstroで作られていて、ブログ記事はビルド時に更新フィードを叩いてSSGする形で書かれています。多分よくある構成だと思います。
こうなると、ブログ記事を更新したとしても、次のビルドまでは少しの間古い情報が表示されることになってしまいますね。
そんな時に使える、はてなブログのWebhook機能が最近追加されました。記事の更新時などに任意のWebhookを送信できる機能です。
これをソースにビルドすると常に最新の記事を表示することができそうです。早速やっていきましょう。
ブログのビルドはGitHub Actionsでやっているので、まずはワークフローのトリガーに workflow_dispatch を追加します。
# .github/workflows/firebase-hosting-deploy.yml name: Deploy to Firebase Hosting on: push: # これは元々 main にマージでビルドしていたもの branches: - main workflow_dispatch: # これを追加 jobs: # ...省略...
次に、GitHub Actionsでworkflow_dispatchを外部から呼び出せるPersonal Access Tokenを作ります。そのために使うAPIは /repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches で、ActionsへのWriteパーミッションが必要と書いています。この権限を持った新しいPersonal Access Tokenを作りましょう。
リポジトリには対象のリポジトリのみを入れて、PermissionsにはRepository Permissionsの Actionsで Access: Read and write を指定します。
あとは、はてなブログの詳細設定から、Webhookの設定をしてあげれば完成です。
僕の場合の設定は以下の通り。
- Webhook送信先URL
- HTTPリクエストヘッダー
- Name: Authorization
- Value: Bearer xxxx(１つ前で取得したPersonal Access Token）
- リクエストボディ
{"ref": "main"}
これでブログを更新すると、あとは自動でGitHub Actionsでワークフローが走って、最新ブログに更新される用になりました！
今回は Personal Access Tokenを使って実現しましたが、最近個人的にはPersonal Access Tokenを使いたくないなと思っています。はてなブログのWebhookを受け取ってGitHub Actionsのワークフローを動かすGitHub AppくらいならAIに作らせたら一瞬だと思うので、やってみようかなぁ。AIがこのブログを読んで、勝手に作っておいてくれるなら最高なのになぁ。
ということで、今回ははてなブログのWebhook機能とGitHub Actionsを組み合わせて、SSGでも常に最新の情報を表示する仕組みを作ってみました！もちろんこのブログにも今回の設定を仕込んでいるので、このブログを更新したら1分ほどでビルドが終わり、 https://koukilab.com/ にこのエントリも追加されているはずです！このブログはその動作確認のために書きました！
