個人ブログを無料の範囲内でデプロイし、公開した。実際にこのブログの技術構成を紹介します。
技術スタック概要
- フレームワーク: Astro
- ビルド環境: Node.js
- ホスティング: Netlify
Astro
- ブログ向けのフレームワークと聞いた。
- 表示速度が速い。
- シンプルなHTMLで書ける。
- コンテンツ管理がしやすい。
- Netlify(無料のデプロイ先)との相性がいい。 静的サイト生成に特化しており、ブログの用途に適していた。とにかくページの表示が早い。あとはファイルベースルーティングでコンテンツ管理がしやすかったのが良かった。
ページパフォーマンスを上げるために工夫したこと
- システムフォントを使う。
- googleフォントから日本語フォントを取ってくると重く、パフォーマンスも下がった。こだわりが特にないのならsystem-uiを使うのが一番いい。
- JavaScriptのロード時間を削減する。
- 不要なコンポーネントを削除する。
- 最低限のCSSで済ませる。
- AIに雑にCSSを書かせていたのだけれど、きちんとしたデザインは重くなった。やっぱりシンプルなデザインが一番いいと思う。
Node.js
昨今のwebアプリはほとんどNode.jsが使われているし、歴史が長いのでAIも知見が溜まっていることが理由。
Netlify
- 無料枠がある。
- 静的サイトのデプロイに向いている。
こちらも特にこだわりはない。小規模な運用にとどめるため、Netflifyを選択。 しばらく運用してみて、CDNで遅いならCloudFlare Pagesに移行することも考えている。
https://jpsern.com/netlify-to-cloudflare-pages/?utm_source=chatgpt.com
Gemini CLI
こちらのコーディングエージェントを使用している。無料枠があるからという理由である。
X server
こちらのサービスからドメインを購入した。本当は.devを取得したかったが、年間コストを下げるために.comにしている。