コンテンツにスキップ

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

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

ここで学ぶことは…

  • 概要(About)とブログ(Blog)という、2つの新しいページを作成する
  • ページにナビゲーションリンクを追加する
  • 更新されたバージョンのウェブサイトをウェブ上にデプロイする
  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.astroabout.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.astroabout.astroblog.astroが表示されているはずです。

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

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

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

Contribute

どんなことを?

GitHub Issueを作成

チームに素早く問題を報告できます。

Community