こんにちは、柴田（@shibe97）です。
突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！

リポジトリはこちら。
https://github.com/microcmsio/microcms-blog

経緯

microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。
しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。
ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。

そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。

microCMSブログはデータソースとしてmicroCMS、フロントエンドとしてNuxt.jsを利用して作られています。
フロントエンドとバックエンドが分離しているため、記事コンテンツを含んでいないフロントエンド部分のソースコードのみ公開することが可能になります。

microCMSブログのAPIスキーマと同構成を用意することで、データソースの差し替えを簡単に行うことができます。
（APIスキーマ情報もすべてリポジトリのREADMEに公開してあります）

また、microCMSブログのソースコードのライセンスはApache License 2.0としています。
複製・改変・商用利用自由です。

CSSで見た目のみ変更して、実案件に利用しても問題ありません。
Jamstackのリアルなテンプレートの一つとしてご自由にお使いいただければと思います。

機能

現状、microCMSが有している機能は以下になります。

• 記事一覧
• 記事詳細
• カテゴリー別記事一覧
• 人気の記事一覧
• 最新の記事一覧
• 検索
• パンくずリスト
• 目次
• 著者
• SNSシェアボタン
• 下書きプレビュー
• 関連記事
• バナー
• サイトマップ
• Google Analytics
• RSS
• PWA

機能リクエストがあったらください。実装検討いたします！
また、実際使わない機能も諸々あると思いますので、そのあたりは適宜削除していただければと思います。

使い方

実際にどうしたらmicroCMSブログのクローンを作れるのかをドキュメントにまとめました。
https://document.microcms.io/tutorial/nuxt/microcms-blog-clone

ざっくり手順としては以下のようになります。

1. GitHubからリポジトリをclone
2. microCMSのサービスを作成し、microCMSブログに合わせて指定のAPIを用意する
3. コンテンツをいくつか入稿する
4. 環境変数にサービスID、APIキー、Google Analytics IDを定義

おそらく10分程度で完了できるかと思います。

おわりに

Jamstack構成のサイトは一部実装が複雑な部分がありますが、ロジックは一度組んでしまえば再利用可能なものです。
実際に動くソースコードが手元にあるだけで理解も進みやすいと思うので、ぜひご活用いただければと思います。

また、今回公開したのはプロダクション環境で動いているソースコードなのでマーケティング用の計測コードなどもすべて含まれています。そういった意味でも色々と参考になるかもしれません。

商用利用される際には、microCMSはStandardプラン以降をご利用ください。

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！