HonoのSSG機能を使ってみるメモ
この記事の通りにとりあえず動かしてみただけ。
リポジトリはこれ
基本的には簡単にすぐ試せるが、微妙に迷うところがあったので以下いくつかメモ。
honoのinstallについて
rc版がすでにnpmにあるのでそれを入れるだけ。なんかカッコつけてhonoのリポジトリのv4ブランチからローカルビルドして使ってたけどあんまり挙動は変わらないので無駄だった。
必要なパッケージとか設定について
bunとviteはグローバルでインストールされてた方が良い
パッケージについてはhono(rc版)はもちろん、bunだけでビルドはできるがviteのdev serverとSSG用のパッケージも入れておくと開発体験が変わるので必須。
ということでpackage.jsonはこんな感じになる。
code:json
{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": { "hono": "4.0.0-rc.3" },
"devDependencies": {
"@types/bun": "latest",
"@hono/vite-ssg": "^0.0.1",
"@hono/vite-dev-server": "^0.5.0",
"vite": "^5.0.12"
}
}
vite.config.tsに関しては先の記事の通りコピペすれば問題ない。
build.tsで型のエラーが出る
気のせいなので./node_modules/を削除してbun installしなおしてエディタを立ち上げ直すと大体治る。
This package is ESM only but it was tried to load by requireというエラーが出る。
vite関連のエラーだったけどトラブルシューティング | Viteで"type": "module"が書いてないとダメとあり、確認したらpackage.jsonから漏れてただけだった。 buildするとdistと.honoの二つのフォルダが作成される
これはSSGの成果物がどちらにも生成される。viteの機能だと思うんだけどこれなんで...。ビルドプロセス中のキャッシュとかか?よくある中間生成物みたいなのが入ってるr.viteとは違う?
とりあえずはdistの方が最終生成物だと思うのでGitHub PagesなりCF Pagesにアップロードするのはdistの方で良いと思う。