コンテンツにスキップ

初めてのAstroプロジェクト

ここで学ぶことは…

  • create astro セットアップウィザードを実行して、新しいAstroプロジェクトを作成する
  • Astroサーバーを開発（dev）モードで起動する
  • ブラウザでウェブサイトのライブプレビューを表示する

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

セクションタイトル： Astroのセットアップウィザードを起動する

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

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

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

  2. yを入力してcreate-astroをインストールすることを確認します。

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

  4. スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。

  5. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、nを入力します。

  6. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、yを入力します。

  7. プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、yを入力します。

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

VS Codeでプロジェクトを開く

セクションタイトル： VS Codeでプロジェクトを開く

  1. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。

  2. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、Astro language support extensionを選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。

  3. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。

    Terminal window
    user@machine:~/tutorial$

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

Astroをdevモードで実行する

セクションタイトル： Astroをdevモードで実行する

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

devサーバーを起動する

セクションタイトル： devサーバーを起動する

  1. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。

    Terminal window
    npm run dev

    Astroがdevモードで実行されていることをターミナル上で確認できるはずです。🚀

ウェブサイトのプレビューを確認する

セクションタイトル： ウェブサイトのプレビューを確認する

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

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

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

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

    Astroという単語が上部に表示された白い空白のページ。

チェックリスト

セクションタイトル： チェックリスト

参考

セクションタイトル： 参考