ユニット1の導入 - 準備

これから何を作成するのかわかったところで、必要なツールを準備していきましょう！

このユニットでは、開発環境の準備とNetlifyへのデプロイ方法を説明します。すでに開発環境やワークフローについて理解している場合は、ユニット2に進んでください。

チュートリアルをオンラインのコードエディターで進める

チュートリアルをオンラインのコードエディターで進めたいですか？Google IDXで開始するために以下の手順に従ってください。

Google IDXを使う: 以下の手順に従って、ユニット2に進んでください！

Google IDXを設定する

1. 外部リンクをクリックしてIDXの新しいワークスペースで”Empty Project”テンプレートを開きます

2. ログインがまだの場合は、Googleアカウントにログインしてください。

3. デフォルトの”Empty Project”から変更したい場合はプロジェクトの名前を入力し、Createをクリックします。

4. ワークスペースが作成されるまで待ちます。これには30秒から60秒かかる場合があります。すべてが上手くいけば、オンラインのコードエディタにAstroプロジェクトが読み込まれていることを確認できます。

5. IDXが2つのスクリプトを実行します。1つはAstroをインストールするためのもので、もう1つは開発サーバーを起動するためのものです。Astroのインストールが完了する前にワークスペースが読み込まれると、「Astroが見つからない」というメッセージが表示される場合があります。メッセージの表示が消えない場合はこれを無視してキャンセルできます。

変更を加える

すべてが上手くいけば、分割画面内にsrc/pages/index.astroのコードが開かれており、さらにサイトのライブプレビューが表示されているはずです。Astroでの最初の一行に従ってこのファイルを変更してください。

GitHubリポジトリを作成する

1. 垂直メニューバーの”Source Control”というナビゲーション項目に移動するか、CTRL + SHIFT + Gで開きます。

2. GitHubに公開するオプションを選択します。これにより、GitHubアカウントに新しいリポジトリが作成されます。

3. プロンプトに従ってGitHubアカウントにログインします。

4. ログイン後にIDXタブに戻ると、リポジトリに新しい名前を付けるか、プライベートかパブリックかを選択できます。このチュートリアルでは、名前もリポジトリの種類も自由に選べます。

5. IDXは最初のコミットを作成し、新しいGitHubリポジトリに公開します。

6. チュートリアルを進めていく中で、GitHubにコミットすべき変更がある場合、Source Controlナビゲーションアイコンに数字が表示されます。これは、前回のコミット以降に変更されたファイルの数です。このタブに移動して2つのステップ（コミットと公開）を実行すると、コミットメッセージを入力してリポジトリを更新できます。

サイトをデプロイする

Netlifyにデプロイして作業中のサイトのライブプレビューを確認したい場合は、ユニット1のサイトをウェブにデプロイするに従ってください。

その他の場合はユニット2に進み、Astroでの開発を始めてください！

これから向かう場所

このユニットでは、GitHubに保存され、Netlifyに接続された新しいプロジェクトの作成をおこないます。

コードを書いている途中で、変更を定期的にGitHubにコミットします。Netlifyは、GitHubリポジトリ内のファイルを使用してウェブサイトをビルドし、誰でも閲覧できる一意のアドレスでインターネット上に公開します。

GitHubに変更をコミットするたびに、Netlifyに通知が送信されます。すると、Netlifyは自動的にサイトを再ビルドし、変更を反映した上でサイトを再公開します。

チェックリスト

• Astroプロジェクトの開発環境を準備する用意ができた！