HTMLとCSSでページを作れるようになると、「ヘッダーを全ページで直すのが大変」「作品ページを増やしたい」と感じることがあります。そんなときに試したいのがAstroです。この記事では、導入から2ページの作成、共通ヘッダー、CSS、公開用ファイルの作成までを体験します。
対象はHTML・CSSの基本を学んだ方です。ReactやVueの学習は前提にしません。まずは小さな静的サイトを作りましょう。
Astroで何ができる？
Astroは、コンテンツ中心のWebサイトを作るためのフレームワークです。紹介サイト、ポートフォリオ、ブログなどで、部品を組み合わせてページを作れます。標準の静的出力では、制作中のファイルをビルドしてHTMLなどの公開用ファイルに変換します。
| 仕組み | 主な役割 |
|---|---|
| HTML・CSS | 文章の構造と見た目を書く基礎です。Astroでも使います。 |
| Vite | 開発サーバーやビルドなどを支えるツールです。AstroはViteを利用しています。 |
| Astro | ページ、共通パーツ、レイアウトなどを組み立てる仕組みを提供します。 |
| WordPress | 管理画面からの記事投稿や運用を含むCMSです。静的なAstroサイトに同じ管理画面が自動で付くわけではありません。 |
AstroとViteは役割が異なります。先にViteの操作感を知りたい方は、Viteの導入・使い方も参考にしてください。
用意するもの
- Node.jsとnpm
- Visual Studio Codeなどのエディター
- Chromeなどのブラウザー
- ターミナルを使える環境
VS Codeには公式のAstro拡張機能を入れると、構文の色分けや編集支援が利用できます。インストールできない教室PCでは、公式のastro.newからブラウザー上の環境を試す方法もあります。オンライン環境の利用条件と保存方法は事前に確認してください。
ターミナルで次を実行します。
node -v
npm -v2026年10月30日に確認したAstro 7.4.4のNode.js要件は22.23.4以上です。奇数メジャーバージョンはサポート対象外です。対応する偶数のLTS版を使い、導入時は公式インストールガイドと対象バージョンの要件も確認してください。以前入れたNode.jsが22系でも、22.12.0などではこの要件を満たしません。
プロジェクトを作って起動する
作業フォルダーの親にあたる場所で、次を実行します。
npm create astro@latest作成先を聞かれたらastro-practiceと入力します。テンプレートは最小構成の「Empty」相当を選びます。質問文はCLIの版で変わることがあります。依存パッケージのインストールは実行し、Gitの初期化は授業の方針に合わせて選択してください。
cd astro-practice
npm install
npm run devウィザードですでにインストール済みでも、上のnpm installを実行できます。ターミナルのLocalに表示されたURLをブラウザーで開きます。終了するときはターミナルでCtrl + Cです。
最初に覚えるファイルの場所
| 場所 | 役割 |
|---|---|
src/pages/index.astro |
トップページを作ります。 |
src/pages/about.astro |
「このサイトについて」のページを作ります。 |
src/components/Header.astro |
複数ページから使う共通ヘッダーです。フォルダーも自分で作成します。 |
public/ |
そのまま配信する画像などを置きます。 |
astro.config.mjs |
公開先のパスなどを設定します。 |
dist/ |
ビルド後に作られる公開用ファイルです。直接編集しません。 |
共通ヘッダーを作る
src/components/Header.astroを新規作成し、次を保存します。ファイル名の大文字と小文字もそろえてください。
---
const base = import.meta.env.BASE_URL;
---
<header class="site-header">
<a href={base}>はじめてのAstro</a>
<nav aria-label="メインメニュー">
<a href={base}>ホーム</a>
<a href={base + 'about/'}>このサイトについて</a>
</nav>
</header>
<style>
.site-header {
padding: 24px;
background: #eef5f5;
}
nav {
display: flex;
gap: 24px;
margin-top: 16px;
}
</style>上の---で囲んだ部分には、HTMLを組み立てるための処理を書きます。baseはサイトの設置場所です。ドメイン直下だけでなく、あとで説明するサブフォルダー公開にも対応できるよう、リンクの先頭に使っています。
<style>内のCSSは、基本的にこのコンポーネント内へ適用されます。別のコンポーネントの中まで自動で同じ範囲に適用されるわけではありません。共通CSSを用意する方法は、次の学習段階で取り入れましょう。
トップページを作る
src/pages/index.astroの内容を次に置き換えます。
---
import Header from '../components/Header.astro';
const title = 'Astroで作った最初のページ';
---
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
</head>
<body>
<Header />
<main>
<h1>{title}</h1>
<p>HTMLとCSSの知識を使って、ページを作っています。</p>
</main>
</body>
</html>
<style>
body {
margin: 0;
color: #253333;
font-family: sans-serif;
line-height: 1.8;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 32px 24px;
}
</style>import Header ...で部品を読み込み、<Header />で配置しています。{title}は変数の内容を表示する書き方です。通常のHTMLと違うのは、このような部品と変数の仕組みです。見出し、段落、class、CSSの知識はそのまま役立ちます。
保存すると開発画面へ反映されます。ヘッダーと本文が表示されるか確認してください。
2ページ目を追加して移動する
src/pages/about.astroを作り、index.astroの内容をコピーします。そのうえで、次の2箇所を変更します。
const title = 'このサイトについて';に変更します。- 本文の段落を「Web制作の練習用サイトです。」に変更します。
ヘッダーの「このサイトについて」から2ページ目に移動し、「ホーム」で戻れるか試します。次にHeader.astroのサイト名を変更し、両ページへ同じ変更が反映されるか見てください。これが共通パーツの利点です。
JavaScriptはどこに書く？
---内の処理は、標準の静的出力ではビルド時などに実行されます。ここにクリック処理やdocument.querySelectorを書いても、ブラウザーでそのまま動くわけではありません。
ボタンの操作などは<script>に書きます。例えばトップページの<main>内に次を追加できます。
<button id="messageButton" type="button">メッセージを見る</button>
<p id="message" aria-live="polite"></p>
<script>
const button = document.querySelector('#messageButton');
const message = document.querySelector('#message');
button?.addEventListener('click', () => {
if (message) {
message.textContent = 'AstroでもJavaScriptを使えます。';
}
});
</script>Astroコンポーネントは標準でHTMLを出力しますが、明示的に追加したブラウザー用スクリプトは配信されます。「AstroならJavaScriptが一切送られない」という意味ではありません。
公開用ファイルを作る
npm run build
npm run preview標準の静的出力ではdistにHTMLやCSSなどが生成されます。previewのURLで、2ページの移動と見た目を確認します。これは完成版のローカル確認用であり、そのまま本番サーバーとして使うものではありません。
静的サイトとして公開する場合は、distの中身を公開先へアップロードします。srcやnode_modulesを一般的な静的公開先へ丸ごと送る必要はありません。修正後は元のファイルを編集し、再びビルドしてアップロードします。
レンタルサーバーのサブフォルダーに置く場合
例えば/astro-practice/の中に公開するなら、astro.config.mjsを次のようにします。ここでは、このパスを説明用の設置先として使っています。
import { defineConfig } from 'astro/config';
export default defineConfig({
base: '/astro-practice/',
trailingSlash: 'always',
});設定後は開発サーバーを再起動し、表示されたURLを開きます。npm run buildも再実行します。公開先のastro-practiceフォルダーにdistの中身を置くと、意図した場所へリンクとCSSをそろえられます。この記事の共通ヘッダーはBASE_URLを使っているので、この設定に追従します。自分で画像のURLを書く場合も、サブフォルダーを含むパスになっているか確認してください。
既存のWordPressや作品があるフォルダーへ上書きしないでください。練習用の空フォルダーを使います。ドメイン直下へ公開するなら、上のbase指定は外して構いません。
静的にビルド済みのファイルを配信するだけなら、公開サーバー側でAstroやNode.jsを動かす必要はありません。一方、オンデマンドのサーバーレンダリングを使う場合は、アダプターと対応する実行環境が必要です。レンタルサーバーならどの方式でも動くとは限りません。
PHPやお問い合わせフォームも置き換えられる？
AstroはPHPの機能を自動で置き換えるものではありません。フォームの見た目はHTMLで作れますが、メール送信やデータ保存には別の受け取り先が必要です。外部フォームサービス、PHPの処理先、サーバー実行環境上のエンドポイントなどを目的に合わせて設計します。
まずは今回の静的な2ページを完成させ、送信処理は別の課題として学ぶと整理しやすくなります。HTMLにAPIキーやメールの認証情報を書いて公開しないでください。
つまずいたときの確認表
| 症状 | 確認すること |
|---|---|
| インストール時にNode.jsのエラー | node -vと使用するAstroの要件を比較します。更新後はターミナルを開き直します。 |
| package.jsonが見つからない | cd astro-practiceでプロジェクト内へ移動したか確認します。 |
| Headerを読み込めない | フォルダー、相対パス、Header.astroの大文字と小文字を確認します。 |
| ページを直接開くと動かない | .astroをダブルクリックせず、npm run devで開きます。 |
| クリック処理が動かない | ブラウザー用処理を---内に書いていないか確認します。 |
| 公開後だけCSSやリンクが壊れる | base、アップロード位置、_astroなどの出力ファイルの不足を確認します。 |
| 修正が公開されない | 再ビルド、更新ファイルの転送、ブラウザーの再読み込みを順に確認します。 |
実践課題と完成チェック
2ページを自分のプロフィールサイトへ変更しましょう。サイト名、自己紹介、学習目標を書き換え、ヘッダーの色と余白も調整します。
- 2ページで同じヘッダーが表示される
- ヘッダーを1回編集すると両ページが変わる
- ホームと紹介ページを行き来できる
- ボタンを追加した場合、クリックで文章が表示される
npm run buildが成功するnpm run previewでリンクとCSSを確認できる- スマホ幅でも文字とナビがはみ出さない
まずは共通パーツまで使えれば十分です。次に共通レイアウト、Markdown、コンテンツ管理へ進みましょう。目的に合う公開方法はWebサイト公開ガイド、ファイルの転送と確認はHTML・CSSで作ったページを公開する方法にまとめています。静的な練習サイトは無料公開で足りる場合もあるので、先にサーバーを契約する必要はありません。
公式資料と検証環境
確認日：2026年10月30日。掲載コードはAstro 7.4.4、Node.js 24.22.1でビルド検証しています。パッケージの更新により導入時の質問や要件が変わる場合があります。
