コンテンツにスキップ
Astro Astro

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

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

前提条件

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

インストール

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

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

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

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

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

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

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

2. Astroをスタートする ✨

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

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

Terminal window
npm run dev

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

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

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

スターターテンプレート

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

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


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

デフォルトでは、このコマンドはテンプレートリポジトリのmainブランチを使用します。別のブランチを使用するには、--template引数の一部として<github-username>/<github-repo>#<branch>のように渡します。

テーマとスターターのショーケースでは、ブログ、ポートフォリオ、ドキュメント、ランディングページなどのテーマを閲覧できます！また、GitHubで検索すると、さらに多くのスタータープロジェクトが見つかります。

次のステップ

成功です！これでAstroを使った開発をはじめる準備ができました！🥳

ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。

📚 フレームワークを追加：インテグレーションガイドで、npx astro addを使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。

📚 サイトをデプロイ：デプロイガイドで、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。

📚 コードベースを理解：Astroのディレクトリ構造については、ディレクトリ構造ガイドで詳しく説明します。