Astroを自動CLIでインストール

Astroをインストールする準備はできましたか？このガイドにしたがってcreate astroCLIを使用し、開始します。

前提条件

Node.js - v18.14.1 またはそれ以上。
テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。
ターミナル - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。

インストール

create astro は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。新しいAstroプロジェクトをセットアップするためのすべてのステップを案内してくれます。いくつかの異なるスターターテンプレートから選んだり、 --template 引数を使用して独自のテンプレートを使用できます。

1. セットアップウィザードを実行する

ターミナルで以下のコマンドを実行すると、便利なインストールウィザードが起動します。

# npmで新しいプロジェクトを作成する
npm create astro@latest

# pnpmで新しいプロジェクトを作成する
pnpm create astro@latest

# yarnで新しいプロジェクトを作成する
yarn create astro

create astroはどのディレクトリでも実行でき、始める前にプロジェクト用の新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだなければ、ウィザードが自動的に作成します。

うまくいくと、「Liftoff confirmed. Explore your project!」というメッセージの後に、いくつかの推奨する「Next steps」が表示されるはずです。新しいプロジェクトディレクトリにcdで移動し、Astroの使用を開始します。

もしCLIウィザードでnpm installのステップをスキップした場合は、続行する前に依存関係をインストールしてください。

2. Astroをスタートする ✨

Astroには、プロジェクト開発に必要なものをすべて備えた開発サーバーが内蔵されています。astro devコマンドを実行すると、ローカルの開発サーバーが起動し、新しいウェブサイトが実際に動作しているところを初めて見られるようになります。

すべてのスターターテンプレートには、あなたに代わってastro devを実行するスクリプトがあらかじめ設定されています。お好みのパッケージマネージャーでこのコマンドを実行し、Astro開発サーバを起動します。

npm run dev

pnpm run dev

yarn run dev

うまくいけば、Astroはhttp://localhost:4321でプロジェクトの開発サーバーを起動します！

Astroは src/ ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。

ブラウザでサイトを表示すると、AstroのDev Toolbarを利用できます。開発中に、アイランドを検査したり、アクセシビリティの問題を見つけたりするのに役立ちます。

ブラウザでプロジェクトを開けない場合は、devコマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。

スターターテンプレート

また、create astroコマンドに--template引数を渡すことで、公式サンプルや任意のGitHubリポジトリのmainブランチをベースにした新しいastroプロジェクトを開始できます。

# 公式サンプルで新しいプロジェクトを作成する
npm create astro@latest -- --template <example-name>

# GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
npm create astro@latest -- --template <github-username>/<github-repo>

# 公式サンプルで新しいプロジェクトを作成する
pnpm create astro@latest --template <example-name>

# GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
pnpm create astro@latest --template <github-username>/<github-repo>

# 公式サンプルで新しいプロジェクトを作成する
yarn create astro --template <example-name>

# GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
yarn create astro --template <github-username>/<github-repo>