logo

Dev

Contentfulで記事を更新したら自動的に更新記事がジェネレートされるようにしたよ

Contentfulで記事を更新してからGatsbyをごにょごにょするのが面倒だったので、Contentfulで記事を更新すると勝手に最新記事込みの静的サイトがジェネレートされてデプロイされるようにしました。

参考の記事では.envを使ってContentfulの「SpaceId」と「accessToken」を公開しない方法を説明していますが、今回は「Contentfulに記事を更新したら、自動的にその記事と一緒にGatsbyサイトをジェネレートする設定」のみを解説していきます。

.envの設定については別記事で解説します。

前提条件

  • Gatsbyでサイトを作成

  • Contentfulで記事を更新

  • Netlifyでホスティング

  • 上の設定がエラーなく行われている

Netlifyでの作業

まずNetlifyにログインして、「Site Setting」から「Build & Deploy」にいきます。

中盤くらいに「Build environment variables」のセクションがあるので、そこにContentfulの「access token」と「space id」を追加します。

そしてすぐ下に「Build hooks」というセクションがあるので、「Add build hook」を押してBuild hookを追加します

Build Hookの名前はわかりやすい名前にしておきましょう。 Branch to buildは特に指定がなければmasterで大丈夫です。

Contentfulでの作業

ログインしたら「Settings」から「Webhooks」にいきます。

Add Webhook」でWebhookを追加します。 *すでに追加していたので1つTrigger Netlify Buildと表示されていますが、初めての場合は何も表示されないはずなのでご安心ください。

また、 Nameはわかりやすい名前にしましょう。 URLには先ほどの「Build hooks」で出てきたURLをコピペしてください

あとは、Triggersの欄で「Select specific triggering events」を選択し、Entryの「Autosave以外にチェック」をします

*Autosaveをチェックしてしまうと、記事を書いている途中で自動的にセーブされる度にBuildされてしまいますので、未完成の記事が公開されてしまいます。

こんな感じでセッティングします

以上で設定は完了です~

Contentfulで記事を更新すると、こんな感じでNetlify側でBuildされているのが確認できます。

これでContentfulで記事を更新したら自動的にジェネレートされるようになりました

いちいち手動でするのって大変なので出来て良かったです^ ^

では〜

参考サイト:Setting Up a Continuous Deployment Pipeline with Gatsby.js, Contentful and Netlify

SHARE