---
title: 自作SSGを作っている話
tags: 
author: [Comamoca](https://www.docswell.com/user/Comamoca)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LE3RR6M475.jpg?width=480
description: 自作SSGを作っている話 by Comamoca
published: March 15, 24
canonical: https://www.docswell.com/s/Comamoca/K8G8NP-2024-03-15-210244
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LE3RR6M475.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/8EDYYV65EG.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/V7P66VYDJ8.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/2JV33ZGGEQ.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5EG33MDD7L.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4JQ55R1X7P.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/K74998R2E1.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJ1KK2QK7G.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GJWDDRMP72.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4EZGGRQ6J3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/Y76YYR6LEV.jpg)

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