今回の記事では、「gatsby」、「netlify」、「shopify」、「contentful」の連携をする手順をみていきたいと思います。
実務のバイトで上記４つの連携をしたところ意外と簡単にできたので、アウトプットがてらこの記事の手順と解説をまとめていきます。
具体的には「gatsby」でサイトを作成し、「netlify」でデプロイします。
その後「shopify」と「contentful」と連携して、商品や記事を「gatsby」のサイトに表示します。
最後に商品や記事が追加されたら「gatsby」で構築したサイトが自動で更新されるようにします。
これだけ聞くと難しそうですが、意外と簡単にできるので１からみていきましょう！
Gatsby+Contentful+Netlyfyを学ぶならこちらがおすすめ！（Clickできます）
前準備
僕自身そうだったのですが、「node.js」や「npm」、「nvm」などをインストールしてない方や、「なにそれ美味しいの？」という方はここを参考にインストールしてください。
ちなみに環境は「M1mac」です。(普通のmacbookでも同じようにして問題ないはずです。)
nvmのインストール
まずは「nvm」のインストールをしていきます。
「nvm」は「Node.js」のバージョンを簡単に切り替えることができるものなので、これをインストールして「Node.js」をインストールしていきましょう。
「terminal」で次のコマンドを実行してください。
brew install nvm「arch -arm64 brew install ...」とでた方は次のコマンドを実行してください。
arch -arm64 brew install nvm「Summary」とでてきたら、その数行上に以下のようなコードが３行ほどあるので、コピーしてください。
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completionコピーできたら、次のコマンドを実行してください。
mkdir ~/.nvm
vi ~/.zshrc「.zshrc」というファイルが開くので、末尾に先ほどコピーしたものを貼り付けてください。（カーソルで一番下まで行くことができます。）
「i」キーを押すと書き込みモードになるので、その状態でコピペしてください。
貼り付けることができたら、「esc」キーを押して「:wq」としてください。
保存できたら次のコマンドを実行してください。
source ~/.zshrcこの時もし以下のような警告が出たら、「n」を押してください。
zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]? nその後次のコマンドを打つとどこが警告の原因かわかります。
compaudit
>>> There are insecure directories:
>>> /usr/local/share/zsh/site-functions
>>> /usr/local/share/zsh下の２行が原因なので、次のコマンドで対処してください。
chmod 755 /usr/local/share/zsh/site-functions
chmod 755 /usr/local/share/zshこれで対処完了です。再び以下のコマンドを実行してください。
macでzshでzsh compinit: insecure directoriesの警告が出る問題
source ~/.zshrc以下のコマンドを実行して「nvm」がインストールされているか確認してください。
nvm --version
>>> 0.38.0上記のようにバージョンが出力されれば完璧です。
ここだけで結構大変ですが、次に進みます。
Node.jsのインストール
まずはインストールできる「Node.js」のバージョンを確認します。
以下のコマンドを実行してください。
nvm ls-remoteめちゃくちゃたくさん出てきれば問題ないです。
では早速インストールしていきます。
nvm install v15.14.0先ほどのコマンドの出力結果の一番最後が最新バージョンなので、バージョン部分を適切なものに変更してください。（「v」はそのままにしてください。）
ではインストールされたか確認していきます。
次のコマンドを実行してください。
node -v
>>> v15.14.0先ほど指定したバージョンが出力されていればインストール完了です！
ついでにこちらでもバージョン確認しておきましょう。
nvm current
>>> v15.14.0使用できるかも確認しましょう。
引き続き以下のコマンドを実行してください。
node
> console.log('Hello World')
Hello World上記のように「Hello World」と出力されれば完璧です。
「Ctr + d」で抜けてください。
gatsbyのインストール
では最後に「gatsby」のインストールをしていきましょう。
以下のコマンドを実行してください。（終わるまで少し時間がかかります。）
npm install -g gatsby-cli無事終わればインストール完了なので、確認してきます。
次のコマンドを実行してください。
gatsby --help
╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝上記のようなものが表示されれば完璧です。
お疲れ様でした！
では早速本編に入っていきましょう！
GitHub
まずは「GitHub」にリポジトリを作成します。
「GitHub」をよくわかっている方は、「gatsby」というリポジトリを作成して、次のセクションに進んでください。
「GitHub」の使い方がよくわからない方は一緒に進めていきましょう。
まずは下記からサインアップしてください。
サインアップできたら、右上のアイコンから「Your profile」をクリックしてください。
「Repository」を選択してください。
右上の「New」を押してください。
上記のように入力してリポジトリを作成していきましょう。
作成できたら「Code」から「SSH」の部分を確認してコピーしましょう。
では「terminal」を開いてください。
「Desktop」に移動し、次のコマンドを実行してください。
git clone 先ほどコピーしたもの
cd gatsbyこれで完了です！
次は「shopify」に登録していきます！
shopify登録
「shopify」はECサイトを簡単に作成できるもので、最近何かと話題のものです。
使用するには料金がかかりますが、最初の14日間は無料なのでテストしてみた方は安全に使用することができます。
そしてプランを選択しなければ料金も発生しないので安全です！
この記事の最後にストアを閉じる手順も紹介するので、一通り試したい方はぜひ手順通りやってみてください！
それでは早速登録していきましょう！
ショップ作成
上記にアクセスしてください。
右上の「無料体験をはじめる」をクリックしてください。
上の画像のような画面が表示されるので、適切な情報を入力して「ストアを開く」を押しましょう。
ストア作成が始まり、しばらくすると上の画像のような画面が表示されます。
適当に入力して「次へ」を押してください。
次に個人情報の入力を求められるので、入力して「ストアに入る」を押してください。
上の画像のような画面が表示されればショップ作成は完了です。
商品追加
では商品と１つ追加していきましょう。
「商品管理」から「商品を追加する」を押してください。
上記を参考に必要な商品情報を記入していきましょう。
記入できたら右上の「保存する」を押してください。
先ほどの「商品管理」を押して、追加した商品が表示されている「ステータス」が「アクティブ」になっていれば完了です。
実際にストアページに行って商品が表示されているか確認しましょう。
「オンラインストア」から「ストアを見る」をクリックしてください。
ストアページに飛ぶので、「カタログ」をクリックして、先ほど追加した商品が表示されている確認してください。
商品が表示されていない人は「商品管理」から「商品名」部分をクリックして、右側にある「ステータス」を「アクティブ」にしてください。
API Key発行
次に「gatsby」と連携するための「API Key」を発行していきます。
次に「アプリ管理」から「プライベートアプリを管理する」を押してください。
上のような画面が出てくるので「プライベートアプリの開発を有効にする」を押してください。
さらに確認画面が出てくるので、３つ全てにチェックを入れて、「プライベートアプリの開発を有効にする」を押してください。
そうするとプライベートアプリが作成できるようになるので、「プライベートアプリを作成する」を押してください。
「プライベートアプリ名」には「gatsby」と入力し、「緊急連薬用メールアドレス」には「shopify」登録時のメアドを入力してください。
「このアプリがストアフロント...」というところにチェックを入れると、下に「ストアフロントAPI権限」が出てくるので、全てにチェックを入れてください。
最後に一番下にある「保存する」を押してください。
確認画面が出てくるので、「アプリを作成する」をクリックしてください。
作成できたら一番下までスクロールして、「ストアフロントのアクセストークン」をどこかにメモしておいてください。
ここで「shopify」の操作は一旦終わりです。
次の章では「gatsby」でアプリを作成して、「shopify」を連携していきます。
gatsbyでサイト作成
では早速「gatsby」でアプリを作成して、「shopify」と連携していきます！
gatsbyアプリの作成
ここはめちゃくちゃ簡単です。
まずは「terminal」を開いてください。
先ほど持ってきた「GitHub」のリポジトリで次のコマンドを実行してください。
gatsby new gatsby-shopify-starter https://github.com/AlexanderProd/gatsby-shopify-starterスターターキットをダウンロードして、プロジェクトを作成することができます。
「Command failed with exit code 1: npm install」のようなエラーが出た場合は。次のコマンドを実行してください。
npm install完了したら次のコマンドを打って持って来れている確認してください。
ls「gatsby-shopify-starter」というものがあれば完璧です。
shopifyとの連携
では「shopify」と連携していきます。
「gatsby-shopify-starter」直下の「.env.development」と「.env.production」の中身を次のように変えてください。
SHOP_NAME=ショップ名
SHOPIFY_ACCESS_TOKEN=shopifyでの「API Key発行」の章でメモした「ストアフロントのアクセストークン」
忘れてしまった方は「shopify」の右上からショップ名を確認して、「アプリ管理」の「プライベートアプリを管理する」の「gatsby」をクリックして、一番下にスクロールして、「ストアフロントのアクセストークン」をコピーしてください。
「.env.development」と「.env.production」を編集できたら、次のコマンドを実行してください。
cd gatsby-shopify-starter
gatsby developThere was a problem loading the local develop command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you need to run "npm install"? You might need to delete your "package-lock.json" as well.
上記のようなエラーが出た場合は以下のコマンドを実行してください。
npm install --save --legacy-peer-deps結構時間かかりますが、終わったら再び下のコマンドを実行してください。
gatsby develop「ERROR #85923 GRAPHQL」というエラーが出た場合は、以下を実行してください。
rm -f package-lock.json
rm -rf node_modules
npm install --save --legacy-peer-deps上記のコマンドを実行したら、再び下のコマンドを実行してください。
gatsby develoop上記にアクセスして以下のように表示されていれば完了です！
一旦「Ctr + c」を押して、次のコマンドを実行してください。
gatsby build"gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle: Input file contains unsupported image format
上記のようなエラーが出た際は次のコマンドを打ってください。
npm install -g npm-check-updates
ncu
ncu -u
npm install
ncu
gatsby build【Gatsby.js】対処しよう、「Error: Input file contains unsupported image format」に
「ERROR #11321 PLUGIN」が出た場合は次のコマンドを実行してください。
rm -f package-lock.json
rm -rf node_modules
npm install --save --legacy-peer-deps
gatsby build「info Done building in」と出れば完了です。
うまくいかない人はもう一度上のコマンドを実行してみてください。
GitHubリポジトリにプッシュ
最後に「GitHub」にプッシュしましょう！
「gatsby」ディレクトリに移動して、次のコマンドを実行してください。
git push
先ほどの「GitHub」のリポジトリをリロードして、「gatsby-shopify-starter」が追加されていれば完璧です！
ここで一旦「gatsby」は終わりです。
netlifyでデプロイ
では早速デプロイをしていきましょう！
デプロイとはネット上にあげる作業で、誰でも見ることができるようになります。
上記にアクセスして、右上の「Sign up」から「GitHub」と連携しながらログインしてください。
「New site from Git」をクリックしてください。
「GitHub」を選択してください。
検索欄に「gatsby」を入力し、先ほど作成した「gatsby」リポジトリを選択します。
上記のように入力し、「Dploy site」をクリックしてください。
このようにデプロイに失敗する場合は次のように設定を変更してください。
「Deploy settings」を押してください。
「Build & deploy」の中にある、「Builf settings」の「Edit settings」を押してください。
設定を上の画像のように変更して、「Save」を押してください。
上の「Deploys」を押して、「Trigger deploy」から「Clear cache and deploy site」をクリックしてください。
再びデプロイが始まります。
しばらくして「Published」になったら赤枠のURLを押して、ページを表示させてみましょう。
「gatsby develop」コマンドで先ほど表示したページと同じものが表示されていれば完璧です！
（URLにnetlifyが入っていることを確認してください。）
ちょっと動作を確認してみます。
商品をクリックして、「Add to Cart」をクリックすると、右上の「Cart」部分に「①」とつきます。
「Cart」をクリックすると、先ほどカートに追加した商品が表示されているのが確認できます。
一旦「Remove」を押してください。
商品の購入のテストもできるので、この記事の一番最後に手順を載せておきます。
ここまでで「shopify」と「gatsby」を連携して、「netlify」で公開することができました。
次に「Contentful」とも連携していきます。
Contentfuに登録して記事作成
「Contentful」とはブログ記事などを簡単に作成できるものです。
「shopify」で商品を追加したあと、その商品についての記事やショップ自体に関しての記事、ショップニュースなどを組み込みたいと考えるはずです。
その手助けとなるのが、「Contentful」です。
めちゃくちゃ簡単にできるので、一緒にやっていきましょう！
Contentful登録
まずは登録をしていきましょう。
上記にアクセスしてください。
右上の「Get started」を押してください。
「Sign up for free」を押してください。
「GitHub」を押してください。
僕自身以前に「GitHub」と連携しながらアカウントを作成してしまっているため、これ以降の操作をなんとなくしか覚えていません。
そのため、上記の記事を参考に「スペースの作成」まで進めてください。
「スペースの作成」が完了したら戻ってきてください。
記事の作成
みなさん戻ってきてくれたと思うので、早速「Contentful」で記事を作成していきたいと思います。
先ほど作成したスペースに移動してください。
「Content model」を押してください。
右上の「Add content type」を押してください。
「Name」に「blog」と入力して、「Create」を押してください。
「Add field」を押してください。
「Text」を押してください。
「Name」に「title」と入力し、「Create」を押してください。
同じように「Name」に「context」と入力して「Create」を押してください。
先ほど作成したフィールドが表示されていることを確認できたら、「Content」を押してください。
確認画面が出てきたら「Save changes」を押してください。
右上の「Add entry」を押してください。
「title」と「context」に上の画像のように入力して「Publish」を押してださい。
右上のクロポチ３つを押して、「Create new blog」を押してください。
上の画像のように「Publish」を押してください。
「Content」を押して、先ほど追加したものが表示されていて、「PUBLISHED」となっていれば完璧です。
gatsbyと連携
次に前の章で作成した「gatsby」のアプリと連携していきます。
「Settings」の「API keys」をクリックしてください。
右上の「Add API key」を押してください。
「Name」に「gatsby」と入力して、「Space ID」と「Content Delivery API - access token」をメモしておいてください。
メモできたら、右上の「Save」を押してください。
保存できたら、「gatsby」で作成したアプリの「gatsby-shopify-starter/gatsby-config.js」を開いてください。
このファイルにAPIキーなどの設定などを書いておけます。
したから２行目に以下のコードを記述してください。
{
resolve: "gatsby-source-contentful",
options: {
spaceId: process.env.SPACE_ID, // .envファイルから読み込み
accessToken: process.env.ACCESS_TOKEN, // .envファイルから読み込み
},
},上記をコピペできたら、「.env.development」と「.env.production」に以下を追記してください。
SPACE_ID=先ほどメモしたContentfulのSpace ID
ACCESS_TOKEN=先ほどメモしたContentfulのContent Preview API - access token先ほどメモしておいた、「Space ID」と「Content Delivery API - access token」をそれぞれ適切な部分に入力してください。
現在「gatsby」ディレクトリにいることを想定して話を進めます。
次のコマンドをターミナルで実行してください。
mkdir gatsby-shopify-starter/src/pages/blog
touch gatsby-shopify-starter/src/pages/blog/index.jsそして今作成した「index.js」に以下を追記してください。
import React from 'react'
import { useStaticQuery, graphql, Link } from 'gatsby'
import SEO from '~/components/seo'
import ProductGrid from '~/components/ProductGrid'
const BlogPage = () => {
const data = useStaticQuery(graphql`
query allContentfulBlog {
allContentfulBlog {
nodes {
id
title
context
}
}
}
`)
return (
<>
<SEO title="Home" />
<h1>Hi people</h1>
{/* 取得したデータを表示する処理を追加 */}
{data.allContentfulBlog.nodes.map(({ id, title, context }) => {
console.log(title)
return(
<div key={id}>
<h3>Title:{title}</h3>
<h3>context:{context}</h3>
<p>###################</p>
</div>
)
})}
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
</div>
<p><Link to="/page-2/">Go to page 2</Link></p>
<p><Link to="/">Go to shopify</Link></p>
</>
)
}
export default BlogPage上記を追記できたら、次のコマンドを実行してください。
npm install gatsby-source-contentful
cd gatsby-shopify-starter
gatsby developMultiple "root" queries found: "DefaultSEOQuery" and "DefaultSEOQuery". Only the first ("DefaultSEOQuery") will be registered
こんな感じのエラーが出た場合は、「gatsby-shopify-starter/src/components/seo 2.js」を削除しちゃってください。
無事実行できたら上記のURLにアクセスしてください。
先ほど「Contentful」で追加したものが表示されていると思います。
しっかり表示されていれば「Contentful」との連携はバッチリです。
デプロイされているアプリの方にも反映させていきましょう！
netlufyに変更を反映
まずは「Ctr + c」で実行を止めましょう。
実行を止めたら以下のコマンドを実行してください。
gatsby clean
gatsby build「info Done building in」と出てきたら次は「GitHub」にプッシュしていきます。
次のコマンドを実行してください。
cd ..
git add .
git commit -m "add contentful"
git pushプッシュがうまくいくと、なんと「Netlify」は自動で更新されます。
これは「main」ブランチが更新されると、「Netlify」側で「main」ブランチを監視しているので、自動で更新されるためです。
めちゃくちゃ便利ですよね！
「Published」になったら上のURLをクリックして、更新されている確認しましょう。
URLの末尾に「blog」と追加して、上のように表示されていれば完璧です！
ここまでです！と言いたいところですが、実はまだなんです...。
最後にしなければいけないことが１つあります。
現状では「Shopify」で商品を追加したり、「Contentful」で記事を追加しても、デプロイされている「gatsby」のアプリは自動では更新されません。（試しに商品や記事を追加して、デプロイされているアプリを確認してみてください。）
なので、その対応をしていきます。
Gatsby+Contentful+Netlyfyを学ぶならこちらがおすすめ！（Clickできます）
商品や記事を追加したときに自動更新
最後の作業になるので、気合を入れていきましょう！
Netlifyの設定
まずは「Netlify」を開いてください。
「Site overview」から「Site settings」をクリックしてください。
「Build & deploy」の「Build hooks」まで移動してください。
「Add build hook」を押して、「Build hook name」に「shopify」と入力し、「Save」を押してください。
同じように「Add build hook」を押して、「Build hook name」に「contentful」と入力し、「Save」を押してください。
２つのURLをメモしておいてください。
これで「Netlify」側の設定は完了です。
Shopifyの設定
「Shopify」に戻り、左下の「設定」から「通知」をクリックしてください。
一番下までスクロールして、「Webhookを作成」をクリックしてください。
そうすると作成画面が出てくるので、「イベント」を「商品作成」に変更し、「URL」に先ほどメモした「Shopify」のURLを入力してください。
入力できたら「Webhookを保存する」を押してください。
Contentfulの設定
「Contentful」に戻って、「Settings」から「Webhooks」をクリックしてください。
「Netlify」の横にある「Add」を押してください。
「Netlify build hook URL」に先ほどメモした「Contentful」を入力して、「Create webhook」をクリックしてください。
これで完了です。
動作確認
これで設定は完了なので、最後に動作を確認していきましょう。
Shopifyで商品追加
まずは「Shopify」で商品を追加してみましょう。
追加できたら、「Netlify」を確認してみましょう。
自動で更新されているのを確認できると思います。
更新が終わり、「Publushed」となったらデプロイしているサイトを確認しましょう。
しっかり追加した商品が表示されていますね！
Contentfulで記事追加
では次に「Contentful」で記事を追加しましょう。
「Contentful」に戻って記事を追加してみてください。
記事を追加して、「Netlify」に戻ると同じように自動で更新されているのを確認できます。
更新が終わり、「Publushed」となったらデプロイしているサイトを確認しましょう。
URLの最後に「blog」を追加すると、先ほど追加したものが表示されていますね。
ここまでできれば完璧です！！！
お疲れ様でした！
Shopifyで決済テスト
「Shopify」で決済のテストのしたい方もいると思うので、その手順をみていきたいと思います。
クレジットカードを登録しないといけないので、不安になる方もいると思いますが、しっかり手順通りにやれば問題ないです。（僕自身で実証済みです。）
Shopifyの設定
「プランを選択する」を押してください。
プランは適当に一番安いものにしておきましょう。
上の方に書かれているように、ストアを閉鎖すれば今後の請求も来ないので、安心してください。（次の章でストアの閉鎖手順もみていきます。）
「請求サイクル」は一番上を選択し、「クレジットカードを追加する」を押してください。
情報の入力を求められるので、入力して「確認」押してください。
「プランを開始する」を押してください。
プラン選択ができたら、「設定」の「決済」をクリックしてください。
「管理する」を押してください。
一番下までスクロールして、上の画像の赤枠の部分を入力してください。
「お客様の明細書の表記」と「お客様の明細書の表記（カナ）」は５文字以上なので注意してください。
「電話番号」を入力して、「テストモードを使用する」にチェックを入れてください。
こうすることで、決済が全てテストになります。
「保存する」を押してください。
決済テスト
せっかくなので、「gatsby」から購入テストをしてみましょう。
「Shopify」だと「Shopyfy」のサイトに移動せずに購入できるので、すぐに決済することができます。
「Add to Cart」を押して、右上の「Cart」をクリックしてください。
「Check out」を押してください。
そうすると決済画面が出てくるので、必要な情報を入力して「配送方法の選択に進む」を押してください。
「お支払いへ進む」を押してください。
クレジットカードの入力がもとめられるので、「Shopify」側で用意されているテストカードを使用します。
有効期限：任意 セキュリティコード：任意の３桁 カード番号：4242424242424242（この番号は「Shopify」側で用意されています。他のカード番号はこの記事の一番下の「参考サイト」をみてください。）
上記のような条件で入力したら、ちょっと怖いと思いますが、「今すぐお支払い」を押してください。
しばらくすると決済が完了するので、「Shopify」に戻りましょう。
「注文管理」を押すと、先ほど購入された商品があるのを確認できると思います。
これで決済は問題なくできています。
注文をキャンセルすることができるので、その作業をしていきましょう。
表示されている注文を押してください。
右上の「その他の操作」から「注文をキャンセルする」を選択してください。
「注文をキャンセルする」を押してください。
先ほどの注文に斜線が入っていればキャンセルできています。
ちなみに決済をわざとできないようにすることもできます。
カード番号を「4000000000000002」にして、先ほどと同じ手順で決済してみてください。
他にも決済のテストをする方法はあるので、この記事の一番下の「参考サイト」を見てみてください。
これで決済機能のテストは終了です！
お疲れ様でした！
後始末
最後に後始末をしていきましょう！
Shopify
まずは「Shopify」から削除していきましょう。
「Shopify」に戻って、左下の「設定」から、「プランと権限」を押してください。
一番下までスクロールして、「ストアを閉鎖する」を押してください。
パスワードを入力し、「確認」を押してください。
適当な理由を選択して、「ストアを閉鎖する」を押してください。
上の画像のような画面が出たら完了です。
確認のために「Shopify」でログインしてみてください。
ストアのURLを打っても、上の画像のようになっているはずです。
「Netlify」でデプロイしてもエラーが出ると思います。
Contentful
次に「Contentful」の「Content model」を削除していきます。
「Contentful」自体は削除しなくも料金は発生しないのと、今後利用する可能性も考えて削除しないでおきます。
代わりに作成した「Content model」を削除します。
「Contentful」に戻ってください。
まずは記事を削除していきます。
上から「Content」をクリックして記事の全てにチェックを入れてください。
「Unpblish」を押してください。
再び全てにチェックを入れて、「Delete」を押してください。
削除できたら、「Content model」から「blog」をクリックしてください。
右上の「Actions」から「Delete」を押してください。
「blog」を入力して、「Delete」を押してください。
下に削除が成功したことが出て、「Content model」がなくなっていれば完了です。
ついでに「API key」と「Web hook」も削除していきましょう。
「Settings」から「API keys」を押してください。
削除したい「API key」をクリックしてください。
右上の「Delete」を押して、「Delete」を押してください。
次に「Webhook」を削除していきます。
「Settings」から「Webhooks」を選択してください。
削除したい「Webhook name」をクリックしてください。
「Webhook settings」から右上の「Remove」を押して「Remove」を押してください。
これで全て削除することができました！
Netlify
次に「Netlify」の削除をしてきます。
上の赤枠をクリックして、削除したい「Site」をクリックしてください。
右上の「Site settings」をクリックしてください。
一番下までスクロールして、「Delete this site」をクリックしてください。
真ん中の赤枠のものを一番上の赤枠に入力して、「Delete」を押してください。
これで完了です！
GitHub
最後に「GitHub」からリポジトリを削除していきます。
「GitHub」に戻ってください。
「Settings」をクリックしてください。
一番下までスクロールして、「Delete this repository」をクリックしてください。
赤枠の部分をコピーして貼り付けて、一番下の赤枠の部分をクリックしてください。
「GitHub」のパスワードを入力すれば削除完了です！
後始末はここまでです！
お疲れ様でした！
最後に
今回は「gatsby + netlify + shopify + contentfulで連携しながらサイトを作成」をしてきました。
だいぶ長かったので疲れたと思います。
本当にお疲れ様でした！
結構長かったと思いますが、一通り手順を確認できたと思います。
これをスタートにしてぜひもっと理解を深めていただけると、僕的にも嬉しいです！
普段はPythonについての記事を書いているので、気になる記事があればぜひ参考にしてください。
何か質問などがあれば下のTwitterのDMやここのコメントから質問してください！
それでは！
Gatsby+Contentful+Netlyfyを学ぶならこちらがおすすめ！（Clickできます）
参考サイト
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法
[JAMstack]Gatsby + Netify + Contentfulの構成を試してみた
高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学
