【初心者】いまさら microCMS に入門する

1. はじめに

• 業務でちょっとしたWebサイトを作ろうみたいな話があったが、自分はWordPressしかやったことがなく、最近の構成に全くついていけていない。
• ヘッドレスCMSの中で、一番とっつきやすそうな microCMS を使ってWebサイトを作成し、基本的な仕組みや作業の流れを確認する。

2. やったこと

microCMSを使ってサンプルブログサイトを作成、公開する。

• microCMS にユーザ登録する。
• microCMS でサービス（ブログ）を作成し、ブログテンプレートをGitHubに展開する。
• PC(wsl)の検証環境で、ブログが表示できることを確認する。
• microCMSでブログ記事を追加する。
• ブログテンプレートをVercelにデプロイして、ブログをインターネット公開できることを確認する。

3. 構成図

4. 手順

4.1 事前準備

• microCMS 登録用の gmail アドレスの作成
• microCMS/Vercel 連携用の GitHub アカウントの作成

4.2 microCMSユーザ登録

• 「microCMSのユーザ登録画面」でユーザ登録する。

4.3 microCMS 初期設定

• ユーザ登録すると、そのままサイト作成手順に遷移する。初心者なので「テンプレートから選ぶ」を選択する。

• おすすめのテンプレート一覧が表示されるので、一番シンプルそうな「シンプルなブログ」を選択する。

• 「シンプルなブログ」は、Next.js で構成され、記事、タグ、ライターなどの情報を管理できることを確認し、「このテンプレートを利用」を選択する。

• テンプレートの資材をGitHubリポジトリで管理するため、GitHubとの連携設定を行う。

• 既存のGitHubアカウントを入力し、「Authorize microcmsio」を選択し、連携設定を行う。

• Git ScopeにGitHubアカウント名、リポジトリ名にリポジトリ名（シンプルなブログの資材展開用に新規作成）を入力し、「セットアップを開始する」を選択する。

• セットアップが完了し、microCMS側でサービスIDとAPIキーが発行される。

• GitHub側でもリポジトリ（今回はプライベートリポジトリ）が作成され、資材が展開されていることを確認する。

• microCMSの管理画面で、サービス「シンプルなブログ」ができていることを確認する。

4.4 ローカル開発環境の準備

READMEに従ってまずはローカル開発環境を準備する。開発環境は、今回はWindows11内のWSL(Ubuntu)を使用。

• GitHubの資材をクローンする。

$ git clone [e-mail]:[github-account]/microcms-blog.git
$ cd microcms-blog

• 環境設定ファイル(.env)を作成する。MICROCMS_API_KEYとMICROCMS_SERVICE_DOMAINの値は、microCMSの管理画面で参照可能。

.env

MICROCMS_API_KEY=xxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx
BASE_URL=http://localhost:3000

• ローカル環境(http://localhost:3000)でブログ画面が見えることを確認する。（記事は作ってないのでまだ一つもない状態）

$ npm install
$ npm run dev

4.5 テスト用記事の作成

microCMSの管理画面から、テスト用の記事を作成する。

• 「シンプルなブログ」では、タグ、ブログ（記事）、ライター（記事執筆者）の3つを作成できる（最初は何もない状態）。ブログにタグとライターを設定したいため、タグとライターを先に作成する。

• タグを適当に作成する。

• ライターを適当に作成する。

• ブログ（記事）を適当に作成する。ブログ（記事）に対して、あらかじめ作成したタグ（園芸）とライター（鈴木二郎）を設定する。

• ローカル環境(http://localhost:3000)で、作成したブログが表示されることを確認する。

4.6 本番環境（Vercel）へのデプロイ

• 「Vercelの GitHub 連携画面」から、VercelとGitHubの連携を行う。「Continue with GitHub」を選択する。

• Vercelとの連携を許可する。許可後、Vercel側にもアカウントが作成され、GitHubアカウントでログインしている状態になる。

• Import Git Repository - Install を選択する。

• 作成したリポジトリ「microcms-blog」を選択し、Vercelからのアクセスを許可する。

• リポジトリが選択されたことを確認して、「Import」を選択する。

• MICROCMS_API_KEYとMICROCMS_SERVICE_DOMAINの値を設定し、「Deploy」を行う。

• 「https://XXXXX.vercel.app」という、Vercelから割り当てられたURLで、インターネットからアクセスできることを確認する。

5. 所感

• まずは microCMS、GitHub、Vercelのそれぞれのどこで何をしているのかなんとなく分かったが、、、フロントエンドの勉強が必要とあらためて感じた。

6. 参考

• 基本的には公式のこちらのブログを参照して進めた。