初めてのMarkdownによるブログ記事

.astroファイルを使ってページを作成したので、続いて.mdファイルを使ってブログ記事を作成しましょう！

ここで学ぶことは…

新しいフォルダを作成し、新しい記事を作成する
Markdownコンテンツを書く
ブログページにブログ記事へのリンクを作成する

最初の`.md`ファイルを作成する

src/pages/posts/に新しいディレクトリを作成します。
post-1.mdという新しい（空の）ファイルを/posts/フォルダに追加します。
プレビュー用URLの末尾に/posts/post-1を追加して、このページをブラウザで確認します。（たとえばhttp://localhost:4321/posts/post-1）
ブラウザのプレビュー用URLを変更して、代わりに/posts/post-2を表示します。（これはまだ作成していないページです。）

「空の」ページと存在しないページのプレビューにおいて、出力が異なることに注意してください。これは将来のトラブルシューティングに役立ちます。

Markdownコンテンツを書く

post-1.mdに以下のコードをコピーまたは入力します。

---
title: '私の最初のブログ記事'
pubDate: 2022-07-01
description: 'これは私の新しいAstroブログの最初の記事です。'
author: 'Astro学習者'
image:
    url: 'https://docs.astro.build/assets/full-logo-light.png'
    alt: 'Astroのロゴ。'
tags: ["astro", "ブログ", "公開学習"]
---
# 私の最初のブログ記事

投稿日: 2022-07-01

Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。

## 達成したこと

1. **Astroのインストール**: まず、新しいAstroプロジェクトを作成し、オンラインアカウントを設定しました。

2. **ページの作成**: 次に、新しい`.astro`ファイルを作成し、それを`src/pages/`フォルダに配置することで、ページを作成する方法を学びました。

3. **ブログ記事の作成**: これが私の最初のブログ記事です！AstroページとMarkdownの記事があります！

## 次の目標

Astroチュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。

http://localhost:4321/posts/post-1でブラウザのプレビューを再度確認します。今度はこのページにコンテンツが表示されるはずです。まだ適切な書式になっていないかもしれませんが、ご心配なく。このチュートリアルの後半で更新します！
ブラウザの開発者ツールを使用して、このページを検査します。HTML要素を何も入力していないにもかかわらず、MarkdownがHTMLに変換されていることに注意してください。見出し、段落、リスト項目などの要素が表示されます。

ブログ記事へのリンクを作成する

src/pages/blog.astroにアンカータグを追加して、最初の記事にリンクします。

---
---
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>

    <h1>私のAstro学習ブログ</h1>
    <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
    <ul>
      <li><a href="/posts/post-1/">記事1</a></li>
    </ul>
  </body>
</html>

src/pages/posts/に、post-2.mdとpost-3.mdという2つのファイルを追加します。以下はコピー＆ペースト可能なサンプルコードですが、独自の内容を作成しても構いません。

---
title: 私の2番目のブログ記事
author: Astro学習者
description: "Astroを少し学んだら、止まらなくなりました！"
image:
    url: "https://docs.astro.build/assets/arc.webp"
    alt: "Astroのアークのサムネイル。"
pubDate: 2022-07-08
tags: ["astro", "ブログ", "公開学習", "成功"]
---
Astroを学習し始めて最初の1週間が上手くいったので、もう少し試してみることにしました。小さなコンポーネントを書いてメモリーからインポートしました！

---
title: 私の3番目のブログ記事
author: Astro学習者
description: "上手くいかないことがありましたが、コミュニティに質問して助けてもらいました！"
image:
    url: "https://docs.astro.build/assets/rays.webp"
    alt: "Astroの光線のサムネイル。"
pubDate: 2022-07-15
tags: ["astro", "公開学習", "後退", "コミュニティ"]
---
すべてがスムーズにいくわけではありませんでしたが、Astroで何かを作るのは楽しいです。そして、[Discordコミュニティ](https://astro.build/chat)は本当にフレンドリーで助けになります！

新しい記事へのリンクを追加します。

---
---
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>

    <h1>私のAstro学習ブログ</h1>
    <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
    <ul>
      <li><a href="/posts/post-1/">記事1</a></li>
      <li><a href="/posts/post-2/">記事2</a></li>
      <li><a href="/posts/post-3/">記事3</a></li>
    </ul>
  </body>
</html>

ブラウザのプレビューを確認して、以下のことを確認します。

記事1、記事2、記事3へのすべてのリンクが、サイト上の動作するページへとつながっている。（もし間違いを見つけたら、blog.astroのリンクかMarkdownファイル名を確認してください。）

確認テスト

Markdown（.md）ファイル内のコンテンツが変換されるのはどれですか？
1. HTML
2. CSS
3. JavaScript

チェックリスト

ブログ記事用にsrc/pages/内に新しいフォルダを作成できる。
ブログ記事用に新しいMarkdown（.md）ファイルを作成できる。
MarkdownはAstroと同じように、ブラウザでHTMLを生成する別の言語であることを理解した。

参考

Markdown Cheat Sheet from The Markdown Guide 外部サイト
ブラウザーの開発者ツールとは？ MDN 外部サイト
YAML frontmatter 外部サイト