昔からブログサイトを作ることが好きだった

中学生のころ、モバスペにハマった。簡単に日記やタイムラインみたいなものを作れるサイトで、ガラケーを使って当時はゴリゴリ書いていた。

寝る間も惜しんで書いていた。

上級者モードみたいなものがあって、それはHTMLをちゃんと使ってコードを書くことができた。しかし、ガラケーなので打ち込むのが大変だったことを覚えている。

ホームページは自分の秘密基地みたいなものだと思っている。自分の好きなものを配置・装飾して、お気に入りの色で着飾ったり、自分の思うままに作ることができる。

ブログサイトを作るのがもはや趣味で、これまで5つほど作った。どれも記事の更新は続かなかったけども。

そんな中、気になる動画が飛び込んできた。

Astroとの出会い

この動画に出会い、Astroを知った。衝撃的だった。

HTMLファーストで構成されている。つまり、重くなりがちなJavaScriptを（開発者が明示的に追加しない限り）使わず、100%静的なHTMLを出力する。

例えば、

• ブログ
• ドキュメントサイト
• ポートフォリオ
• コーポレートサイト

などの、読むことを中心にしたサイトはJavaScriptをほとんど使用しない。ここでAstroの出番である。

100%静的なHTMLなので、爆速ブログサイトが作れるのである。

シンプルなコード

Astroのファイルは.astroという拡張子で書く。

上側の---で囲まれた部分にJavaScriptやTypeScriptを書いて、その下にHTMLを書く。感覚としては、HTMLにちょっとだけロジックを足せるテンプレートファイルに近い。

---
const title = 'こんにちは、Astro';
const description = 'これはシンプルなAstroコンポーネントです。';
---

<article>
	<h1>{title}</h1>
	<p>{description}</p>
</article>

これだけでページやコンポーネントとして使える。美しい…。

記事を書くならMarkdownもそのまま使える。

---
title: 'はじめての記事'
pubDate: 'Apr 25 2026'
tags: ['astro']
---

## 見出し

本文を書く。

ブログなら、ページのほとんどは静的なHTMLと文章で十分だから、Astroの軽さがそのまま効いてくる。

Astroの「必要なものだけ入れる」思想がよかった

Astroを触っていて一番好きになったのは、何でもオプトインな設計思想だった。

たとえばMDXを使いたかったらnpx astro add mdxでインテグレーションを足すし、いらなければ素のMarkdownのまま。サイトマップが欲しければastro add sitemap。RSS配信したければ@astrojs/rss。Vercelに乗せたければastro add vercel。

「全部のせの巨大フレームワークが、設定をひっくり返して機能を絞っていく」のではなく、最小構成のところに、自分が欲しい機能だけを足していく。これがすごく気持ちいい。

# Vercelに乗せたい
npx astro add vercel

# MDXも使いたい（今回は使わないけど）
npx astro add mdx

たった一行で必要な依存もインストールされて、astro.config.mjsも自動で更新される。やりすぎなおせっかい感がなくて、ちょうどいい。

そして極めつけがIslands Architectureという考え方。今回は完全静的で組んだのでまだ恩恵を感じていないけど、「ページのほとんどは静的HTMLで、必要な部分だけJavaScriptを島のように配置する」という設計は、美しさすら感じた。

ReactやVueやSvelteをページの一部だけにピンポイントで挿せる。フロントエンド全体を一つのフレームワークに縛る必要がない。これは設計思想としてかなり革新的だと思う。

今回の構成

最終的に落ち着いた構成はこんな感じ。

• フレームワーク: Astro（公式ブログテンプレートをベース）
• コンテンツ: 素のMarkdown（記事はsrc/content/blog/に放り込むだけ）
• 型安全なフロントマター: Content Collections + Zodスキーマ
• 検索: Pagefind — ビルド時にインデックスを生成してクライアント側で検索
• タグ機能: 動的ルート[tag].astroで記事をフィルタリング
• デプロイ: Vercel
• コード品質: ESLint v9 (Flat Config) + Prettier
• アクセシビリティ: eslint-plugin-jsx-a11yも入れて、最低限の事故防止

特にPagefindは感動した。サーバー不要・APIキー不要・無料・フルテキスト検索。ビルド時にdist/pagefind/にインデックスが吐かれて、クライアント側で読み込んで検索する。とにかく早い。当たり前だけど。

まとめ

軽い、早い、美しい！のAstroでブログサイトを作ってみた。楽しい。記事の更新は…頑張ります。