ブログをリニューアルするにあたり、一番楽しくて、そして一番悩ましいのが**「技術選定」**の時間ですよね。 今回は、この「hello,idea」を構築している技術スタックについて紹介します。
WordPressからの卒業
これまでは長らく WordPress を使ってきましたが、個人ブログとして運用するにはいくつか気になる点が出てきました。
- メンテナンスの負担: プラグインやテーマの管理に気を遣う。
- 表示速度の限界: 構成が複雑になるほど、読み込みが重くなりがち。
- 「書く」までの距離: もっと身軽に、Markdownを書いてGitでデプロイしたい。
そんな思いから、今回は**静的サイトジェネレーター（SSG）**への移行を決めました。
なぜ Astro なのか？（他のSSGとの比較）
SSG界隈には魅力的なフレームワークが揃っていますが、僕のニーズに照らし合わせて検討した結果がこちらです。
1. GatsbyJS
豊富なプラグインは魅力ですが、GraphQL を通じたデータ取得が小規模なブログには少し重厚すぎると感じました。もっと直感的に作りたかったんです。
2. Next.js / Nuxt.js
どちらも最高にパワフルですが、ブログのような静的コンテンツが主体のサイトでは、JavaScriptが過剰（オーバースペック）になりがちです。
3. Hugo
ビルドの速さなら Hugo が最強です。最後まで悩みましたが、Go言語独自のテンプレート構文よりも、フロントエンドの最新エコシステムを柔軟に組み合わせられる Astro の自由度を取りました。
Astroを選んだ決め手 「デフォルトでJavaScriptをゼロにする」というパフォーマンスへの潔さと、使い慣れたHTML/CSS/JSの感覚で開発できるバランスの良さが、今の僕には最適解でした。
技術スタック一覧
流行り廃りよりも、**「僕の手の届く範囲で、丁寧に作る」**ことを重視しました。
Tech Stack
- Framework: Astro v5
- Language: TypeScript
- Styling: SCSS (Sass) + CSS Modules
- Linter/Formatter: Biome
- Package Manager: pnpm
- Hosting: Cloudflare Pages
脱・Tailwind CSS？
今回はあえて SCSS + CSS Modules を採用しました。 このサイトのコンセプトである**「アナログな手書き感」**を出したかったからです。
ユーティリティクラスを組み合わせるよりも、CSSを直接書いて、box-shadow を1px単位で微調整したり、紙の質感を表現したりする方が、理想のデザインに近づけると感じました。
開発体験を支えるツールたち
Biome
ESLint + Prettier の設定地獄から解放されたくて導入しました。 正直、現時点では Astro ファイルを完全にサポートしているわけではありませんが、それでも導入する価値があると感じています。
Rust製による圧倒的な速さと、何より「一つのツールで完結する」シンプルさが、開発のテンポを崩しません。完璧なサポートを待つよりも、今の**爆速な開発体験（DX）**を優先しました。
pnpm
npm や yarn よりもディスク容量に優しく、インストールの速さもピカイチです。
まとめ
「今の僕にとって一番心地よい道具を選ぶ」ことを意識した技術選定になりました。結果として、Lighthouseのスコアも満点近くが出せているし、何より書いていて楽しい環境が整いました。
次回は、このサイトの見た目を作る**「アナログ風CSSデザイン」**の裏側について書きたいと思います。 お楽しみに！