ページの追加方法

新しいページを追加する手順は、Markdown ファイルを置くだけです。このページ自体もその一例です。

手順

1. `src/content/docs/` 配下に `.md` ファイルを作る

src/content/docs/
├── index.md                     → /(トップページ)
├── guides/
│   ├── adding-pages.md          → /guides/adding-pages/(このページ)
│   └── markdown-syntax.md       → /guides/markdown-syntax/
└── reference/
    └── configuration.md         → /reference/configuration/

ファイルのパスがそのまま URL になります。slug を自分で指定する必要はありません。

2. フロントマターを書く

ファイルの先頭に、--- で囲んだフロントマターを書きます。必須は title のみです。

---
title: ページのタイトル
description: 検索や SNS シェアで使われる説明文(推奨)。
sidebar:
  order: 1 # サイドバー内での並び順(任意)
---

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

よく使うフィールド:

フィールド	必須	説明
`title`	✅	ページタイトル。サイドバーのラベルにもなる
`description`	—	`<meta>` に出力される説明文
`sidebar.order`	—	自動生成サイドバー内の並び順(小さいほど上)
`sidebar.label`	—	サイドバーでの表示名を `title` と変えたいとき

3. サイドバーへの反映を確認する

サイドバーは astro.config.mjs で設定しています。方式は2つあります。

自動生成(autogenerate) — 「ガイド」グループはこの方式です。guides/ ディレクトリにファイルを置くだけで、自動的にサイドバーに追加されます。
手動指定(items) — 「リファレンス」グループはこの方式です。ページを追加したら astro.config.mjs にもエントリを追記します。

sidebar: [
  { label: 'はじめに', slug: 'index' },
  {
    // ファイルを置くだけで追加される方式
    label: 'ガイド',
    items: [{ autogenerate: { directory: 'guides' } }],
  },
  {
    // 表示するページと順序を明示的に管理する方式
    label: 'リファレンス',
    items: [{ label: '設定リファレンス', slug: 'reference/configuration' }],
  },
],

4. 開発サーバーで確認する

npm run dev

ファイルを保存すると自動でリロードされます。フロントマターに誤りがある場合はビルドエラーとして検出されます。