HonoXでサイトを書き直した

この個人サイトを Honox で書き直しました。元々 Next.js を使っていましたが、もう少し構成をミニマムにしたかったのと、好奇心で実験場として試してみたかったので、honox に移行しました。

HonoX について

HonoX は、Hono と Vite を組み合わせたメタフレームワークです。Cloudflare の Developer Advocate のyusukebeさんが作成したものです。

ファイルベースルーティングや SSR、ミドルウェアなどをサポートしています。Next.js は仕事ではお世話になっていますが、App Router からは機能が重く、キャッシュ管理や Node.js の API 依存から解放されたいという思いがありました。

また、最近は全体的にCloudflareスタックでまとめているので、Cloudflare Pagesを使いたいモチベーションがありました。

全体的に機能を減らしました。Twitter に書きにくいものを書くノートページなどが元々ありましたが、しずかなインターネットに移しました。あとはダークモードでのデザインが壊れていたので直したり、dayjsからdate-fnsに移行したくらいですね。

ちゃんとした文章は自分の資産として持っておきたいモチベーションがまた最近上がっているので、このサイトは今後はポートフォリオと大きめの記事を書く場所になる予定です。

まだ出たばかりのフレームワークなので、ドキュメントが少なく悩んだ箇所が結構あります。

@hono/vite-ssgでアプリを SSG 化していますが、一部のルート (API など)で SSG を無効にする方法がなかなか分かりませんでした。結論から言うと、disableSSG()を使います。

ただ少しバグがあるようなのでプロダクションに入れるのはまだ早いかもしれません。

Viteでのenvの扱いと、Cloudflareでのenvの扱いが異なります。そこで、Viteでの開発環境でのwranglerから環境変数が取れるようWranglerのgetPlatformProxyを使って環境変数を取得するようにしました。

元々はoctokitを使っていましたが、まず動かず、fetch apiで取得するように変更しましたが、User-Agentの設定が必要でした。これが分からずなかなかハマりました。

[wrangler:inf] GET / 500 Internal Server Error (61ms)
✘ [ERROR] SyntaxError: Unexpected token 'R', "

  Request fo"... is not valid JSON

この機にソースコードも GitHub に公開しました。まだ HonoX の情報は少ないので参考になるかと思います。

今度 Hono 関連のプロダクトも出す予定なのでお楽しみに。

このウェブサイト上のコンテンツは CC BY 4.0 DEED で利用できます