最初のAstroページを作成する

.astroファイルがウェブサイトのページとして機能することを理解できたところで、実際に作成してみましょう！

ここで学ぶことは…

概要（About）とブログ（Blog）という、2つの新しいページを作成する
ページにナビゲーションリンクを追加する
更新されたバージョンのウェブサイトをウェブ上にデプロイする

新しい`.astro`ファイルを作成する

コードエディターのファイルペインで、既存のindex.astroファイルがあるsrc/pages/フォルダに移動します。
そのフォルダ内で、about.astroという名前の新しいファイルを作成します。
新しいabout.astroファイルにindex.astroの内容をコピーまたは再入力します。

エディタ上で、このファイルのタブラベルに白丸が表示される場合があります。これは、ファイルがまだ保存されていないことを意味します。VS Codeのファイルメニューで「自動保存」を有効にすると、ファイルを手動で保存する必要はなくなります。
/aboutをアドレスバーのURL末尾に追加し、ページがロードされることを確認します。(たとえばhttp://localhost:4321/about)

現在、「概要」ページは最初のページとまったく同じに見えるはずですが、これを変更していきます！

ページを編集する

HTMLコンテンツを編集して、このページをあなたについての内容にします。

概要ページのコンテンツを変更または追加するには、コンテンツを含むHTML要素タグを追加します。既存の<body></body>タグの間に、以下のHTMLコードをコピーして貼り付けるか、独自のコードを追加してください。

<body>
  <h1>私のAstroサイト</h1>
  <h1>私について</h1>
  <h2>... そして私の新しいAstroサイトについて！</h2>

  <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>

  <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
</body>

ブラウザタブから/aboutページに再度アクセスすると、更新されたコンテンツが表示されるはずです。

ナビゲーションリンクを追加する

各ページをプレビューしやすくするために、index.astroとabout.astroの両ページ上部にある<h1>の前に、HTMLページナビゲーションリンクを追加します。

<a href="/">ホーム</a>
<a href="/about/">概要</a>

<h1>私について</h1>
<h2>... そして私の新しいAstroサイトについて！</h2>

これらのリンクをクリックして、サイト内のページを行き来できることを確認してください。

やってみよう - ブログページの追加

上と同じステップに従って、サイトに3番目のページblog.astroを追加してみましょう。

(各ページに3番目のナビゲーションリンクを追加するのを忘れないでください。)

手順を表示

新しいファイルsrc/pages/blog.astroを作成します。
index.astroの内容をすべてコピーしてblog.astroに貼り付けます。
以下のようにページの上部に3番目のナビゲーションリンクを追加します。

<body>
  <a href="/">ホーム</a>
  <a href="/about/">概要</a>
  <a href="/blog/">ブログ</a>

  <h1>私のAstroサイト</h1>
</body>

これで、お互いにリンクする3つのページをもつウェブサイトができました。ブログページにコンテンツを追加しましょう。

blog.astroのページコンテンツを以下のように変更します。

<body>
  <a href="/">ホーム</a>
  <a href="/about/">概要</a>
  <a href="/blog/">ブログ</a>

  <h1>私のAstroサイト</h1>
  <h1>私のAstro学習ブログ</h1>
  <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
</body>

ブラウザで3つのページすべてにアクセスし、以下のことを確認してください。

すべてのページが正しく3つのページにリンクしている
2つの新しいページにはそれぞれ独自の説明的な見出しがある
2つの新しいページにはそれぞれ独自の段落テキストがある

変更をウェブ上に公開する

ユニット1に従ってセットアップをおこなっていれば、Netlifyを通じて変更をサイトに公開できます。

プレビューの見た目に満足したら、変更をGitHubのオンラインリポジトリにコミットします。

VS Codeで、最後にGitHubにコミットした後に変更されたファイルをプレビューします。
- 左のメニューのソース管理タブに移動します。小さな「3」が表示されているはずです。
- 変更されたファイルとして、index.astro、about.astro、blog.astroが表示されているはずです。
テキストボックスにコミットメッセージ（たとえば「2つの新しいページ（aboutとblog）を追加した」）を入力し、Ctrl + Enter（macOSではCmd ⌘ + Enter）を押して、現在のワークスペースに変更をコミットします。
変更の同期ボタンをクリックして、GitHubに変更を同期します。
数分待ってからNetlifyのURLにアクセスして、変更が公開されていることを確認します。

チェックリスト

ウェブサイトに新しいページを作成し、既存のページからリンクできる。
変更をGitHubにコミットし、Netlify上のサイトを更新できる。