1. Nuxtプロジェクトを用意する

$ npx create-nuxt-app microcms-nuxt-jamstack-blog

ここでは設定項目は以下のようにします。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ab6d7427-fe49-46c6-b4d5-5b15bd1b19a1/_2021-06-16_22.36.10.png

下記のコマンドで開発環境が立ち上がります。

$ cd microcms-nuxt-jamstack-blog
$ npm run dev
localhost:3000

にアクセスすると下記が表示されます。

https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms/media/microcms-nuxt-jamstack-blog-02.png

2. microCMSの用意をする

アカウント登録

ログイン

サービスの作成

サービスIDは一度設定すると変更ができないので、慎重に決めましょう。

APIの作成

いよいよBlog用のAPIを用意していきます。

https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms/media/microcms-nuxt-jamstack-blog-03.png

リスト形式を選択します。