# Fumadocs (Framework Mode, Astro): クイックスタート
URL: /ja/docs/astro
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/index.ja.mdx

Fumadocs を使ってみる

# Set up Fumadocs

Instructions for AI agents to set up Fumadocs on Astro. The setup changes between versions, so run the commands below and read the linked docs instead of writing the setup from memory. Add `.md` to the URL of a docs page to read it as Markdown.

## New Site

Create a new docs site in a new folder, or as a workspace package of a monorepo:

```bash
npx create-fumadocs-app@latest my-docs --template astro --install --yes
```

- `my-docs` is the folder to create.
- `--yes` skips the prompts, and the options you don't pass use their defaults. The options are listed in https://fumadocs.dev/docs/cli/create-fumadocs-app.md

## Existing App

To add docs to an existing app, run the CLI in the folder of the app:

```bash
npx @fumadocs/cli@latest init
```

- The CLI detects the framework, and adds the docs pages with their own layout beside the existing routes.
- `--i18n` sets up internationalization.
- The CLI asks before it overwrites a file. Without a terminal, it keeps the file and prints its name. Pass `--yes` only when every file it writes can be overwritten.

To set up by hand, or to merge a file that the CLI kept, follow https://fumadocs.dev/docs/astro/manual-installation.md

## After the Setup

Both commands print the next steps. Start the dev server and open the docs, at `/docs` unless the output names another path.

For the tasks that follow, read the docs page of the task first:

- Writing pages: https://fumadocs.dev/docs/astro/markdown.md
- Organizing pages and folders: https://fumadocs.dev/docs/astro/page-conventions.md
- Customizing the UI: https://fumadocs.dev/docs/astro/guides/customize-ui.md
- Changing the theme and colors: https://fumadocs.dev/docs/ui/theme.md
- Other tasks: https://fumadocs.dev/llms.txt lists every docs page.

## 用語 [#terminology]

**Markdown/MDX:** Markdown は、書式付きテキストを作成するためのマークアップ言語です。Fumadocs は Markdown と MDX(Markdown のスーパーセット)をネイティブにサポートしています。

**[Bun](https://bun.sh):** JavaScript ランタイムです。本ガイドではスクリプトの実行に使用します。Node.js を使いたい場合は、代わりに [unrun](https://gugustinette.github.io/unrun/guide/getting-started.html#cli) をお試しください。

より詳細なカスタマイズを行うには、React.js の基本的な知識があると役立ちます。

## 自動インストール [#automatic-installation]

Node.js 22 以上が必要です。

```npm
npm create fumadocs-app
```

使用する組み込みテンプレートについて、次の項目を選択するよう求められます。

* **フレームワーク**: Next.js、React Router、TanStack Start、Waku、Astro
* **コンテンツソース**: Fumadocs MDX、または Astro のコンテンツコレクション

新しい Fumadocs アプリが初期化され、以下の機能がデフォルトで設定されます。

* [LLM 連携](/docs/astro/integrations/llms)
* [動的なメタデータ画像](/docs/astro/integrations/og)

<Callout title="既存のコードベースに導入する場合">
[手動インストール](/docs/astro/manual-installation)ガイドに従って導入できます。
</Callout>

### さあ、始めましょう！ [#enjoy]

docs フォルダーに最初の MDX ファイルを作成しましょう。

```mdx title="content/docs/index.mdx"
---
title: Hello World
---

## Yo what's up
```

開発モードでアプリを起動します。

```npm
npm run dev
```

http://localhost:4321/docs を開くと、ページを確認できます。

## よくある質問 [#faq]

よくある疑問とその回答をまとめています。

<Accordions>
<Accordion id="upgrade-fumadocs" title="APIが見つからない、またはバグによるエラーが発生する場合は?">
お探しのAPIや修正は、新しいバージョンで提供されている可能性があります。[Fumadocsをアップグレード](/docs/astro/upgrade)してから、もう一度お試しください。
</Accordion>

<Accordion id="change-base-url" title="ドキュメントのベースルートを変更するにはどうすればよいですか?">
ルーティングは Astro が処理します。まず、docs ルートを移動します (`/docs/*` -&gt; `/info/*`) 。

`src/pages/docs` を `src/pages/info` に移動します。

最後に、`source.ts` でページのベース URL を更新します。

```ts title="lib/source.ts"
import { loader } from 'fumadocs-core/source';

export const source = loader({
  baseUrl: '/info', // 新しい値に変更 [!code highlight]
});
```

テンプレートでは、この値は `lib/shared.ts` 内で `docsRoute` として定義されています。Markdown のリンクにも反映されるよう、こちらで変更してください。
</Accordion>

<Accordion id="multi-docs" title="複数のドキュメントサイトを実装するにはどうすればよいですか?">
[レイアウトタブ](/docs/ui/layouts/docs#layout-tabs)の使用をおすすめします。
</Accordion>

<Accordion id="custom-layout-docs-page" title="Docs レイアウトを使わずに /docs 内にページを作成するには？">
`Docs` アイランドを使用しない独立した `.astro` ページを `src/pages/docs/` に作成します。同じ URL が重複しないよう、`content/docs` から対応する MDX ファイルを削除してください。
</Accordion>
</Accordions>

## さらに詳しく [#learn-more]

初めての方もご安心ください。ご質問はいつでも歓迎しています。

わかりにくい点があれば、[Github Discussion](https://github.com/fuma-nama/fumadocs/discussions) でフィードバックをお寄せください！

### コンテンツの執筆 [#writing-content]

ドキュメントを執筆する際は、以下を必ずお読みください。

<Cards>
<Card href="/docs/markdown" title="Markdown">
/docs/astro/markdown" title="Markdown">
  Fumadocs には、コンテンツ執筆に役立つ追加機能が用意されています。
</Card>

<Card href="/docs/navigation" title="ナビゲーション">
/docs/astro/navigation" title="ナビゲーション">
  ナビゲーション構造をカスタマイズする方法を説明します。
</Card>

<Card href="/docs/page-conventions" title="ページスラッグとページツリー">
/docs/astro/page-conventions" title="ページスラッグとページツリー">
  コンテンツを整理する方法を説明します。
</Card>

<Card href="/docs/ui/components" title="コンポーネント" description="ドキュメントの充実に使える、利用可能なコンポーネントの一覧です" />
</Cards>

### 特殊な要件 [#special-needs]

<Cards>
<Card href="/docs/deploying/static" title="静的エクスポートの設定" description="ドキュメントで静的エクスポートを有効にする方法を説明します">
/docs/astro/deploying/static
</Card>

<Card href="/docs/internationalization" title="国際化" description="i18n を有効にする方法を説明します">
/docs/astro/internationalization
</Card>

<Card href="/docs/ui/theme" title="カラーテーマ" description="Fumadocs UI にテーマを追加します" />

<Card href="/docs/ui/layouts" title="レイアウト" description="Fumadocs UI のレイアウトをカスタマイズします" />
</Cards>