もう何度目になるか分からないが、ブログを作り直した。
今回利用したのは Deno 製のSSGである Lume 。
動機とか
Lume を選んだ理由は Deno 製であること。
本格的に TypeScript を始める頃に Deno が登場したので、Node.js にまともに触れずに Deno ばかりを使っている。そのため今更 Node ベースのフレームワークを使いたくなかった。
教養として Next.js を触ったりはしているものの、やりたいことに対してできることが多すぎるので今回は採用しなかった。
また、前回「なんとなく周囲で流行っている」という理由で Hugo を使ったところ、 Go (Templates) が読めなくて困ったので、今回は読める言語で作られているものにしようと思った。
Lume はTSなので読むのに支障はないし、ある程度使ってみた感触では実装もコンパクトなので困ったときにも対応できそうだと感じ、採用した。
Lume の特徴
SSG評論家ではないので他のフレームワークとの比較はできないが、公式サイトを参照すると
- マルチテンプレート対応
- マルチデータソース対応
あたりが主な特徴ということになっていそう。
テンプレート
Lume ではプラグイン形式でテンプレートエンジンを簡単に追加することができる。
v2.0.6 時点では、デフォルトで Markdown と Vento 、素のJS/TSが有効になっている[1]。
Vento は Lume の作者が作ったテンプレートエンジンで、Nunjucks、Eta などに非常に良く似た文法を持っている。
公式のプラグインページには、他にもいくつかのエンジンに対応するプラグインが公開されている。 このブログでは、追加で JSX を有効にしている。
※細かい話をすると、デフォルトの Markdown プラグインは内部的に markdown-it を使用しているが、それとは別に remark のプラグインも用意されていたりする。またJSX にも React 版と Preact 版がある。
データソース
Lume の基本的な仕組みはファイルベースのルーティングとなっており、ソースフォルダに有効化されているエンジンで処理できるファイルを配置すれば、1:1でHTMLに変換される。
また、ブログの記事一覧ページのようなページネーションや、DBやAPIなどの外部ソースからデータを取得して1件ずつページを生成したい場合など、複数ページの生成を簡単に実現する機構が用意されている。
その方法が JavaScript でページデータを返却する ジェネレータ関数を書くというものになっており、直感的でわかりやすかった。
今回は microCMS に Markdown 形式の本文＋タイトルやタグなどの情報を貯めておき、ビルド時にAPIで取得してページを生成することにした（ソース）。
これ以外にも、今回は利用していないがJSONやYAML、TOML、果てはスプレッドシートなどもページ生成のソースにすることができるので、何かのデータのビューアを作るときなどはかなり楽が出来そうだと感じた（実際、公式のショーケースにはそっち系の例もある）。
その他
レイアウト機能、タグなどのメタデータによる内部検索など、一通りのことはできると思う。
デプロイ環境について
Hugo 時代から Vercel にデプロイしており、ドメインを付け替えるのも面倒だったため、今回もそのまま Vercel にデプロイしている。
ランタイム／フレームワークのゼロコンフィグ対応こそないが、Build Command で Deno インストール&ビルド実行すればいいだけなので特に問題はない。
まとめ
Lume はこんな感じのフレームワーク。
- Deno 製ですぐ開発できる
- Markdown、JSX その他のテンプレートエンジンが使える
- TSなのでWebとの親和性が高く実装もコンパクトで扱いやすい
- 必要十分な機能
あくまで静的サイトジェネレータなので、他のマルチなフレームワーク（Next/Nuxt/Sveltkit/Remix/Astro/etc.）の代替ではない[2]が、大型フレームワークの手持ち資産を使わずにゼロからサクっと静的なサイトを作る際は候補にしてほしい。
おわり