📐

Vercel + Contentful で自動Buildを走らせたい!

2021/10/26に公開

はじめに

最近、Vercel + Contentful + Gatsby.jsでブログを作成してみました。
その際、「あれ、Contentfulで記事を追加したのに、Vercelで記事が増えない。。。」
となったので、VercelのWebHookの使い方を共有しようと思います!

Vercel側での設定

上部タブからSettingsを選択し、左サイドバーのGitを選択します。

次に、Deploy HooksのCreate Hookに情報を入力していきます。

適当な名前と、デプロイしたいGitのブランチ名を入力し、黒のCreateHookボタンをクリックしてください。
すると、上記画像のモザイク部分にURLが出てくるため、コピーしておいてください。

Contentful側での設定

次にContentful側でwebhookを使うための設定をしていきます。
上部タブバーからSettingsを選択し、右のAdd Webhookをクリックしてください。

するとこのような画面が出るので、適当にNameの部分に名前を入力してください。
また、URL(以下の画像矢印)に先程コピーしたURLを貼り付けます。

続いて、Triggersを設定します。
Trigger for all eventsを選択したままだと、全てのイベントでビルドが走ります。
細かく設定したい方は Select specific triggering eventsを選択して、適宜変更しましょう。

Content typeは application/json; charset=utf-8でいいと思います。
一応utf-8はつけましたがいらない気がしてます。
(他の種類のContent Typeはいまいち調べてもわからんかった。。。教えてエロい人)

これで設定は終了です。右上のSaveを押して、保存しましょう。
記事を新しく作ってみて、Vercelのビルドが走ったら勝ちです。
祝杯を上げましょう。

まとめ

GUIで色々簡単にできるのはいいですね。
ただ、日本語に対応していないので、読むのが大変に面倒でした。
(なぜかdeepLを使うのは負けな気がするのでw)
ということでHeadles CMSを使いこなせるように頑張っていこうと思います。
皆さんのお力になれたのなら幸いです。
ではでは。ノシ

Discussion