microCMS + Gastbyでブログ構築（その１）

従来、Webサイトやアプリケーションなどのコンテンツを作成・編集・管理するためのシステムとして、CMS(Content Management System)が用いられてきました。その中でも、WordPressは最も有名でしたが、ヘッドレスCMSという新しい形態のCMSが登場したことで、Web開発の世界ではCMSの選択肢が広がっています。今回は、国産Headless（ヘッドレス）CMSのmicroCMSとGatsbyを使ってブログ環境を構築しましょう。

microCMSは、国産のHeadless CMSでAPIを通じてコンテンツを管理することができる、Headless CMS(ヘッドレスCMS)の1つです。コンテンツの作成・編集・管理に特化した機能を備え、開発者が自由にデザインやフロントエンドの実装を行うことができます。また、REST APIやGraphQL APIにも対応しており、様々なアプリケーションやWebサイトに適用することができます。

公式サイト

microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

https://microcms.io

また、Headless（ヘッドレス）CMSの比較は、以下の記事を参考にしてください。

Headless（ヘッドレス）CMSを比較する - omniSENSE | Webエンジニア情報共有

omniSENSEはWebエンジニアの為の情報共有サイトです。React/Next.jst/NestJSなどJavaScriptの情報を中心に発信をしています。

https://blog.omni-sense.jp

Gatsbyは、Reactで作られた静的サイトジェネレーターです。Gatsbyは、Reactで作られたWebアプリケーションを、静的なHTML/CSS/JavaScriptのファイルに変換することができます。これにより、高速で安定性の高いWebサイトを構築することができます。Gatsbyは、プラグインの形で拡張性が高く、様々な要件に対応することができます。

公式サイト

The Fastest Frontend for the Headless Web | Gatsby

Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.

https://www.gatsbyjs.com

microCMS + GatsbyでJamstackなブログ環境を作るメリットは以下の通りです。

• フロントエンドとバックエンドが分離されるため、開発が効率化される
• Jamstackの特徴である高速化・安定性が実現できる
• microCMSの豊富な機能を活用して、柔軟かつ高品質なコンテンツを作成できる
• Gatsbyの豊富なプラグインを活用して、開発の幅が広がる

まずは、ベーストなるGatsbyをインストールしてプロジェクトを作成します。

事前にNode.jsのインストールが必要です。Node.jsのバージョンは18.0.0以上にしましょう。Node.jsのインストールは以下の記事を参照してください。

VoltaでNode.jsバージョン管理 - omniSENSE | Webエンジニア情報共有

omniSENSEはWebエンジニアの為の情報共有サイトです。React/Next.jst/NestJSなどJavaScriptの情報を中心に発信をしています。

https://blog.omni-sense.jp

• Gatsby CLIをインストールする

npm install -g gatsby-cli

• 新しいGatsbyプロジェクトを作成する

gatsby new my-blog

• 作成したプロジェクトのディレクトリに移動して、ローカルサーバを起動

cd my-blog
gatsby develop

• ブラウザで以下にアクセスして確認

http://localhost:8000

Welcom to Gatsbyが表示されれば成功です。

次回は、microCMSとGatsbyを連携させます。