Astroを自動CLIでインストール
Astroをインストールする準備はできましたか?自動または手動セットアップガイドにしたがって開始してください。
- Node.js -
v16.12.0
またはそれ以上。 - テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。
- ターミナル - Astroは、コマンドラインインターフェイス(CLI)からアクセスします。
インストール
Section titled インストールcreate-astro
は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。新しいAstroプロジェクトをセットアップするためのすべてのステップを案内してくれます。いくつかの異なるスターターテンプレートから選んだり、 --template
引数を使用して独自のテンプレートを使用できます。
1. セットアップウィザードを実行する
Section titled 1. セットアップウィザードを実行するターミナルで以下のコマンドを実行すると、便利なインストールウィザード、create-Astro
が起動します。
# npmで新しいプロジェクトを作成する
npm create astro@latest
# pnpmで新しいプロジェクトを作成する
pnpm create astro@latest
# yarnで新しいプロジェクトを作成する
yarn create astro
create-astro
はどのディレクトリでも実行でき、始める前にプロジェクト用の新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだなければ、ウィザードが自動的に作成します。
すべてがうまくいけば、「Ready for liftoff!」というメッセージの後に、いくつかの推奨する「Next steps」が表示されるはずです。新しいプロジェクトディレクトリにcd
で移動し、Astroの使用を開始します。
もしcreate-astro
ウィザードでnpm install
のステップをスキップした場合は、続行する前に依存関係をインストールしてください。
2. Astroをスタートする ✨
Section titled 2. Astroをスタートする ✨Astroには、プロジェクト開発に必要なものをすべて備えた開発サーバーが内蔵されています。astro dev
コマンドを実行すると、ローカルの開発サーバーが起動し、新しいウェブサイトが実際に動作しているところを初めて見られるようになります。
すべてのスターターテンプレートには、あなたに代わってastro dev
を実行するスクリプトがあらかじめ設定されています。お好みのパッケージマネージャーでこのコマンドを実行し、Astro開発サーバを起動します。
npm run dev
pnpm run dev
yarn run dev
うまくいけば、Astroはhttp://localhost:3000でプロジェクトの開発サーバーを起動します!
Astroは src/
ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。
ブラウザでプロジェクトを開けない場合は、dev
コマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。
次のステップ
Section titled 次のステップ成功です!これでAstroを使った開発を始める準備ができました!🥳
ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。
📚 フレームワークを追加:インテグレーションガイドで、npx astro add
を使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。
📚 サイトをデプロイ:デプロイガイドで、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。
📚 コードベースを理解:Astroのディレクトリ構造については、ディレクトリ構造ガイドで詳しく説明します。