HonoXでサイトを書き直した

GitHub

この個人サイトを 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に移行したくらいですね。

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

ハマりどころ

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

特定のルートで ssg を無効にしたい

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

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

https://github.com/honojs/honox/issues/58

envの扱い

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

GitHub Graphql API の認証

元々は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 で利用できます