Astro.jsは自分のPCにインストールして使うことができるサイト作成ツールです。ここではコマンドラインでの操作を中心に、Astroプロジェクトを素早く立ち上げる手順を解説します。
始める前に：Node.jsの確認
Astroを動かすには、Node.jsが必要。以下のいずれかのバージョンがインストールされているか確認しましょう。
-
必須バージョン: v18.17.1, v20.3.0, v22.0.0 以降
- (注意) v19, v21 はサポートされていません。
インストール手順
ターミナル（コマンドプロンプトやPowerShellなど）を開いて、以下のコマンドを順番に実行していきます。
1.プロジェクト用ディレクトリを作成し、移動する
```bash
# "my-astro-project" の部分は好きなプロジェクト名に変更してください
mkdir my-astro-project
cd my-astro-project
```
2.Astroプロジェクトを初期化する
お使いのパッケージマネージャーに合わせて、以下のいずれかのコマンドを実行します。`create astro`コマンドが、対話形式でプロジェクトのセットアップを進めてくれます。
```bash
# npm を使う場合
npm create astro@latest
# pnpm を使う場合
pnpm create astro@latest
# Yarn を使う場合
yarn create astro@latest
```
3.セットアップの質問に答える
コマンドを実行すると、いくつか質問されます。基本的な選択肢は以下の通りです。
* `Where should we create your new project?` (プロジェクト作成場所): `.` (現在のディレクトリ) を入力します。
* `How would you like to start your new project?` (テンプレート選択): `A basic, minimal starter` または好みのテンプレートを選択します。
* `Would you like to install dependencies?` (依存関係のインストール): `Yes` を選択するのがおすすめです。ここで `Yes` を選ぶと、次のステップは不要になります。
* `Would you like to initialize git?` (Git初期化): 必要に応じて `Yes` または `No` を選択します。
4.(オプション) 依存関係を手動でインストールする
ステップ3で依存関係のインストールをスキップした場合や、エラーが出た場合は、以下のコマンドで手動インストールします。
```bash
# npm の場合
npm install
# pnpm の場合
pnpm install
# Yarn の場合
yarn install
```
* **(pnpm の注意点)** `pnpm` を使用している場合、画像最適化のために`sharp`が別途必要になることがあります。その場合は `pnpm add sharp` を実行してください。
開発サーバーを起動して確認
インストールが無事完了したら、開発サーバーを起動してみましょう。
# npm の場合
npm run dev
# pnpm の場合
pnpm run dev
# Yarn の場合
yarn run dev
ターミナルに表示される http://localhost:4321 のようなアドレスにブラウザでアクセスすると、作成されたAstroサイトが表示されます。
これでAstroプロジェクトの準備は完了です！ src ディレクトリの中を編集して、開発を始めましょう。