概要
以前から静的サイトジェネレーター（SSG）は使っていたんですが、最近特にGithub Pagesにデプロイする用のは何が良いかなーって探していました。
で、色々動かしてみたりしましたが、自分のやりたいことに一番合ってたのはAstroということになりました。
要件
自分が求めている要件は以下
- 基本はHTML吐いてくれる(ほぼ空のHTMLにjsで描画するのではなく)
- React Componentを使いたくなったら使える
- configはあまり書きたくない
- 動的な部分はTypeScriptで書けてhot reloadが欲しい
Jekyll
Github Pages標準です。
Ruby製だし慣れているのでたまに使っています。JavaScript動かさない場合には楽に動かせて良いんですが、改めて調べてみました。
Viteと一緒に使おうと思うと、jekyll-viteというgemを使えるんですが、
GitHub - ElMassimo/jekyll-vite: ⚡️🩸 Use Vite.js in Jekyll as your assets pipeline
とりあえずローカルで立ち上がるまではサクッと行きます。
そこから先のことをやろうとすると、gemがあまりメンテされていなくドキュメントも少ないので結局vite-rubyとjekyll-viteのソースを読みながらconfigを書いていかないといけないのがつらくなってきました。
で、コンテンツを書いているのかconfigを書いているのか分からなくなってきたのでやめました。
Next
例は多く見つかりますがGithub Pages関係ないところでお仕事で使ったことあり、仕事とは違うことしたいので今回はスキップ。
Gatsby
前からちょっと使っていたんですが、React 18にアップデートしたらTypeScriptの型エラーが出るようになってしまいました。（動作自体はするけど型エラーが出続ける）
gatsby -> reach-router -> prop-types -> react-is
の依存でreact-isのバージョンとreactのバージョンが違うと型エラーになるらしいけど、reach-routerもprop-typesも開発止まっててなんともならんということで諦めました。
Hugo
The world’s fastest framework for building websites | Hugo
Go製。あまりViteと組み合わせてGithub Pagesにデプロイしている人を見つけられなかったので断念。
Docusaurus
Build optimized websites quickly, focus on your content | Docusaurus
meta製でReact前提だし、デザインのカスタマイズがしづらそうだったのでちょっと敬遠。
Astro
ごく最近までノータッチだったんですが、触ってみてええやん！ってなりました。
今回自分が要件として挙げていたものをほぼ満たしています。
あえて言うなら、styleがデフォルトではテンプレートにベタ書きになっているので別ファイルに切り出したりtailwind入れたりしようと思います。
試しに作ったもの
適当にガチャガチャやりました、だけだと面白みがないので一応役に立つものを作ってみました。
リポジトリ ↓
https://github.com/nanjakkun/hyattoku
Github Pages ↓
https://nanjakkun.github.io/hyattoku/
QRコードが作成できます。それだけ。
リポジトリ名は百徳とか偉そうな名前ついてますがまだ一徳しかありません。
百個機能付く日は来るのか・・
(最初jittokuって名付けようと思ったんですが、pythonのパッケージであるのを思い出してやめました)
