撰写你的第一篇 Markdown 博客文章

既然你已经使用 .astro 文件构建了页面，现在是时候用 .md 文件来创建一些博客文章了！

准备好…

新建一个文件夹并创建一篇新文章
编写一些 Markdown 内容
在你的博客页面上链接到你的博客文章

创建你的第一个 `.md` 文件

在 src/pages/posts/ 创建一个新目录。
在你的新 /posts/ 文件夹中添加一个新（空）文件 post-1.md。
通过将 /posts/post-1 添加到现有预览 URL 的末尾，在浏览器预览中查找此页面。（例如 https://:4321/posts/post-1）
更改浏览器预览 URL 以查看 /posts/post-2。（这是一个你尚未创建的页面。）

请注意预览“空”页面和不存在的页面时输出的不同。这将帮助你在将来进行故障排除。

编写 Markdown 内容

将以下代码复制或输入到 post-1.md 中

---
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
    url: 'https://docs.astro.js.cn/assets/rose.webp'
    alt: 'The Astro logo on a dark background with a pink glow.'
tags: ["astro", "blogging", "learning in public"]
---
# My First Blog Post

Published on: 2022-07-01

Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

## What I've accomplished

1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.

2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.

3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!

## What's next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

再次在 https://:4321/posts/post-1 查看你的浏览器预览。你现在应该能在此页面上看到内容了。它可能还没有正确格式化，但别担心，你将在本教程的后面更新它！
使用浏览器的开发者工具检查此页面。请注意，虽然你没有输入任何 HTML 元素，但你的 Markdown 已被转换为 HTML。你可以看到诸如标题、段落和列表项等元素。

链接到你的文章

在 src/pages/blog.astro 中使用锚点标签链接到你的第一篇文章

---
---
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>

    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Post 1</a></li>
    </ul>
  </body>
</html>

现在，在 src/pages/posts/ 中再添加两个文件：post-2.md 和 post-3.md。这里有一些示例代码，你可以复制粘贴到你的文件中，或者，你也可以创建自己的内容！

---
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
image:
    url: "https://docs.astro.js.cn/assets/arc.webp"
    alt: "The Astro logo on a dark background with a purple gradient arc."
pubDate: 2022-07-08
tags: ["astro", "blogging", "learning in public", "successes"]
---
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

---
title: My Third Blog Post
author: Astro Learner
description: "I had some challenges, but asking in the community really helped!"
image:
    url: "https://docs.astro.js.cn/assets/rays.webp"
    alt: "The Astro logo on a dark background with rainbow rays."
pubDate: 2022-07-15
tags: ["astro", "learning in public", "setbacks", "community"]
---
It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.js.cn/chat) is really friendly and helpful!

添加指向这些新文章的链接

---
---
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>

    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Post 1</a></li>
      <li><a href="/posts/post-2/">Post 2</a></li>
      <li><a href="/posts/post-3/">Post 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。