microCMSブログをオープンソース化しました。
microCMSブログのコンテンツはmicroCMSで管理されています。

本チュートリアルでは、ご自身で作成したmicroCMSサービスと連携することでmicroCMSブログのクローンを作成します。

microCMSブログのライセンスは Apache License 2.0 となっており、改変・複製・商用利用は自由となります。本チュートリアルを終えられた後、見た目を変更して、商用利用いただくことが可能です。ぜひご活用ください。

技術構成

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

• Nuxt 2（フレームワーク）
• microCMS（コンテンツ管理）
• Netlify（ホスティング、サーバーレスファンクション）
• ESLint
• Prettier
• PostCSS
• PWA

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

はじめに

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

microCMSのセットアップ

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

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

実装

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

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

$ 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の部分はご自身のデプロイ先ドメインに置き換えてください



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

デプロイ

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

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



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

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



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

上記の設定をスキップしてしまった場合でも、「Site configration > Environment variables」にていつでも変更可能です。

microCMSとの連携

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



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



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