published on : 2019.11.22Web制作

#7 Gatsby + WordPress REST APIでブログを作ろう【Netlifyの自動ビルド編】

前回の#6ではNetlifyでブログをデプロイしました

今回はWordPressで記事や固定ページを更新した時にNetlify上でビルドが走る設定をしていきます

JAMstack Deployments

まず、ここから「JAMstack Deployments」というプラグインをダウンロード・インストール

JAMstack Deployments

WordPressの管理画面->設定->Deployments」にいきます

Netlifyにログインし#6で追加したサイトのページにいき、「Site settings->Build & Deploy」にいきます

ちょっとスクロールすると「Build hooks」というセクションがあるのでそこの「Add build hook」をクリック

Build hook name」に適当にわかりやすい名前をつけてビルドしたいブランチを選択します
今回はmasterでやります

そして「Save」をクリック

するとこんな感じでURLが表示されます

このURLを先ほどのWP管理画面上のJAMstack Deploymentsの「Webhook URL」にコピペします

NetlifyのGeneralにある「Status badges」セクションにいきます

以下のような文字列が表示されるので、これの「https://api.netlify.com/api/v1/badges/XXXXXXXXXXXXXXXXXXXXXX/deploy-statusの部分だけ」コピーします

[![Netlify Status](https://api.netlify.com/api/v1/badges/XXXXXXXXXXXXXXXXXXXXXX/deploy-status)](https://app.netlify.com/sites/XXXXXXXXXXXXXXX/deploys)

コピーしたものをJAMstack Deploymentsの「Netlify Badges URL」に貼り付けます

あとはデプロイをトリガーさせたいPost Typesを選んで保存したら完了です
チェックした項目が更新されると自動的にビルドが開始されます

自分のタイミングでビルドさせたい場合は、右上の方にある「Deploy Website」をクリックしればオッケーです

何か更新してビルドさせるかチェックしてみます

適当に記事を投稿すると、、、

netlifyの横の表示が「Building」になりました

Netlify側も「Building」になりました

ちゃんと動いてますね^ ^

以上で自動デプロイの設定終わりです〜〜

結構簡単にできましたね^ ^

これでブログ記事を投稿すると自動でビルドされて更新したコンテンツが反映されます

これだけ色々準備してくれてありがたいですね^ ^

とりあえずGatsbyの連載はここまでです!お疲れ様でした!

GatsbyJSを含めWebの技術はどんどんアップデートされるので、しばらくすると古い情報になってしまうかと思います
なので仕様が新しくなったり、非推奨のものが出てきたらまたブログ記事でアウトプットしていきます

今後もGatsbyJSやJAMStackについて何かしら紹介していきますので、お楽しみにーー^ ^

では〜〜

Share if you like

Commentなんでも気軽にどうぞ^ ^

Author
Web Designer

Kentaro Koga

福岡を拠点のクリエイターチーム「Fump」として活動をしています。

写真や動画の撮影やモノ作りが好きで、趣味は旅・カメラ・テニス・筋トレ・サウナ・レザークラフトです。

twitterアイコンinstagramアイコンfacebookアイコン