Lume（Denoの静的サイトジェネレーター）を触ってみる

Deno向けの静的サイトジェネレーター。deno-jaにユーザがいて気になっていた。

https://lume.land/

https://github.com/hashrock-sandbox/study-lume-tsx

とりあえずinit.

deno run -A https://deno.land/x/lume/init.ts

めっちゃいっぱいプラグインがある。
freshと似た感じで使いたいのでwindi_cssのみ選択。

今いるディレクトリに展開される。

ファイル数がかなり少ないのは好印象。

index.mdを配置して deno task serveしてみる。

できた。出力されたファイルは見た感じwindi_cssとlivereloadが仕込まれてる感じ。

Markdown中でもwindi_cssのクラスが使えている。

さてレイアウト。

公式はNunjucksを推している。聞いたことなかったけどMozillaのテンプレートエンジンらしい。

使い方は馴染みのある感じでfrontmatterにlayoutで紐づける。

とはいえいつもの道具に寄せたいので、layoutにJSXを使おう。

ここにある通りの設定を行う。
（後で気づいたけど、init時のpluginでJSXを選べばよかった）

https://lume.land/plugins/jsx_preact/

• compilerOptionsの追加
• _config.tsでjsxプラグインのインポート

できた。

コンポーネントのimportもしてこれる。

SSGなのでもちろんインタラクティブなコンポーネントとかは無理（なはず）
そういうことをしたかったらfreshかなあ

型これでよかった。

import_mapにpreactを追加。

asset置き場ディレクトリみたいなのは多分デフォルトでは存在しない？

site.copy("static");

こういう感じで自分で指定するんだと思う。個人的にはこの方針は何が起きるか明確だし、書いていないことは起きないので良いと思う。

書いた通りで、_site下に単にファイルがコピーされる。わかりやすい。

今のところかなりミニマルな作りになっているように見えて印象が良い。覚えることも全然ないし生成されるファイルも最低限なのでサイト作成に集中できると思う。

ローカルで動くhtmlドキュメントみたいな受託でよくありがちなアレを作りたい、みたいなときにフィットすると思う。結構ちょっとしたhtml生成したいみたいなことあるんだよね…

普段React書いてる人にとってはJSXも使えるのはありがたい。SSGは自分にとっては常に片手間作業の位置付けなので、いつもの知識の延長で使いたい。Hugoとかはドキュメント検索してる時間が多くて辛いんだよな…。その点、書き方を間違ったらいつも通りのエラーが出てくれるJSXはかなり体験が良い。むしろデフォルトでJSXでもいいような気も。

インタラクションのあるコンポーネントはどうするんだろう？やり方あるのかもしれないけど、見た感じWeb Componentsで後乗せするのが楽なのかな。

その辺のインタラクションも含めてJSXで書きたい場合はfreshかな。あとはデータロードとかがあるやつもfresh + Deno Deployだと思う。LPとかはこれでいいと思います。

ただDeno Deployが優秀（デプロイ速度が早い）なので、GitHub Pages + SSGのデプロイ速度上回る可能性あるんじゃないだろうか。ライトなWebコンテンツ向けのフレームワークという意味では方式の違いはあれどlumeとfreshは競合している気もする。