自作SSGを作っている話

392 Views

March 15, 24

lt

スライド概要

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

自作SSGを作っている話 こまもか

2.

お前、誰よ Name: こまもか Twitter(X): @Comamoca_ GitHub: https://github.com/comamoca 好きな言語: Lisp(書けるとは言ってない) Gleamの入門本書こうと思って未だに手を付けられてない(冬コミに間に合わせた い...)

3.

自作SSGを作っている https://github.com/comamoca/haru

4.

なぜ自作SSGなのか 自分がSSGを使うケースが専らMarkdown to HTMLだった ただMarkdown to HTMLするだけなのにSSGのお作法を調べるのがつらい 自分でMarkdown to HTMLするスクリプト書いたほうが早い かと言って毎回書くのも面倒 自作しよう!

5.

使用している技術 Deno Preact(前はNanoJSX) Hono(ライブリロード/プレビュー)

6.

Deno JS/TS書くときは大体これを使っている TS + Rustの開発体験 ライブラリの導入コストが無視できるレベルで小さい

7.

Preact Fresh(Deno公式のWebフレームワーク)で採用されていて安定性が期待できる Reactとある程度の互換性がある(期待はしていない)

8.

Hono どこでも動く ミドルウェアが豊富で実装が楽 最近WebSocketが追加された(うれしい)

9.

どのような仕組みで動いているのか 指定されたディレクトリ内のindex.{tsx, jsx}をglob default exportされている関数を実行し、JSXをHTMLに変換 Pathを操作して書き込み先に変換(ファイルベースルーティング) - 書き込み めちゃくちゃシンプル

10.

シンプルゆえの拡張性 実体はただの{tsx, jsx}ファイル JS/TSのエコシステムを有効に活用出来る(なんでも出来る) 例えば... Tailwindの使用(公式でユーティリティを実装済み) Pagefindを使った全文検索(公式でユーティリティを提供予定) exbuild/deno_emitを使ってクライアントサイドでフレームワークを展開 DOMを使ってレンダリングされたHTMLを操作

11.

これから ブログと備忘録サイトをHaruにリプレース 公式のユーティリティを拡充 リファクタリング