Astroで個人サイトを作りました。
ブランドカラーはチェレステ(Celeste)。自転車ブランドのビアンキと同じです。
日記などは続いた試しがないのですが、コツコツと更新していきたいと思っています。
サイト構成
以下のような構成になっています。
- Home
- About
- Blog
- Tags
- Search
Home
ヒーローセクションはシンプルに。
最近投稿された記事を3件までBento UIで表示。
下部のフローティングメニューは、catnoseさんのHPを参考にさせていただきました。
About
このサイトの簡単な説明と自己紹介を載せています。
ポートフォリオとして活用できるように今後整備していきたい。
Blog
技術記事や日記などを書き分けできるように、記事のfrontmatterでtypeとtagsでカテゴリを設定できるようにしており、記事一覧ではtypeごとにタブでフィルタリングできるようにしています。
記事に設定されたタグとその件数が一覧で確認できます。
タグを選択するとそのタグが設定された記事一覧を確認できます。
Search
Pagefindを使っています。
MDNやGodotの検索でも使われているらしい。
技術的なこと
このサイトは以下のような構成で作られています。
- Astro 6 (SSG)
- Tailwind CSS v4 + @tailwindcss/typography
- Twemoji
- Cloudflare Workers (Static Assets)
- Cloudflare R2
- Pagefind
- satori + sharp
- pnpm
- oxlint
- oxfmt
- lefthook
3日間くらい仕事終わりにGemini CLIとClaude Codeを使って作りました。
GoogleはUI生成ツールのStitchを手掛けていることもあり、心なしかGemini CLIでgemini-3-flash-previewを使った方がいい感じのデザインにしてくれたような気がします。
Astroを選んだ理由は、もともとTILサイトの構築で使っていたことに加え、Cloudflareとの相性のよさです。
2026年1月にAstroがCloudflareに参加したことで、今後はこれまで以上にCloudflareとの親和性が高まっていくのではないかと思います。
