HTML/CSS/JavaScriptで作っていた静的ホームページを、Astro構成へ移行しました。

この記事では、個人サイトやポートフォリオサイトをAstroへ移行したい人向けに、移行した理由、ReactやNuxt.jsではなくAstroを選んだ理由、コンポーネント化やMarkdownブログ化で変わったことをまとめます。

Astro移行前の課題

移行前のホームページは、静的なHTMLにCSSとJavaScriptを組み合わせたシンプルな構成でした。小さなサイトとして始めるには扱いやすく、表示も軽い状態を保てていました。

ただ、プロフィール、リンク、ニュース、ブログのようにセクションが増えてくると、ひとつのHTMLファイルで管理するのが少しずつ難しくなります。

  • ヘッダーやフッターを複数ページで使い回しにくい
  • ニュースやブログ記事を追加するたびにHTMLを直接編集する必要がある
  • ページごとの構造が大きくなると、修正箇所を探しにくい
  • デザイン変更時に共通パーツの更新漏れが起きやすい
  • 今後ブログ記事を増やすための管理方法が必要になる

静的サイトの軽さは残したい一方で、更新しやすい構成に変えたい。そこでAstroへの移行を選びました。

なぜAstroを選んだのか

Astroを選んだ一番の理由は、静的なホームページと相性が良いからです。

Astroは、コンポーネント単位でページを組み立てながら、最終的には静的ファイルとして出力できます。個人サイト、ブログ、ポートフォリオ、ドキュメントサイトのように、文章や固定ページが中心のサイトでは扱いやすい選択肢です。

今回のホームページでは、ログイン機能や複雑な状態管理は必要ありません。必要だったのは、ページを分けやすくすること、共通パーツを管理しやすくすること、Markdownでブログを書けるようにすることでした。

Astroはこの目的にちょうど合っていました。

ReactやNuxt.jsを使わなかった理由

移行先として、ReactやNuxt.jsも候補にできます。どちらも人気があり、Webアプリケーションを作るには強力なフレームワークです。

ただし、今回のサイトは大規模なWebアプリではありません。プロフィール、リンク集、ニュース、ブログを中心にした静的ホームページです。そのため、ReactやNuxt.jsの機能をフルに使う場面は多くありませんでした。

Reactを使う場合、自由度は高いものの、ルーティング、データ管理、ビルド構成、ページ生成の方針などを自分で決める部分が増えます。小さな静的サイトでは、その自由度が逆に管理コストになることがあります。

Nuxt.jsはVueベースでページ構成を作りやすいフレームワークですが、フルスタック寄りの機能も多く、このホームページには少し大きく感じました。動的なページやアプリ的なUIが中心なら候補になりますが、今回は文章と静的ページが中心です。

Astroなら、必要なところだけをコンポーネント化し、ブログ記事はMarkdownで管理し、ビルド後は軽い静的サイトとして公開できます。今のサイト規模には、ReactやNuxt.jsよりAstroのほうが自然でした。

Astro移行で変えたこと

Astroへの移行では、見た目を変えるだけではなく、サイトの更新方法を整理しました。

  • Header.astro や Footer.astro などの共通コンポーネントを作成
  • ブログ記事をMarkdownファイルで管理
  • 記事一覧ページをデータから自動生成
  • ブログ詳細ページを共通テンプレート化
  • CSSをサイト全体のトーンに合わせて整理
  • ビルド後に静的ファイルとして出力

これにより、新しいブログ記事を追加するときにHTMLを直接書き換える必要が少なくなりました。src/content/blog にMarkdownファイルを追加すれば、一覧ページと詳細ページに反映される構成です。

コンポーネント化で管理しやすくなった部分

Astroに移行して特に便利になったのは、共通パーツをコンポーネントとして分けられることです。

ヘッダー、フッター、ローダー、Cookieバナーのようなパーツは、サイト内で何度も使います。これらをコンポーネント化しておけば、デザインや文言を変更したいときも一箇所を直すだけで済みます。

<Loader />
<Header homeHref="/" />
<main>
  <Content />
</main>
<Footer />
<CookieBanner />

ページ全体の構造も読みやすくなりました。どの部品でページができているのかが見えやすくなり、あとから修正するときの負担も減ります。

Markdownブログにしたメリット

Astroへ移行したことで、ブログ記事をMarkdownで書けるようになりました。

Markdownブログにすると、本文を書くときにHTMLタグを細かく書く必要がありません。見出し、箇条書き、引用、コードブロックなどを文章に近い形で管理できます。

記事のタイトル、日付、説明文はフロントマターにまとめています。

---
title: "静的ホームページをAstroへ移行した理由と手順"
date: "2026-06-10"
description: "HTML/CSS/JavaScriptで作った静的ホームページをAstroへ移行した理由をまとめます。"
---

この情報を使って、記事一覧のカード、詳細ページの見出し、meta descriptionを生成できます。ブログ記事が増えても、同じルールで管理できるのが大きなメリットです。

SEO面でAstroが合っている理由

静的ホームページやブログでは、検索エンジンにページ内容を正しく伝えることが大切です。

Astroは静的HTMLを生成できるため、ページのタイトル、見出し、本文、descriptionをHTMLとして素直に出力できます。JavaScriptに依存しすぎない構成にできるので、個人ブログやポートフォリオサイトのSEOにも向いています。

今回の記事ページでは、次の点を意識しています。

  1. 記事タイトルに主要キーワードを入れる
  2. descriptionで記事内容を具体的に説明する
  3. 見出しに「Astro移行」「React」「Nuxt.js」「Markdownブログ」などの関連語を入れる
  4. 本文で移行理由とメリットを自然に説明する
  5. 一覧ページと詳細ページの導線を分ける

無理にキーワードを詰め込むのではなく、読者が知りたい内容を見出しで整理することを意識しました。

Astro移行後のサイト運用

Astroに移行したことで、今後の更新はかなり進めやすくなりました。

新しい記事を追加するときはMarkdownファイルを増やすだけで済みます。共通パーツを修正したいときは、対応するコンポーネントを編集します。デザイン調整も、ブログ詳細ページや記事一覧ページなど、対象を分けて進めやすくなりました。

今後は、次のような改善も追加していく予定です。

  • ブログ記事のタグ機能
  • 関連記事や前後記事へのリンク
  • OGP画像の設定
  • 記事ごとのmeta情報の強化
  • 画像付き記事のレイアウト調整

まずは小さく運用しながら、必要な機能を少しずつ足していきます。

まとめ

静的なHTML/CSS/JavaScriptのホームページをAstroへ移行することで、表示の軽さを保ちながら、更新しやすい構成にできました。

ReactやNuxt.jsも強力な選択肢ですが、今回のような個人サイト、ポートフォリオ、静的ブログでは、Astroのほうがシンプルに目的へ合っていました。

Astroは、静的サイトをコンポーネント化したい人、Markdownでブログを書きたい人、軽いホームページを保ちながら運用しやすくしたい人に向いていると感じています。