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等お待ちしております。