コンテンツにスキップ
Astro Astro

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

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

ここで学ぶことは…

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

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

  1. コードエディターのファイルペインで、既存のindex.astroファイルがあるsrc/pages/フォルダに移動します。

  2. そのフォルダ内で、about.astroという名前の新しいファイルを作成します。

  3. 新しいabout.astroファイルにindex.astroの内容をコピーまたは再入力します。

  4. /aboutをアドレスバーのURL末尾に追加し、ページがロードされることを確認します。(たとえばhttp://localhost:4321/about)

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

ページを編集する

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

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

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


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


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

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

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

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

src/pages/about.astro
<a href="/">ホーム</a>
<a href="/about/">概要</a>


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

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

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

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

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

手順を表示
  1. 新しいファイルsrc/pages/blog.astroを作成します。
  2. index.astroの内容をすべてコピーしてblog.astroに貼り付けます。
  3. 以下のようにページの上部に3番目のナビゲーションリンクを追加します。
src/pages/index.astro
<body>
  <a href="/">ホーム</a>
  <a href="/about/">概要</a>
  <a href="/blog/">ブログ</a>


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

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

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

src/pages/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のオンラインリポジトリにコミットします。

  1. VS Codeで、最後にGitHubにコミットした後に変更されたファイルをプレビューします。

    • 左のメニューのソース管理タブに移動します。小さな「3」が表示されているはずです。

    • 変更されたファイルとして、index.astro、about.astro、blog.astroが表示されているはずです。

  2. テキストボックスにコミットメッセージ（たとえば「2つの新しいページ（aboutとblog）を追加した」）を入力し、Ctrl + Enter（macOSではCmd ⌘ + Enter）を押して、現在のワークスペースに変更をコミットします。

  3. 変更の同期ボタンをクリックして、GitHubに変更を同期します。

  4. 数分待ってからNetlifyのURLにアクセスして、変更が公開されていることを確認します。

チェックリスト

参考