この例はこちらの Static Generation を元に作成した microCMS 用のサンプルプロジェクトです。
https://cms-microcms.vercel.app/
- WordPress
- Sanity
- TakeShape
- Prismic
- Contentful
- Strapi
- Agility CMS
- Cosmic
- ButterCMS
- Storyblok
- GraphCMS
- Kontent
- Blog Starter
Once you have access to the environment variables you'll need, deploy the example using Vercel:
とりあえずこのレポジトリをcloneして使ってください。 フォークでもいいです。
git clone git@github.com:saniman/cms-microcms.git
最初に, microCMSのアカウント作ります.
その後に新しいコンテンツ(API)を作成してください。
管理画面からコンテンツ(API)を新たに作成します。
- APIのエンドポイントの名前は
Author
にしてください。
次に下記のAPIスキーマを追加してください。
Name
- テキスト フィールドPicture
- 画像 フィールド
管理画面からコンテンツ(API)を新たに作成します。
- APIのエンドポイントの名前は
Post
にしてください。
次に下記のAPIスキーマを追加してください。
Title
- テキスト フィールドContent
- テキストエリア フィールドExcerpt
- テキスト フィールドCover Image
- メディア フィールドDate
- 日時 フィールドAuthor
- コンテンツ参照 フィールド
コンテンツ(API)メニューから先ほど作成したAuthorメニューを選んで内容を入力しましょう。
- ダミーのデータを入れてもいいでしょう
- イメージデータはこのサイトから使ってもいいでしょう Unsplash.
次にコンテンツ(API)メニューから先ほど作成したPostメニューを選んで内容を入力しましょう。
- ダミーのデータを入れてもいいでしょう
- Content フィールドにはマークダウンも使えます。
- イメージデータはこのサイトから使ってもいいでしょう Unsplash.
- Author フィールドには先ほど作成したAuthorコンテンツから選択できます。
重要: 作成した内容をサイトで公開するには公開ボタンを押す必要があります。
コンテンツ(API)メニューを選択した状態で上部に表示される[APIリファレンス]メニューから[ヘッダー]の箇所にある
X-API-KEY
をコピーしましょう
次に .env.local.example
をコピーして .env.local
を作成します (自動的にGitのコミットからは除外されます):
cp .env.local.example .env.local
環境変数を .env.local
に入力します:
API_KEY
X-API-KEYを入力します。API_URL
mirsoCMSのAPI URLを入力します。(https://xxx.microcms.io/api/v1/)SERVICE_ID
mirsoCMSのAPIエンドポイントを入力します。(exampleなど)
.env.local
ファイルは下記のようになります。
API_KEY=...
API_URL=...
SERVICE_ID=...
npm install
npm run dev
# or
yarn install
yarn dev
[http://localhost:3000]で起動します。(http://localhost:3000)!
microCMSは下書き保存することによって投稿を下書き状態にすることができます。
ローカルで開発をしている場合でも下記のURLで下書きの投稿をプレビューして確認することができます。 下記のURLを[API設定]の画面プレビューに入力フィールドに追加します。
http://localhost:3000/api/preview?id={CONTENT_ID}&draftKey={DRAFT_KEY}
Vercelなどの本番環境にデプロイしたらlocalhostの部分は使っているドメインに直して入力し直しましょう。
http://yourdomain.com/api/preview?id={CONTENT_ID}&draftKey={DRAFT_KEY}
{CONTENT_ID}
はコンテンツのIDが付与されます。{DRAFT_KEY}
は下書き状態の記事のキーが付与されます。
プロジェクトの公開はVercelで簡単にできます。 Vercel (Documentation).
ローカルのプロジェクトは GitHub/GitLab/Bitbucket または import to Vercelを使って公開できます.
重要: Vercelを使って公開する場合はVercelのプロジェクト内の Environment Variables(環境変数) に .env.local
ファイルと同じ内容の変数をセットする必要があります。.