2 • Add, style and link to pages on your site

Write your first Markdown blog post

Now that you have built pages using .astro files, let’s make some blog posts using .md files!

Get ready to…

  • Make a new folder and create a new post
  • Write some Markdown content
  • Link to your blog posts on your Blog page

Create your first .md file

Section titled Create your first .md file

  1. Create a new directory at src/pages/posts/.

  2. Add a new (empty) file post-1.md inside your new /posts/ folder.

  3. Look for this page in your browser preview by adding /posts/post-1 to the end of your existing preview URL. (e.g. localhost:3000/posts/post-1)

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

Write Markdown content

Section titled Write Markdown content

  1. Copy or type the following code into post-1.md

    src/pages/posts/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.build/assets/full-logo-light.png'
        alt: 'The full Astro logo.'
    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.

  2. Check your browser preview again at localhost:3000/posts/post-1. You should now see content on this page.

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

Section titled Link to your posts

  1. Link to your first post with an anchor tag in src/pages/blog.astro:

    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>

  2. 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!

    src/pages/posts/post-2.md
    ---
    title: My Second Blog Post
    author: Astro Learner
    description: "After learning some Astro, I couldn't stop!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Thumbnail of Astro arcs."
    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!
    src/pages/posts/post-3.md
    ---
    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.build/assets/rays.webp"
        alt: "Thumbnail of Astro 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!

  3. Add links to these new posts:

    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>
          <li><a href="/posts/post-2/">Post 2</a></li>
          <li><a href="/posts/post-3/">Post 3</a></li>
        </ul>
      </body>
    </html>

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

Section titled Test your knowledge
  1. Content in a Markdown (.md) file is converted to:

Checklist

Section titled Checklist

Resources

Section titled Resources