プロジェクトの作成

プロジェクトを作成するには、以下のコマンドを実行します。

my-astro-projectがプロジェクトのディレクトリ名になります。

npm create astro@latest my-astro-project

上記のコマンドを実行すると、対話式で設定を行います。

npm create astro@latest my-astro-project
Need to install the following packages:
create-astro@4.13.1
Ok to proceed? (y) y


> npx
> create-astro my-astro-project


astro   Launch sequence initiated.

    ◼  dir Using my-astro-project as project directory

tmpl   How would you like to start your new project?
    — A basic, helpful starter project
    — Use blog template
    — Use docs (Starlight) template
    > Use minimal (empty) template

deps   Install dependencies? (recommended)
    ● Yes  ○ No

git   Initialize a new git repository? (optional)
    ● Yes  ○ No

アプリの起動

作成した Astro で作成したプロジェクトに移動し、以下のコマンドを実行します。

npm run dev

ブラウザでhttp://localhost:4321を開くと Astro サイトが表示されます

ビルド

npm run build

起動ポート番号の変更

起動ポート番号の変更は2通りあります。astro.config.mjsで恒久的に変更する方法とnpx astro devコマンドを実行する際に、一時的にポート番号を変更する方法があります。

astro.config.mjs 変更する場合

開発ポート番号を 3000 に変更する場合は、以下のようにします。

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    port: 3000,
  },
});

npx astro dev コマンドで一時的に変更する場合

npx astro dev --port 4000