自動CLIでAstroをインストール
Astroをインストールする準備はできましたか?自動または手動セットアップガイドにしたがって開始してください。
- Node.js -
14.15.0、v16.0.0、またはそれ以上。 - テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。
- ターミナル - Astroは、コマンドラインインターフェイス(CLI)からアクセスします。
インストール
Section titled インストールcreate-astro は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。
1. セットアップウィザードを実行する
Section titled 1. セットアップウィザードを実行するターミナルで以下のコマンドを実行すると、便利なインストールウィザード、create-Astroが起動します。
# npm
npm create astro@latest
# yarn
yarn create astro
# pnpm
pnpm create astro@latest
create-astroウィザードは、新しい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
npm run dev
# yarn
yarn run dev
# pnpm
pnpm run dev
うまくいけば、Astroはhttp://localhost:3000でプロジェクトの開発サーバーを起動します!
Astroは src/ ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。
ブラウザでプロジェクトを開けない場合は、devコマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。
次のステップ
Section titled 次のステップ成功です!これでAstroを使った開発を始める準備ができました!🥳
ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。
📚 フレームワークを追加:インテグレーションガイド (EN)で、npx astro addを使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。
📚 サイトをデプロイ:デプロイガイドで、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。
📚 コードベースを理解:Astroのディレクトリ構造については、ディレクトリ構造ガイドで詳しく説明します。