Astroプロジェクトの準備ができたら、次は新しいページを追加してみます。ここでは、<h1> 見出しと <p> 段落だけのシンプルな「About」ページを作成し、さらにトップページからそのページへリンクを設定する手順を紹介します。
Astroのページ作成の仕組み
Astroでは、src/pages/ ディレクトリの中に .astro という拡張子のファイルを作成するだけで、自動的にそのファイル名に基づいたURLのページが生成されます。
ページの作成とリンク設定の手順
1.about.astro ファイルを作成する
プロジェクト内の src/pages/ ディレクトリに、about.astro という名前で新しいファイルを作成します。
your-project/
└── src/
└── pages/
└── about.astro <-- これを作成！
└── index.astro (既存のトップページ)
2.about.astro にコードを記述する
作成した about.astro ファイルを開き、以下のコードを貼り付けます。これは基本的なHTML構造に、見出しと段落を追加したものです。
---
// このフロントマター部分にはJavaScriptのコードを書けますが、
// 今回はシンプルなので空にしておきます。
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Aboutページ</title>
</head>
<body>
<h1>このサイトについて</h1>
<p>これはAstroで作られたシンプルなAboutページです。</p>
</body>
</html>
-
<html lang="ja">: ページの言語を日本語に設定します。 -
<head>: ページのタイトル (<title>) や文字コード (<meta charset="utf-8">) などを指定します。 -
<body>: ブラウザに実際に表示される内容を記述します。今回は<h1>と<p>タグを使いました。
3.トップページ (index.astro) からリンクを追加する
次に、既存のトップページ (src/pages/index.astro) を編集して、作成した about.astro へのリンクを追加しましょう。
src/pages/index.astro ファイルを開き、<body> タグ内の適切な場所に以下の <a> タグを追加します。
---
// index.astro の既存のコード...
---
<Layout>
{/* ↓ このリンクを追加 */}
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">Aboutページへ</a></li>
</ul>
</nav>
<Welcome />
</Layout>
-
<a href="/about">Aboutページへ</a>: これがリンクを作成するHTMLタグです。 -
href="/about": リンク先のURLを指定します。Astroでは、src/pages/about.astroファイルは自動的に/aboutというURLに対応付けられます。
4.作成したページとリンクを確認しよう
Astroの開発サーバーが起動している状態 (npm run dev などを実行中) で、ブラウザで確認しましょう。
- まず、トップページ (
http://localhost:4321/) を開きます。追加した「Aboutページへ」というリンクが表示されているはずです。 - そのリンクをクリックすると、
/aboutページ（先ほど作成した「このサイトについて」と表示されるページ）に移動することを確認してください。 - 直接
http://localhost:4321/aboutにアクセスしても、同じページが表示されます。
これで、新しいページの追加と、既存ページからのリンク設定が完了しました！ Astroではこのように直感的にページを作成し、連携させることができます。