個人ブログ「kinulog.com」を立ち上げました。本記事では、このブログを支える技術スタックや、パフォーマンス向上のために工夫した点についてご紹介します。
技術スタック概要
このブログは、以下の技術スタックで構成されています。可能な限り無料の範囲で運用できるよう、シンプルかつモダンな構成を意識しました。
- フレームワーク: Astro
- ビルド環境: Node.js
- ホスティング: Netlify
- 開発支援: Gemini CLI
- ドメイン: Xserver
Astro
メインのフレームワークには、コンテンツに特化した静的サイトジェネレーターであるAstroを採用しました。選定理由は以下の通りです。
- 優れた表示速度: 不要なJavaScriptを自動で削減するため、ページの読み込みが非常に高速です。
- シンプルな記述: HTMLライクな構文で直感的にコンポーネントを記述できます。
- 管理のしやすさ: ファイルベースルーティングのため、コンテンツの追加や管理が容易です。
- デプロイの容易さ: Netlifyなどのホスティングサービスとの親和性が高く、スムーズに公開できます。
パフォーマンス向上のための工夫
Astroの高速性に加え、さらなるパフォーマンス向上のために以下の工夫を施しました。
- システムフォントの採用: Google FontsなどのWebフォントは読み込みに時間がかかり、特に日本語フォントはファイルサイズが大きくなりがちです。そこで、OSに標準搭載されているシステムフォント (
system-ui) を使用することで、フォント読み込みのオーバーヘッドをなくしました。 - 不要なJavaScriptの削減: 初期実装に含まれていた不要なコンポーネントを削除し、クライアントサイドで読み込むJavaScriptの量を最小限に抑えました。
- CSSの最小化: 当初はAIにCSSを生成させていましたが、複雑なスタイルはパフォーマンスの低下を招きました。現在は、シンプルで軽量なCSSを記述し、描画パフォーマンスを維持しています。
Node.js
ビルド環境には、現代のWeb開発で広く使われているNode.jsを利用しています。Astroをはじめとする多くの開発ツールがNode.js上で動作するため、事実上の標準となっています。エコシステムが成熟しており、豊富な知見やライブラリを活用できる点も魅力です。
Netlify
ホスティングにはNetlifyを選択しました。小規模な個人ブログであれば、無料枠で十分に運用できる手軽さが決め手です。静的サイトのデプロイに最適化されており、Gitリポジトリと連携させるだけで自動デプロイ環境を簡単に構築できます。
今後の運用でCDNのパフォーマンスに課題を感じるようであれば、Cloudflare Pagesへの移行も検討しています。
Gemini CLI
開発の補助ツールとして、コーディングエージェントであるGemini CLIを活用しています。コードの生成やリファクタリング、記事の校正など、開発の様々な場面で効率化を支援してくれます。
Xserver
ブログのドメインはXserverで取得しました。様々なドメインが選べますが、年間コストを考慮して.comを選択しています。