Cloudflare の設定

まず最初に、ページの更新などの処理を受ける Webhook のエンドポイントを作成します。今回は Cloudflare Pages を利用しているため、対象となるサイトの Settings 、Deploy hook の設定があります。ここの + をクリックすると Webhook を追加する画面になります。

右側からサイドバーが開いて、Deploy hook の名前、また指示が来たときにどのブランチをビルドするか指定します。

作成をすると、利用する URL が表示されます。今回は上に表示されている URL を Sanity のプロジェクトに設定することになります。

Sanity の設定

続いて連携したい Sanity のプロジェクトを開いて、API のタブを選択します。初回の場合はなにも API が設定されていない状況です。

新しい Webhook を作成します。設定の手順としては Webhook の名前として連携先の名前を今回は入力し、Cloudflare が連携先として設定をした URL を入力します。また、コンテンツの更新した場合のデータセットと、どのタイミングか（公開、更新、削除）を選択して、Webhook の設定を完了させます。

動作検証

実際にコンテンツの公開に合わせて動作するか検証をします。検証前のコンテンツは以下のようになっています。

未公開のコンテンツを選択して、Publish を選択してコンテンツを公開します。

公開の手順が終わると、Cloudflare の環境では build がスタートしていることを確認することができます。

build が完了したタイミングで、以下のように新しい記事が公開されていることを確認することができました。

まとめ

今回はコンテンツの公開、更新、削除に合わせて Cloudflare のサイトが更新されるように、Webhook を利用して連携させる手順を紹介しました。これにより、Sanity の環境でコンテンツの作成、公開もですが、スケジュールを設定して公開という形で、ブログやサイトの更新が簡単にできるようになりました。

参考情報

• Cloudflare - Deploy Hooks
• Sanity - Webhooks