WIP Next.js+SSGのブログをHono v4で書き換える
Honoのv4が2月9日にリリースされますにてHono v4ではSSGモードがサポートされることになった。この機能を用いてNext.jsのSSGモードで構築していた個人ブログを書き換えることにする。
元の個人ブログではr8kamuraさんのr7kamura/gialog: Blog template to use GitHub Issues as article editor.のテンプレを使っている。これはGitHub IssuesをCMSとして用いて記事を書き、issueの作成などのイベントをフックにしてGitHub Actionsを起動させて記事ファイルを作成、そのデータを元にNext.jsのSSG機能でexportして生成されたファイル群をGitHub Pagesにデプロイするという仕組み。
この中でもGitHub Actionsを起動させて記事ファイルを作成の部分はr7kamuraさん作のr7kamura/gialog-sync: Custom action to update JSON files for gialog.というGitHub Actionsがあるのでこれを使うだけで良い。つまりIssue -> データ化の部分は既存の仕組みを流用できる。
GitHub Actionsの簡単な中身としてはissue作成やコメントのイベントトリガーをフックにして、Webhook のイベントとペイロード - GitHub Docsに載っている対応するイベントのペイロードが取得できる。たとえばissue作成ならissueのbodyやissue番号などが入ったjsonが得られる。
このデータを後続のSSGの時用に永続化したい。よってこれらを静的ファイルとして書き出しdataディレクトリに吐き出すようにしている。
作業ログ
まずは既存のコードをそのまま移行してみる。
パッケージのインストール。これは問題なし。
コードでいくつかエラーが出ている。
一つ目はNext.js独自の機能を使っている部分
たとえばnext/linkやnext/headとか。
SSGとして使うならWeb標準のaタグとかheadで十分なのでこれは書き換えるだけ
getStaticPropsに関する部分。
これはHono側のSSG機能で頑張る部分なので一旦削除して独自にリライトする。
ローカルテスト用のissueデータ(元のコードでは./dataディレクトリにymlファイルをいくつか用意してた)をコピーしてくる
これで一旦index.tsxで適当なissue取得部分のコードを書いて実行してみたところ動いた。まずは一歩前進。
SSGの準備としてbuild.tsの作成とvite.config.tsをHonoのv4が2月9日にリリースされますの記事に倣って準備して実行。これもとりあえず基本的な機能は動いたのでok。
ここまで来ていくつか問題があることもわかった。
静的ファイル(画像やcssなど)を開発環境でどう処理するか
honoのdevServerをviteに設定した場合にhono側でserveStaticを使うとエラーが出る(たとえばBun is not foundみたいなやつとか)
SSGで出力時に静的ファイルをどうバンドルさせるか問題(Next.jsの時はそのへんひっくるめてnext exportが解決してくれてた)
既存のコードではglobal.cssを_app.tsxでimportしてたけどhonoではどうするか
honoの場合は@hono/cssを使ってそれぞれのコンポーネントに定義してあげるほうが良いかも
要は開発環境と本番環境における静的ファイル配信をどうやるかの設定がやや必要
基本的にはvite.config.tsをいじればいける
まずviteはビルド時にpublic配下にある静的ファイルをバンドルしてくれる(静的アセットの取り扱い | Vite)ので基本的にはpublic配下に全ての静的ファイルを置く
ただこれだと開発環境で開発する際にdev-serverがpublic配下の静的ファイルへのアクセスを処理してくれなかった...
なのでvite.config.tsのpluginsで設定している@hono/vite-dev-serverのexcludeオプションにてpublic配下も配信可能に設定する
あとは呼び出し側でhttp://localhost:3333/public/icon.pngみたいな感じでアクセスするようにすれば良い
global.cssをどうするか問題については#1928にてhono/cssへの拡張が入っていたのでこれで対応できそう。
Layout.tsxでhtmlタグに設定してことなきを得た
内部で使っていたdate-fns-tzが{"type": "module"}だと使えなかった
使用箇所をみたところDate.prototype.toLocaleDateString() - JavaScript | MDNで十分対応できそうだったので書き換えた
RSS用に/feed.xmlでアクセスしてxmlが返るようにしたかったがviteで[vite:build-html] Unable to parse HTML; というエラーが出てしまう
honoのSSGにおける中間生成物を確認するとfeed.xml.htmlというファイルが作成されてしまっている
この辺のissueを見ると対応されているっぽいが...
SSG: Handling when response.text() can not parse · Issue #1962 · honojs/hono
feat(ssg): Implement Dynamic File Extension on MIME Type and Enhanced Response Handling by watany-dev · Pull Request #1968 · honojs/honoを見た感じだとmineTypeで判断してそう
あと/feed.xmlと指定すると生成物が/feed.xml.xmlになってしまうので/feedにした方が良いっぽい
vite.config.tsにassetsInclude: ["**/*.xml"]というオプションを追加したところうまくいった。
共通オプション | Vite
と思ったがうまくいってない...
productionのビルドが総じて全体的にチグハグな結果になる。全部設定やり直し。
そもそも何でこんな面倒なことしてたのかというとviteで全部やろうとしてたがserveStaticがなぜかReferenceError: Bun is not definedになるという問題だったが、それなら別の、たとえばNode.jsのserveStaticを使えば良いじゃんとなって試したら案の定問題なかった。
あとは開発環境ではbase_url/static、本番ではbase_urlで静的ファイルを配信する用にすればOK。ごちゃごちゃした設定は不要だ
最後に.github/workflowsの変更
環境変数の修正(VITE_プレフィクスのものに変える)
nodeからbunへ変更
以上でpushして完了
https://github.com/YuheiNakasaka/gialog-diary
後日
viteでビルドしたが下記のエラーが問題だった。これはなんとかならんのか...
vite:build-import-analysis Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .xml file format, or if it's an asset, add "**/*.xml" to assetsInclude in your configuration.
リソース
honojs/vite-plugins: Vite Plugins for Hono
Honoのviteプラグイン群
@hono/vite-dev-server
@hono/vite-ssg
Examples for SSG · Issue #2086 · honojs/hono
feat: Added ssgParams middleware by nakasyou · Pull Request #1960 · honojs/hono
プラグイン API | Vite
viteのプラグインの仕組み
assetsInclude | Vite
hono