コンテンツにスキップ

Astroをインストール

create astroCLIコマンドは、新しいAstroプロジェクトをゼロから作成する最速の方法です。このコマンドは、新しいAstroプロジェクトのセットアップに必要なすべてのステップをガイドし、複数の公式スターターテンプレートから選択できるようにします。

また、CLIに template フラグを付けて実行すれば、既存のテーマやスターターテンプレートを使用してプロジェクトを開始できます。ブログ、ポートフォリオ、ドキュメントサイト、ランディングページなどに向けたテーマは、テーマとスターターテンプレートのショーケースで探せます。

手動でAstroをインストールする場合は、ステップバイステップの手動インストールガイドを参照してください。

前提条件

Section titled “前提条件”
  • Node.js - v22.12.0以上。v23のような奇数バージョンはサポート対象外です。
  • テキストエディタ - VS Codeと公式のAstro拡張機能を使うことをおすすめします。
  • ターミナル - Astroにはコマンドラインインターフェース（CLI）を通じてアクセスします。

ブラウザの互換性

Section titled “ブラウザの互換性”

Astroはデフォルトで、モダンなJavaScriptをサポートするブラウザをターゲットとしています。詳細については、Viteがサポートするブラウザバージョンのリストを参照してください。

CLIウィザードからインストールする

Section titled “CLIウィザードからインストールする”

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

  1. 以下のコマンドをターミナルで実行して、インストールウィザードを起動します。

    ターミナルウィンドウ
    # npmで新しいプロジェクトを作成
    npm create astro@latest

    問題がなければ成功のメッセージが表示され、推奨される次のステップがいくつか続きます。

  2. プロジェクトが作成されたら、新しいプロジェクトのディレクトリにcdしてAstroを使い始められます。

  3. CLIウィザードで“Install dependencies?“のステップを飛ばした場合は、依存関係をインストールしてから続行してください。

    ターミナルウィンドウ
    npm install

  4. 以上により、Astroの開発サーバーを起動して、プロジェクトをカスタマイズしながらライブプレビューを確認できるようになりました！

CLIでのインストール時のフラグ

Section titled “CLIでのインストール時のフラグ”

create astro実行時にはセットアップの流れ（すべての質問に「yes」と答える、Houstonアニメーションをスキップするなど）や、新しいプロジェクトの内容（Gitの有無、インテグレーションの追加など）を変えるフラグを付けられます。

利用できるcreate astroのフラグ一覧を参照してください。

インテグレーションを追加する

Section titled “インテグレーションを追加する”

create astroに--addを付けると、新規プロジェクトの作成と同時にastro addに対応した公式のインテグレーション (EN)またはコミュニティのインテグレーションを追加できます。

以下のコマンドを使いたいインテグレーション名に置き換えて実行します。

ターミナルウィンドウ
# ReactとPartytown付きで新しいプロジェクトを作成
npm create astro@latest -- --add react --add partytown

テーマやスターターテンプレートを使用する

Section titled “テーマやスターターテンプレートを使用する”

create astroに--templateを付けると、公式のテンプレートや任意のGitHubリポジトリのmainブランチを元にプロジェクトを始められます。

公式スターターテンプレート名、または使いたいテーマのGitHubのユーザ名とリポジトリ名に置き換えて実行します。

ターミナルウィンドウ
# 公式のテンプレートで新しいプロジェクトを作成
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>の形で指定します。

手動セットアップ

Section titled “手動セットアップ”

このガイドでは、新しいAstroプロジェクトを手動でインストールして設定する手順について説明します。

