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ではこのように直感的にページを作成し、連携させることができます。