microCMS

よくある質問
チュートリアル
操作マニュアル
コンテンツAPI
マネジメントAPI（ベータ）
画像API

microCMSブログのクローンを作る

microCMSブログをオープンソース化しました。
microCMSブログのコンテンツはmicroCMSで管理されています。
本チュートリアルでは、ご自身で作成したmicroCMSサービスと連携することでmicroCMSブログのクローンを作成します。

Information

microCMSブログのライセンスは Apache License 2.0 となっており、改変・複製・商用利用自由です。
本チュートリアルを終えられた後、見た目を変更して実際に商用利用いただいても問題ございません。

技術構成

microCMSブログは下記の技術構成となっています。

  • Nuxt（SSG）
  • microCMS（コンテンツ）
  • Netlify（Hosting, Functions）
  • ESLint
  • Prettier
  • PostCSS
  • PWA


※ 本ソースコードを完全に動作させるためにはNetlifyにホスティングする必要があります。

はじめに

microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
Nuxtで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。

はじめに
https://document.microcms.io/manual/getting-started

microCMSのセットアップ

microCMSブログに合わせたAPIを作成していきます。
作成時に必要となるAPIスキーマ情報は、GitHubのREADME内に記載していますので、そちらを参照いただき設定をお願いします。

GitHub - microcmsio/microcms-blog: microCMS official blog
https://github.com/microcmsio/microcms-blog#microcmsのapiスキーマ設定

これら全てのAPIに対し、コンテンツをあらかじめいくつか入稿しておいてください。

実装

まずはGitHubからmicroCMSブログのソースコードをcloneしましょう。

GitHub - microcmsio/microcms-blog: microCMS official blog
https://github.com/microcmsio/microcms-blog

ソースコードを落としてきた後はパッケージのインストールを行います。

$ npm install


環境変数

次に下記の項目を環境変数として定義します。
プロジェクトルートに.envファイルを作成し、以下の項目を設定してください。

  • API_KEY（microCMSのAPIキー）
  • SERVICE_ID（microCMSのサービスID）
  • GTM_ID（Google Tag ManagerのID）※任意

例:

API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
SERVICE_ID=your-service-id
GTM_ID=GTM-xxxxxxx


これで準備が整いました。
下記コマンドを叩いて開発環境を起動し、localhost:3000 にアクセスしてみましょう。

$ npm run dev


実際にご自身でmicroCMSに入稿したデータが表示されていれば成功です。

検索機能

microCMSブログでは記事検索時はクライアントサイドからNetlify Functions経由でmicroCMSの全文検索APIを呼び出しています。
Netlify Functionsは下記のコマンドでローカルでも起動させることができます。

$ npm run functions:serve


functionsを起動した状態であれば検索モジュールをローカルでも動作させることができます。

下書きプレビュー機能

検索と同様、下書きプレビューの際もNetlify Functions経由でmicroCMSの下書きAPIを呼び出す形にしています。
こちらもfunctionsを起動した状態で/draft/?id={CONTENT-ID}&draftKey={DRAFT-KEY}にアクセスすることでローカルでもプレビューが可能です。

また、Netlifyへのデプロイ後はmicroCMSの管理画面にて「API設定 > プレビュー」で下記のように設定しておくことで、管理画面の画面プレビューボタンから下書きプレビューが見られるようになります。
※ example.comの部分はご自身のデプロイ先ドメインに置き換えてください



プレビューについてはこちらの記事もご参考ください。

microCMSとNuxtでプレビュー画面を作成する
https://blog.microcms.io/nuxt-jamstack-preview/

デプロイ

デプロイはNetlifyに行いましょう。
アカウント登録し、GitHubのリポジトリを連携するだけでビルド＆デプロイしてくれる便利なサービスです。
Webhookも備えているので、microCMSの管理画面にてコンテンツを公開したのをフックにビルド＆デプロイをさせることも可能です。

Netlify: Develop & deploy the best web experiences in record time
https://www.netlify.com/

連携時のビルドコマンドには次のように設定します。



このコマンドを設定することで、NuxtのSSGとNetlify Functionsの起動を行うことができます。

次に、「Show advanced」ボタンを押すと詳細な設定が可能となるので、こちらで環境変数の設定を行います。
（.env はGitHubにPushされないのでNetlifyは環境変数の中身を知ることができません。そのためNetlify側でも設定が必要です。）



ここまで設定ができたら「Deploy site」ボタンをクリックして実際にデプロイしてみましょう。
無事にデプロイできれば成功です。

上記の設定をし損ねてしまった場合でもNetlifyの「Site settings > Build & deploy 」にていつでも変更可能です。

microCMSとの連携

現状ではGitHubにPushしなくてはビルド＆デプロイが行われません。
そこで、記事を公開するたびに自動的にNetlify側でビルド＆デプロイを走らせるための設定を行います。
まず、Netlifyの「Site settings > Build & deploy > Build hooks」にてWebhookを作成します。



今度はmicroCMS管理画面の「ブログ > API設定 > Webhook」にてNetlifyを選択し、上記で生成したWebhook URLを設定します。



以上で、microCMSにてコンテンツを公開・削除する度に自動的にNetlifyがビルド＆デプロイを行ってくれるようになります。

さいごに

もしバグなど発見しましたらIssue登録、Pull Request等お待ちしております。