BLOG

最近個人ブログに導入したFront Matter CMSが便利だったので紹介します。

Front Matter CMSとは？

Front Matter CMSは静的サイトジェネレータ向けHeadless CMSです。ただのVS Code拡張なので既存のサイトでも簡単に導入できます。シンプルかつカスタマイズが可能なので、マークダウンで記事を管理している個人ブログと非常に相性がいいです。

AstroにFront Matter CMSを導入してみる

Astro公式Front Matter CMS Integrationに導入方法が書いてあるのでこれに従って導入します。

とはいえfrontmatter.jsonを書くだけなので、他のフレームワークにも簡単に導入できそうです。

ダッシュボード

Front Matter CMSのダッシュボードはこんな感じです。

各記事のOGP画像、公開日、タイトルが一覧で見れます。クリックすると各記事のMarkdownファイルに飛ぶこともできます。

Front Matterの編集

サイドパネルでMarkdownのFront Matterを編集できます。nowを押すと現在時刻（UTC）が自動で入ったり、OGP画像をプレビューできたりします。

コマンド

開発サーバーの起動やVSCode上でのプレビュー表示などがワンクリックでできます。

不要なコマンドは非表示にできます。

{
  "frontMatter.panel.actions.disabled": ["optimizeSlug", "openDashboard"]
}

カスタムスクリプト

個人的にかなり気に入っている機能です。カスタムスクリプトをコマンドに追加することができます。このブログではAWS LambdaでOGP画像を自動生成するで作成したAWS Lambda関数をコマンドで呼び出せるようにしています。

{
  "frontMatter.custom.scripts": [
    {
      "id": "generate-og-image",
      "title": "OGP画像を生成",
      "script": "./scripts/generate-og-image.ts",
      "command": "bun"
    }
  ]
}

コンテンツ作成時にカスタムスクリプトを呼び出すこともできます。

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "blog",
      "postScript": "generate-og-image"
    }
  ]
}

@frontmatter/extensibilityを使うと、TS/JSでカスタムスクリプトを簡単に書けます。

import { ContentScript } from "@frontmatter/extensibility";

const args = ContentScript.getArguments();

// args.frontMatterでFront Matterを取得できる

...

ContentScript.done("OGP画像を生成しました"); // ユーザーに通知する

まだ開発途中なのか、ContentScript.updateFrontMatter()はモックだったので、Front Matterの更新にはgray-matterを使いました。

今回参考にした記事

Front Matter CMSのおすすめ設定

VS Code拡張機能「Front Matter CMS」の便利な設定やスニペットの使い方などを解説します。 スニペットについては、AstroのImageコンポーネント自動挿入用スニペットを例に解説しています。

https://voltaney.com/posts/astro-frontmatter-cms/

あとがき

Front Matter CMSによってブログが前より手軽に書けるようになりました。他のHeadless CMSに比べて導入ハードルが低く、機能面でも個人ブログ程度の規模なら必要十分感があります。個人ブログをマークダウンで書いている方はぜひ一度試してはどうでしょうか？