LumeCMSを使ってみた

Deno製SSGのLumeにLumeCMSというCMSがいつの間にかリリースされてたので試してみました。
LumeCMSといってもファイルベースのCMSなのでプレビューなどの連携を除けばSSG全般に使えるように作っているみたいです。

既存のLumeプロジェクトに導入

公式ドキュメントに従って、
プロジェクトに設定ファイルを追加します。

_cms.ts

import lumeCMS from "lume/cms.ts";

const cms = lumeCMS();

// 設定

export default cms;

deno task lume cmsで立ち上げます。

$ deno task lume cms
# ...
> CMS server started at:
> http://localhost:3000/admin (local)
> http://192.168.128.124:3000/admin (network)

http://localhost:3000/adminで管理画面にアクセスできるようになりました。

管理する記事を設定

posts配下にカテゴリごとのディレクトリを置いてその中に記事を置いていく運用なのでそれに合わせて設定していきます。

// storageを設定
cms.storage("root", ".");

for await (const categoryDir of Deno.readDir("posts")) {
  if (!categoryDir.isDirectory) {
    // ファイルはスキップ
    continue;
  }

  const categoryPath = `posts/${categoryDir.name}`;
  const categoryData = parse(
    await Deno.readTextFile(`${categoryPath}/_data.yml`),
  ) as { category: string };

  // カテゴリーごとのcollectionを定義
  cms.collection(categoryData.category, `root:${categoryPath}/*.md`, [
    "title: text",
    "content: markdown",
  ]);
}

設定ファイル内にカテゴリを列挙してもいいんですが実際のディレクトリやデータファイルから生成したほうが便利なので、ディレクトリを読み取って_data.ymlを元にコンテンツ管理の単位となるCollectionを定義してみました。

cms.storage("root", ".");で定義しているStorageはLumeCMSの読み書き領域で、Collectionや後述するUploadで使うディレクトリはStorageの範囲内である必要があります。

デフォルトでプロジェクトルートがsrcというStrageとして登録されるので別に定義しなくてもいいみたいですが、なんのこっちゃわからなくなりそうなので明示的に定義しています。

これでカテゴリ一覧やカテゴリごとの記事、新規作成編集画面が表示できるようになりました。プレビューを表示できるのがいいですね。

カテゴリ一覧

記事編集

ファイルアップロードの設定

cms.upload("images", "root:images");

先ほど設定したrootストレージ内のimagesディレクトリにimagesというUploadを設定しました。
これだけで記事のエディタから画像の追加やファイルのペーストをできるようになります。

おわりに

2024年5月現在LumeCMSは開発初期で機能が追加されていくみたいですが、すでにかなり使えると思いました。
簡単にコンテンツ領域を動的に定義できるのがいいですね。SSGの管理のためにvscodeをガチャガチャ設定してたりしたんですがこれに乗り換えていこうと思います。