create astro CLIツールを使用したくない場合は、以下のガイドに従って自分でプロジェクトを設定してください。

  1. ディレクトリを作成する

    新しいプロジェクトの名前で空のディレクトリを作成し、そのディレクトリに移動します。

    ターミナルウィンドウ
    mkdir my-astro-project
    cd my-astro-project

    新しいディレクトリに移動したら、プロジェクトのpackage.jsonファイルを作成します。これにより、Astroなどのプロジェクトの依存関係を管理します。このファイル形式に不慣れな場合は、以下のコマンドを実行して作成することも可能です。

    ターミナルウィンドウ
    npm init --yes

  2. Astroをインストールする

    まず、Astroプロジェクトの依存関係をプロジェクトにインストールします。

    ターミナルウィンドウ
    npm install astro

    続いて、package.jsonの「scripts」セクションにあるプレースホルダーを以下の内容に置き換えます。

    package.json
    {
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
      },
    }

    あとでこのスクリプトを使用してAstroを起動したり、その他のコマンドを実行したりします。

  3. 最初のページを作成する

    テキストエディタで、ディレクトリ内のsrc/pages/index.astroに新しいファイルを作成します。これがプロジェクトの最初のAstroページになります。

    このガイドでは、以下のコードスニペット（---ダッシュを含む）を新しいファイルにコピーして貼り付けます。

    src/pages/index.astro
    ---
    // Astroにようこそ！この3つのハイフンのコードフェンスの中にあるものは、
    // 「コンポーネントのフロントマター」です。ブラウザで実行されることはありません。
    console.log('ここはブラウザではなく、ターミナルで実行されます！');
    ---
    <!-- 以下は「コンポーネントテンプレート」です。単なるHTMLですが、
        素晴らしいテンプレートを作成するための魔法が散りばめられています。 -->
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
    <style>
      h1 {
        color: orange;
      }
    </style>

  4. 最初の静的アセットを作成する

    public/ディレクトリを作成して静的アセットを保存する必要もあるでしょう。Astroは、常にこれらのアセットをビルド結果に含めるため、コンポーネントテンプレート内から安全に参照できます。

    テキストエディタで、ディレクトリ内のpublic/robots.txtに新しいファイルを作成します。robots.txtは、Googleなどの検索ボットにサイトの扱い方を伝えるために、多くのサイトが利用しているシンプルなファイルです。

    このガイドでは、以下のコードスニペットを新しいファイルにコピーして貼り付けます。

    public/robots.txt
    # 例: すべてのボットにサイトのスキャンとインデックスを許可します。
    # 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
    User-agent: *
    Allow: /

  5. astro.config.mjsを作成する

    astro.config.mjsによりAstroを設定します。Astroの設定をおこなわない場合このファイルは不要ですが、今作成しておくと便利です。

    プロジェクトのルートにastro.config.mjsを作成し、以下のコードをコピーして貼り付けます。

    astro.config.mjs
    import { defineConfig } from "astro/config";
    

    // https://astro.build/config
    export default defineConfig({});

    ReactやSvelteなどのUIフレームワークコンポーネント、またはMDXやPartytownなど他のツールをプロジェクトで使用する場合は、ここに手動でインテグレーションをインポートして設定 (EN)することになります。

    AstroのAPI設定リファレンス (EN)を読み、詳細を確認してください。

  6. TypeScriptサポートを追加する

    tsconfig.jsonを使用してTypeScriptを設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解する方法を知るために、このファイルは重要です。tsconfig.jsonファイルがなければ、エディタ上でのnpmパッケージのインポートなど、一部の機能が完全にはサポートされません。

    TypeScriptコードを書く予定がある場合は、Astroのstrictまたはstrictestテンプレートを使用することをおすすめします。3種類の設定用テンプレートはastro/tsconfigs/で確認できます。

    プロジェクトのルートにtsconfig.jsonを作成し、以下のコードをコピーして貼り付けます。（base、strict、strictestの3種類のTypeScriptテンプレートを使用できます）

    tsconfig.json
    {
      "extends": "astro/tsconfigs/base"
    }
    AstroのTypeScriptセットアップガイドを読み、詳細を確認してください。

  7. 次のステップ

    以上の手順に従った場合、プロジェクトディレクトリは以下のようになっているはずです。

    • ディレクトリnode_modules/
      • …
    • ディレクトリpublic/
      • robots.txt
    • ディレクトリsrc/
      • ディレクトリpages/
        • index.astro
    • astro.config.mjs
    • package-lock.jsonまたは yarn.lockやpnpm-lock.yamlなど
    • package.json
    • tsconfig.json

  8. 以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました！

貢献する コミュニティ スポンサー