最初のAstroページを作成する
.astroファイルがウェブサイトのページとして機能することを理解できたところで、実際に作成してみましょう！
ここで学ぶことは…
- 概要（About）とブログ（Blog）という、2つの新しいページを作成する
- ページにナビゲーションリンクを追加する
- 更新されたバージョンのウェブサイトをウェブ上にデプロイする
新しい.astroファイルを作成する
セクションタイトル： 新しい.astroファイルを作成する-
コードエディターのファイルペインで、既存の
index.astroファイルがあるsrc/pages/フォルダに移動します。 -
そのフォルダ内で、
about.astroという名前の新しいファイルを作成します。 -
新しい
about.astroファイルにindex.astroの内容をコピーまたは再入力します。 -
/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にアクセスして、変更が公開されていることを確認します。