🪜

SSG ツール lume のここが凄い

に公開

これは、 Deno Advent Calendar 2025 の1日目の記事です。

lume の簡単な紹介

https://lume.land/

html の構造とコンテンツを別々に書ける

上で紹介した lume.land のページ自体が lume で作られているので、実際にコードを見ながらイメージを掴んでみましょう。

例えば https://lume.land/docs/overview/about-lume/ のコンテンツの内容は、
https://github.com/lumeland/lume.land/blob/7f7600578630fce8884056f1316260309ab57a94/docs/overview/about-lume.md
と、
https://github.com/lumeland/lume.land/blob/main/_includes/layouts/docs.vto
の組み合わせになっています。

.vto というのは lume の作者である oscarotero 氏必要に迫られて独自に開発、メンテしているテンプレートエンジン vento です。
https://vento.js.org/
(vento は lume と独立してリリースされているので lume 以外からも使用可能です。)

コードを見ていただければ一目瞭然ですが、 html の中に {{ description |> md }} のような記述をすることで別途 yaml や markdown で書いたドキュメントファイルを流し込むことができます。
もちろんループやページングも表現できますし、別のリポジトリや fetch など様々な手段でドキュメント、テンプレートのいずれも取り込み、 lume のエンジンで料理できます。

このように文言と html を別々にすることで、本文を markdown で書くことも可能ですし、日英両対応のページも管理しやすくなります。

また、 lume cms ではこのように文言を分離した上で文言部分だけをブラウザからオンラインで編集できます。 headless cms のような柔軟性を単一リポジトリ、単一サーバでコンパクトに実現できます。

blog 的なものももちろん作れます。こちらは実際に lume でビルドされている blog です。
https://lume.land/blog/

ソースコードがありますのでこれも見てみましょう。
このリポジトリには markdown ファイルと添付画像が含まれているだけで、 vto のようなテンプレート部分がありません。
_config.ts を見ると、 .use(blog()) となっており、 blogdeno.jsonimportslumeland/theme-simple-blog への参照となっています。テンプレートは別リポジトリになっているわけですね。
こうすれば theme-simple-blog を使い回して複数の blog を運用したりすることも出来ます。

このような柔軟な運用が、 theme 機能を特別に用意してあるわけでなく、 lume のアーキテクチャの柔軟性の上で自然と実現できてしまうのです。ここが lume の推しポイントです。

JSX + tailwindcss もいける

古き良き html+css よりも流行りの技術でフロントエンドをデザインしたい!というアナタもご安心ください。 lume は jsx, tsx から SSG で html 生成したり、 tailwindcss v4 に対応するプラグインをご用意しております。 daisyui もバッチリ使えます!
https://lume.land/plugins/jsx/
https://lume.land/plugins/tailwindcss/

フロントエンドコードもビルドして組み込める

esbuild プラグインを使えば typescript で書いたコードをブラウザ用にビルド出来ます。 deno の仕様通りに deno.jsonimports を使うことも出来るし、 https:npm: を使うこともできます。

import {encode, decode} from "https://cdn.jsdelivr.net/npm/@msgpack/msgpack@3.1.2/dist.esm/index.mjs"
// or
import {encode, decode} from "npm:@msgpack/msgpack"

ところで Deno 2.4 で bundle がめでたく復活したので、 esbuild より Deno.bundle を使えればより一層 Deno native な開発体験になると思い、手元でチャチャっとプラグインを書いてみたのですが、 lume build は通るのに lume serve では bundle が出来ない、という現象が発生。調べてみると lume serve 時にはビルドが Worker 内で実行され、 Worker 内では Deno.bundle が実行できない、ということが判明しまして。しかしドキュメントにもそんなことはどこにも書いてないし、これは一体どうしたことか?と、 deno のソースコードを調査するように copilot 君に依頼したら案外シンプルに解決できるっぽい、という結果が上がってきたので pullreq を作ってみたらシュッとマージされました! deno contributor badge を get!

https://github.com/denoland/deno/pull/31316

執筆時点ではまだマージされたバイナリがリリースされてませんが、リリースされたらこちらも使ってみてください。
https://github.com/kuboon/lume-bundle-plugin

ハートレイルズ

Discussion