初めてのAstroプロジェクト

ここで学ぶことは…

Astroのセットアップウィザードを起動する

新しいAstroサイトを作成するおすすめの方法は、create astroセットアップウィザードを使用することです。

ターミナルのコマンドラインで、お好みのパッケージマネージャーを使用して次のコマンドを実行します。

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

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

# yarnで新しいプロジェクトを作成する
yarn create astro

yを入力してcreate-astroをインストールすることを確認します。
プロンプトが「新しいプロジェクトをどこに作成しますか？（Where would you like to create your new project?）」と尋ねるので、新しいプロジェクトのフォルダ名を入力します（たとえば./tutorialなど）。

新しいAstroプロジェクトは、完全に空のフォルダにしか作成できません。まだ存在しないフォルダ名を選択してください！
スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。
プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、yを入力します。
プロンプトがTypeScriptを使用する予定かどうか尋ねるので、nを入力します。
プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、yを入力します。

インストールウィザードが完了したら、このターミナルはもう不要です。VS Codeを開いて続きの作業をおこないます。

VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。
Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、Astro language support extensionを選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。
以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。
Terminal window
```
user@machine:~/tutorial$
```
ターミナルの表示と非表示を切り替えるには、Ctrl + J（macOSではCmd ⌘ + J）を使用します。

これで、コンピュータのターミナルアプリではなくウィンドウ内のターミナルを使用して、チュートリアルの残りの部分を進められるようになりました。

作業中にプロジェクトファイルをウェブサイトとしてプレビューするには、Astroを開発（dev）モードで実行する必要があります。

プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。

ターミナルウィンドウのhttp://localhostリンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！

（Astroは、ポート4321が使用可能な場合、デフォルトでhttp://localhost:4321を使用します。）

Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。

Getting Started with Visual Studio Code 外部サイト — VS Codeのインストール、設定、使用方法についてのビデオチュートリアル