コンテンツにスキップ

ユニット1の導入 - 準備

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

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

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

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

StackBlitzを使う: 以下の手順に従ってから、ユニット2に進んでください!

StackBlitzを設定する

  1. 外部リンクをクリックして、StackBlitzの「Empty Project」テンプレートを開きます

  2. 右上にある「Sign in」ボタンをクリックして、GitHubの認証情報を使いログインします。

  3. StackBlitzのエディタウィンドウの左上にある「Fork」をクリックして、テンプレートを保存します。

  4. プロジェクトが読み込まれるまで待つと、「Empty Project」スターターのライブプレビューが表示されます。

変更を加える

ファイルペインにsrc/pages/index.astroがあるはずです。これをクリックして開き、Astroでの最初の一行に従ってこのファイルを変更します。

GitHubリポジトリを作成する

  1. ファイルリストの一番上にあるConnect Repositoryボタンを押して、新しいリポジトリの名前を入力し、Create repo & pushをクリックします。

  2. GitHubにコミットすべき変更があると、ワークスペースの左上に「Commit」ボタンが表示されます。これをクリックすると、コミットメッセージを入力してリポジトリを更新できます。

サイトをデプロイする

Netlifyにデプロイして、作業中もサイトの公開版をホストしたい場合は、ユニット1のサイトをウェブにデプロイするに進んでください。

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

:::

これから向かう場所

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

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

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

チェックリスト

貢献する コミュニティ スポンサー