先に要点
- 必要なのは Node.js とターミナルの基本操作だけ。Astro は
npm create astro@latestでひな型（プロジェクトの土台）を作れます。 - 開発中は
npm run devでローカルサーバーを起動し、localhost:4321をブラウザで開いて確認します。保存すると自動で反映されます。 - 公開用のファイルは
npm run buildで作られ、既定でdist/フォルダに静的ファイルが出力されます。 - あとは
dist/を静的ホスティングに置くだけ。Git連携すれば自動デプロイもできます（置き先は[Astroはどこにデプロイする？](/articles/where-to-deploy-astro-hosting-options)）。 - ページは
src/pages/にファイルを置くと、その名前がそのままURLになります（ファイルベースルーティング）。まずここを触るのが分かりやすいです。
Astroのプロジェクトはあるけどコマンドやフォルダがよく分からない ── 初めてだと、どこから触ればいいか迷います。Astroは手順がシンプルなので、最初の流れさえ掴めばすぐ動かせます。
この記事では、作成 → 開発 → ビルド → 公開という一連の流れと、フォルダ構成の見方を整理します。Astro自体の位置づけはAstroとは？を先に読むと理解が早いです。
事前に用意するもの
必要なのは Node.js（新しめのLTS版が無難）と、コマンドを打つターミナルだけです。エディタは何でも構いませんが、補完が効くものが快適です。特別なサーバーやデータベースは、静的サイトなら不要です。
プロジェクトを作る
ターミナルで次のコマンドを実行すると、対話形式でひな型を作れます。
テンプレートを選べるので、「まず動くものを見たい」ならサンプル入り、「一から作りたい」なら空を選ぶとよいです。
開発サーバーで確認しながら作る
プロジェクトのフォルダで npm run dev を実行すると、開発サーバーが立ち上がります。ブラウザで localhost:4321 を開くと、今の状態が表示されます。ファイルを保存すると自動で画面が更新（ホットリロード）されるので、編集しながら結果をすぐ確認できます。
フォルダ構成の見方
最初に押さえると迷いにくい主要フォルダは次の通りです。
| 場所 | 役割 |
|---|---|
src/pages/ | ページ。置いたファイル名がそのままURLになる（ルーティング） |
src/components/ | 再利用する部品（.astro や React などのコンポーネント） |
src/content/ | 記事などのコンテンツ（Content Collectionsで管理） |
public/ | 画像などをそのまま配信する静的ファイル置き場 |
astro.config.* | 出力モードやアダプタ、統合などの設定ファイル |
ページを足してみる
src/pages/ にファイルを置くと、それがそのままURLになるのがAstroの分かりやすい所です。たとえば src/pages/about.astro を作れば /about でアクセスできます。.astro ファイルは、上部にJavaScript/TypeScript、下部にHTMLを書く素直な形なので、HTMLが分かれば入りやすいはずです。動きが要る部分だけ、アイランドとしてコンポーネントに client:* を付けます。
ビルドして公開する
作ったサイトを公開するには、npm run build を実行します。既定では dist/ フォルダに、そのまま配信できる静的ファイル（HTML/CSS/JS）が出力されます。
置き先の選び方はAstroはどこにデプロイする？で詳しく扱っています。動的処理が要らなければ、静的ホスティングの無料枠で十分に始められます。
つまずきやすいポイント
Node.jsのバージョン
古すぎるNode.jsだとインストールやビルドで失敗することがある。新しめのLTSを使うと無難。
ポートは4321
開発サーバーの既定は localhost:4321。3000番などと勘違いしないように。使用中なら別ポートで起動することも。
出力先はdist
公開するのは dist/ の中身。ソースをそのまま上げても動かない。ビルドしてから載せる。
AI生成物は書き方を確認
AIが古い書き方を混ぜることがある。Astroは進化が速いので、公式ドキュメントで現行の作法を確認する。
Astro入門に関するよくある質問
プログラミング初心者でもAstroを始められますか？
始めやすい方です。HTML/CSSの知識が活きるため、Web制作の入口として向いています。まずは src/pages/ にページを足すところから触ると、URLとファイルの対応が分かって理解が進みます。
npm create astro@latest が動きません。
多くはNode.jsが入っていない、またはバージョンが古いのが原因です。新しめのLTS版のNode.jsを入れ直してから、もう一度実行してみてください。ネットワークやプロキシ環境が影響することもあります。
npm run dev で開いたページを公開できますか？
dev はあくまで手元の開発用です。公開するには npm run build で dist/ を生成し、それをホスティングに載せます。開発サーバーのURL（localhost）は自分のPCの中だけで見えるものです。
AIに作ってもらったAstroプロジェクトはどう動かしますか？
基本は同じです。フォルダで npm install（初回）→ npm run dev で表示を確認し、問題なければ npm run build して公開します。まず静的サイトかどうかを確認しておくと、公開先の選択がスムーズです。
ビルドしたのに反映されません。
ブラウザやホスティングのキャッシュが残っていることがあります。再ビルドして再デプロイし、キャッシュを消して確認してください。出力先（dist/）を正しく載せているかも見直します。
まとめ
Astroの最初の一歩は、作成 → 開発 → ビルド → 公開のシンプルな流れです。npm create astro@latest でひな型を作り、npm run dev で localhost:4321 を見ながら編集し、npm run build で dist/ に静的ファイルを生成して、静的ホスティングに載せるだけ。ページは src/pages/ にファイルを置けばURLになり、動く部分だけアイランドにする、という組み立てです。Node.jsのバージョンやポート4321、公開するのは dist/ という点だけ押さえれば、つまずきにくく始められます。
参考リンク
- 関連記事: Astroとは？ / Astroはどこにデプロイする？ / Content Collectionsとは
- 使い分け: AstroとNext.jsはどっち？ / なぜ今Astroが選ばれる？
- 用語集: Astro / アイランドアーキテクチャ
- 公式: Astro Docs: Getting started