Mar 28, 2026

AstroでこのブログサイトをゼロからBuildしてみた

きっかけ

仲間とハッカソンやプロダクト開発をしている中で、「モダンな技術を積極的に使っていこう」という話になりました。新しい技術を学ぶだけでなく、実際に手を動かして使いこなすことが技術力の向上につながると考えているからです。

そこでまず、学んだことをアウトプットする場としてブログを作ることにしました。どうせ作るなら「使ってみたかった技術を試す場」にもしようと、以前から気になっていた Astro を選びました。

普段はNext.jsを使っているため、Astro導入のハードルはそれほど高くないと感じています。ReactユーザーにとってAstroは学習コストが低く、扱いやすいフレームワークです。一方で、Astro独自の設計思想に触れることは、既存のフレームワークとの違いを肌で感じる良い機会となり、技術的な視野を広げられると思っています。

この記事では、ローカル環境でブログを動かせる状態までを解説します。
公開（デプロイ）については別記事で扱います。

Astroとは

AstroはIslands Architectureを体現した静的サイト向けフレームワークです。その最大の特徴は「デフォルトでクライアントサイドのJavaScriptをほぼ出力しない」設計にあります。

Islands Architectureとは、ページ全体をReactで動かすのではなく、動的にしたい箇所だけを「島」として独立させる思想です。ブログや記事サイトは「読まれるもの」であり、インタラクティブなUIはほとんど必要ありません。不要なJSを削ることで表示速度とSEOを最大化しつつ、必要な部分にだけJSを使えるというわけです。VercelやCloudflare Pagesなど主要なホスティングサービスに簡単にデプロイできる点も魅力です。

セットアップ

npm create astro@latest

対話形式で設定を進めます。テンプレートの選択肢でブログテンプレートを選びます。

How would you like to start your new project?
❯ Use blog template
  Use a template from the Astro registry
  Empty project

これだけで必要な構成が一式生成されます。

生成されるディレクトリ構成

my-blog/
├── public/
├── src/
│   ├── components/      # Header, Footer など
│   ├── content/
│   │   └── blog/        # Markdownで記事を管理
│   ├── layouts/         # ページレイアウト
│   └── pages/           # URLに対応するページ
├── astro.config.mjs
└── package.json

シンプルで、ブログとして必要なものがちゃんと揃っています。

ローカルで起動する

npm run dev

http://localhost:4321 でブログが立ち上がります。ここまででローカル環境での動作確認は完了です。

記事の書き方

src/content/blog/ にMarkdownファイルを置くだけで記事になります。

---
title: "はじめての記事"
description: "Astroで書いた最初の記事です"
pubDate: "2026-03-28"
tags: ["Astro"]
---

ここから本文を書きます。

フロントマター（--- で囲まれた部分）にメタ情報を書きます。あとは普通のMarkdownです。HTMLやCSSがわからなくても記事を書けます。

.astroファイルの書き方

コンポーネントは .astro 形式で書きます。

---
// ここはビルド時に実行されるTypeScript/JavaScript
const title = "こんにちは、Astro！";
---

<!-- ここはHTMLテンプレート -->
<h1>{title}</h1>

--- の上がロジック、下がテンプレートです。構文はJSXに似ていますが、Astroコンポーネントはビルド時にHTMLへ変換されるため、useState や useEffect のようなクライアントサイドの概念は存在しません。その分シンプルに書けます。

このブログでやったカスタマイズ

テンプレートそのままではなく、いくつか手を加えました。

タグ機能の追加

テンプレートにはタグ機能がなかったので、フロントマターに tags フィールドを追加して記事一覧でタグを表示できるようにしました。

トップページの無限スクロール

デフォルトは記事が全件表示される単純なリストです。記事が増えてきたとき用に無限スクロールを実装しました。最初は10件表示し、スクロールで追加読み込みします。

仕組みはブラウザ標準の Intersection Observer API を使っています。リストの末尾に不可視の要素を置き、それが画面に入ったタイミングで次の記事を追加する方式です。

Astroの「JSを出さない」という思想に対して、この機能はクライアントサイドJavaScriptが必要になります。Astroでは <script> タグや client:* ディレクティブを使って部分的にJSを有効化できるので、思想に反することなく実装できます。

レスポンシブ対応

デフォルトのスタイルがPC向けに最適化されていたため、スマートフォンでも読みやすいよう調整しました。

remark-breaks の導入

Markdownの改行（行末スペース2つなし）がそのままHTMLの改行にならない問題を remark-breaks プラグインで解決しました。

npm install remark-breaks

// astro.config.mjs
import remarkBreaks from 'remark-breaks';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkBreaks],
  },
});

コンテンツ幅の拡大

テンプレートのデフォルト幅720pxはコードブロックが窮屈に感じたので960pxに拡大しました。

使ってみた感想

良かった点

ポイント	内容
セットアップの速さ	コマンド1つで雛形完成
記事管理	Markdownファイルを追加するだけ
表示速度	静的HTML生成なので速い
カスタマイズのしやすさ	コンポーネント単位で手を入れやすい
プラグインエコシステム	remark/rehypeプラグインがそのまま使える

気になった点

ポイント	内容
動的機能	コメント欄など動的な機能は別途対応が必要
`.astro`構文	HTML/CSSのみの人にはやや学習コストあり

まとめ

Astroの公式ブログテンプレートは、「手軽に始めたい」「Markdownで書きたい」「速いサイトが欲しい」というニーズに素直に応えてくれるテンプレートでした。

テンプレートがシンプルな分、カスタマイズがしやすく、自分の好みに合わせて育てていける感覚があります。このブログ自体がその結果なので、実用性は確かめ済みと言えます。

次にやること

ここまでで、ローカル環境でブログが動く状態になりました。

次のステップはインターネットへの公開（デプロイ）です。Astroで作ったサイトはVercelやCloudflare Pagesに簡単にデプロイできます。具体的な手順は以下の記事で解説します。

AstroブログをCloudflare Pagesにデプロイする手順（近日公開）