microCMSでブログサイトを作ってみました。

フロントエンドエンジニアの岸です。
日本製ヘッドレスCMS「microCMS」がいい感じとのことなのでブログサイトを作成してみました。
microCMSの説明や作成した感想などを軽く紹介したいと思います。

ヘッドレスCMSとは

ヘッドレスCMSとは、コンテンツを管理するバックエンド機能のみを提供しているCMSのことです。
表示の実装は別途必要となりますが、フロントエンドとバックエンドが分離されることで開発がしやすくなります。
Next.jsなどの技術を使用してJamstackと呼ばれる構成にすることで表示速度がかなり速くなります。
microCMSの他には、Contentful、GraphCMS、NetlifyCMS、WordpressCMS、などがあります。

作成方法について

作成方法については公式サイトで記事が用意されているので手順通りに行えば公開できます。

microCMS + Next.jsでJamstackブログを作ってみよう
https://blog.microcms.io/microcms-next-jamstack-blog/

他のヘッドレスCMSと違ってネイティブな日本語で説明されているのでかなりわかりやすいです。
この記事では microCMS / Next.js / Vercel という構成なのでそれぞれ簡単に説明します。

microCMS
日本人の方が運営しているヘッドレスCMSです。
記事の管理を行い、APIを発行します。

Next.js
Reactのフレームワークです。
APIのデータを取得して静的ファイルを生成、表示など行います。

Vercel
ホスティングサービスです。
git pushでビルド、デプロイなど行います。

APIキーの仕様変更が行われた

久しぶりに起動しようとするとなぜかAPIが使用できなくてハマりました。
去年の秋にAPIキーの仕様が少し変わったようで、従来のものが廃止も検討されてるとのことです。
以下の記事を参考にしてください。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。
https://blog.microcms.io/renew-x-microcms-API-key/

感想

公式の手順通りに行うだけで公開までできました。
バックエンドの機能はmicroCMSが提供してくれるので、実装はフロントエンドだけで完結しました。
Next.jsで静的サイトとして生成できるのでページの切り替りもかなり速いです。

管理画面もシンプルで見た目も良くて使いやすいです。
全てが日本語なので初めての方でも安心して操作できるかと思います。

ただしWordpressと比較するとカスタマイズにハードルがあります。
表示が分離されていてWordpressでいう固定ページにあたるものがないので、ちょっとした変更でも開発者に依頼が必要です。

自身で開発行えるか、投稿コンテンツ以外の更新頻度が少ないサイトなどだと導入しやすいと思います。

導入事例一覧もあるので実際に表示速度を体感してみてください。

導入事例一覧
https://microcms.io/projects

この記事を書いた人

フロントエンドエンジニア 岸

京都オフィスに勤務するフロントエンドエンジニア/デザイナー。コーダーの業務領域もカバーしつつ、ReactなどのJavaScriptのフレームワーク・ライブラリを使った開発業務を行っている。

投稿者の記事一覧を見る

2022年06月03日

記事のカテゴリ：Webシステム開発

STAFF募集

求人採用のお問い合わせ、ご応募はX（旧Twitter）とFacebookでも随時受付中です。

• 
•