🚶‍♂️

フロントエンドには最適なCMSかも？microCMSのすゝめ

8zk

2024/12/27に公開

microCMS

tech

みなさん、こんにちは。

Spacemarketのフロントエンドエンジニアの8zkです。
エンジニアたるもの日々のアウトプットは欠かせないものですが、会社のブログ以外にも自分のブログにしょうもないこと書きたいな〜という時ありませんか？

そんなこともあり個人ブログを作ろうと思ったのですが、今どきWordPressを使ってブログを書くのもフロントエンドエンジニアとしてはイマイチだし、かといってWordPressのようなリッチな管理画面を作るのも面倒だし・・・ということで色々と思い悩んでいたのですが、ついに良いものを見つけました！

 それがmicroCMSです！https://microcms.io/
他のCMSと比べて優れている点はこちらです。
日本製
記事のCRUDがAPIベース
好きな言語で作れる
まず初めに 日本製 だということ。

他のライブラリはほとんど外国製のライブラリのため、日本に生まれ、日本語に慣れ親しみ、日本語しかできない（悲）私にとってドキュメントが読みやすいのはとっても嬉しいポイントです。
次に 記事のCRUDがAPIベース だということ。

せっかくブログを作るなら自分の好きなライブラリ上で作りたいと思います。

普通のWebアプリを作るようにAPIをcallするだけなので、これもとても嬉しいポイントです。
最後に 好きな言語で作れる ということ。

私はTypeScriptしか書けないのでWordPressのようにPHPで書いてねと言われても残念ながら雰囲気しかわかりません（悲）
なのでmicroCMSはフロントエンドしかやってきていない英語が苦手な私にとって最高のCMSなのです。

 セットアップということで早速始めて見ましょう！まずトップページ(https://microcms.io/)へ行きます。
無料ではじめる をクリックします。
メールアドレス、パスワードを入力して アカウントを登録する clickすると・・・
アカウントが作成されます！

アンケートが表示されますが、これからお世話になるのでできるだけ協力しましょう。
一から作成しても良いですが、素晴らしきエンジニアさま達が沢山のテンプレートを用意してくれているので、テンプレートから選ぶ を選択します。
その中で今回はmicroCMS公式が作った シンプルなブログ というテンプレートを選択します。

このテンプレートはNext.jsで、しっかりApp Router使っています。

コードが普通に勉強になります。ありがたや。
このテンプレートを利用 をクリックします。
プレビュー でUIを確認することもできます。
次に GitHubと連携 をクリックします。
ここで自分のGitHubのアカウントと紐付けを行います。
GitHubのemail、passwordを入力すると2段階認証が要求されます。
2段階認証としてSMSを送ります。
Authentication code を入力し
Authorize microcmsio をクリックすると・・・
元の画面に戻ります。
そこでGit Scopeとリポジトリ名を入力します。

私はリポジトリ名を 8zk-blog にしました。そして セットアップを開始する をクリックします。
これでmicroCMS・GitHubセットアップ完了です。
次にGithubで作成されたリポジトリ（8zk/8zk-blog）をクリックします。
こちらはmicroCMSで選択したtemplateのソースコードです。

なので自分のローカルにcloneします。
README.md に必要な設定の仕方が書かれているので、その通りに設定します。
MICROCMS_SERVICE_DOMAIN は最初ランダムな文字列が設定されているので、それをmicroCMSのダッシュボード上(https://{service-domain}.microcms.io/settings/service-id)で好きなものに変更します。

今回は 8zk-blog に変更しました。
その後 npm i やら npm run dev をすると、、、
空のブログが localhost:3000 上に表示されました！
まだ記事がないのでさっそくmicroCMS上で記事を投稿してみましょう。
https://{service-domain}.microcms.io/apis/blog/create にアクセスするとこちらの画面が表示されます。
ここで タイトル と 本文 を入力し、 公開 をclickします。

そうすると・・・
無事、はじめての投稿が表示されました！
今回作業したgithubのリポジトリはこちらです。

よければ参考に覗いてみてください！
この記事では導入までを触れてみましたが、他にもtagやuserの設定、権限、環境設定などを行うことができます。

みなさん、microCMSを使って気軽にブログを作ってみてはいかがでしょうか？

 さいごにスペースマーケットでは、一緒にサービスを成長させていく仲間を探しています。

話を聞いてみたい、ちょっとだけ興味がある、などでも大歓迎です！

ご興味ありましたら是非ご連絡ください！