Start Guide

How to Start

1. Create Project

npm create astro@latest

ウィザードに従うだけで推奨設定が完了します。TypeScriptの利用設定もここで行えます。

2. Start Dev Server

npm run dev

ローカルサーバー(http://localhost:4321)が立ち上がります。ホットリロード対応。

Directory Structure

Astroが強制する「ルール」と、保守性を高めるための「推奨構成」を整理します。

Astro's Rules (Must)

src/
├── pages/            # 【必須】ルーティングはここに基づく
│   └── index.astro   # URL: /
└── env.d.ts          # 型定義ファイル
public/               # 静的アセット (そのまま配信される)
astro.config.mjs      # 設定ファイル

Astroが動作するために最低限守らなければならないルールです。

Recommended Style

src/
├── components/       # コンポーネントを用途別に分類
│   ├── common/       # 全ページ共通 (Header, Footer, Button)
│   └── pages/        # ページごとの専用パーツディレクトリ
│       ├── home/     # Homeページ専用
│       └── about/    # Aboutページ専用
├── layouts/          # 共通レイアウト (<html><body>...)
├── data/             # 【重要】テキストや設定値を分離
│   ├── content.ts    # AIによる編集対象
│   └── navigation.ts 
└── styles/           # グローバルCSS

大規模運用やAI連携を見据えた、独自の推奨構成です。