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

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

¥Now that you have built pages using .astro files, it’s time to make some blog posts using .md files!

准备好……

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

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

¥Create your first .md file

Create a new directory at src/pages/posts/.
Add a new (empty) file post-1.md inside your new /posts/ folder.
Look for this page in your browser preview by adding /posts/post-1 to the end of your existing preview URL. (e.g. http://localhost:4321/posts/post-1)
Change the browser preview URL to view /posts/post-2 instead. (This is a page you have not yet created.)

Note the different output when previewing an “empty” page, and one that doesn’t exist. This will help you troubleshoot in the future.

编写 Markdown 内容

¥Write Markdown content

Copy or type the following code into 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://astro.nodejs.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.

Check your browser preview again at http://localhost:4321/posts/post-1. You should now see content on this page. It may not yet be properly formatted, but don’t worry, you will update this later in the tutorial!
Use your browser’s Dev Tools to inspect this page. Notice that although you have not typed any HTML elements, your Markdown has been converted to HTML. You can see elements such as headings, paragraphs, and list items.

链接到你的帖子

¥Link to your posts

Link to your first post with an anchor tag in 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>

Now, add two more files in src/pages/posts/: post-2.md and post-3.md. Here is some sample code you can copy and paste into your files, or, you can create your own!

---
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
image:
    url: "https://astro.nodejs.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://astro.nodejs.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.build/chat) is really friendly and helpful!

Add links to these new posts:

---
---
<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>

Check your browser preview and make sure that:

All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on blog.astro or your Markdown file names.)

测试你的知识

¥Test your knowledge

Markdown (.md) 文件中的内容将转换为：

清单

¥Checklist

我可以在 src/pages/ 中为我的博客文章创建一个新文件夹。
我可以创建一个新的 Markdown (.md) 博客文章文件。
我知道 Markdown 是另一种语言，与 Astro 一样，在我的浏览器中生成 HTML。

资源

¥Resources