概要
| フレームワーク | Astro |
| 言語 | TypeScript |
| パッケージマネージャー | pnpm |
| CSS | Tailwind CSS + tailwindcss-typography + Daisyui |
| CMS | newt |
| サーバー | Xserver Static |
フレームワーク
フレームワークにはAstroを採用しています。
AstroはいらないJSを剥がしまくって軽くなろうぜっていうSSGフレームワークなので、何も考えていなくても阿部寛ホームページ並の速さのページを作れます。意図しないスクリプトの実行()も防ぐことができます
公式もAstroを使って遅いページを作ることは難しいと言っているレベルで早いです。
速度計測をしても足を引っ張っているのがGAだけで、GA外したら満点狙えるレベルで早いです。みんなも使おう！
ちなみに一部だけReactやVueで実装することもできます。 私の場合、ブログの最下部にある次へボタンはReactで実装されています。 これは以前RSSでMisskeyの投稿拾ってきてそれを表示させるってのをクライアントでやろう！ という計画の名残で、現在は放棄されています。
しかし、ビルド時にReactは事前レンダリングされているので（今の状態だと）クライアントにReactは読み込まれません。 これがAstroのいいところなんですよね。
言語
言語はTypeScriptで、エディターの補完がゴリゴリ効いています。 これが開発体験かって感じで、もうJavaScriptに戻れる気がしません。
ちなみにnewtのUIDをわかりやすくするオブジェクトを書いたところ、誤字って3日間格闘しました。
パッケージマネージャー
パッケージマネージャーはpnpmを使っています。
pnpmはnode_modulsにリンクを設置するだけを繰り返すので、同じモジュールを二度ダウンロードしません。 これで爆速化が実現されているとか。
bunがもっと早いという噂も聞くので、乗り換えも検討しています。自分しか使わないので身軽ですね。
CSS
CSSはTailwind CSSにtailwindcss-typographyを足してDaisyUIで仕上げています。
DaisyUIがJS不仕様のCSSフレームワークだったので採用。 ダークテーマが何もしなくても有効になっているのでかなり楽です。
tailwindcss-typographyはDaisyUIの推奨だったので使ってる感じです。
CMS
CMSはnewtを使用しています。
最初はmicrocmsだったのですが、設計ミスとフィールド上限で使いにくかったのでnewtに移行しました。
newtは、Markdownがサポートされています。リアルタイムプレビューもできて楽に書けます。
そして埋め込みジェネレータがWebエディタについていてかなり楽に書けます。
上限も結構ゆるくて行き当たりばったりでも大丈夫そうです。
そして何より日本製なのでドキュメントが日本語です。 プログラミング初心者が何より安心できる要素ですね。
サーバー
サーバーには8月に登場したばかりのXserver Staticを使用しています。
無料なのでめちゃくちゃ助かっています。
さらに始まったばかりのサービスなので、短い初期ドメインをもらうことができました。正直これがXserver Staticに決めた理由かもしれません。
こだわりポイント
Markdownで記事を書く
Markdownで書けると、キーボードだけで書くことができるのでかなり執筆体験というやつが上がります。
unified(remark)でMarkdownをビルド時に変換
unifideでビルド時変換を行うと何がいいかって、newtで使えない記法や目次を追加したりといった拡張ができるんですよ。
これでHTMLの記述を少なくできるんですね。Markdownのいいところ(悪いところ)ですね
執筆時点ではGFM拡張と目次拡張を入れてます。
ライセンスの表示
私はしっかり使ったライブラリを掲載しています。(善良市民アピ) llicense-checker-rseidelsohnを使ってビルド時にpublicフォルダへ出力されるようにしています。
リンクはこちら: ここをクリック
リッチなページにすることも考えたのですが、ちょっと力尽きてしまったのでtxtファイルになっています。
最後に
Markdown大好き❤
良ければフッターからフォローお願いします。
