Hello World: Blogging with Astro and Markdown

Welcome to my first blog post! This post serves as both a “hello world” and a demonstration of everything you can do when blogging with Astro using markdown.

Yes, You Can Blog with Markdown!

Astro has first-class support for Markdown (.md) and MDX (.mdx) files. This means you can write your blog posts in plain markdown, and Astro will automatically convert them to HTML pages.

Why Markdown?

• Simple syntax - Focus on writing, not formatting
• Portable - Your content isn’t locked into any platform
• Version control friendly - Works great with Git
• Fast - No database required, just files

---

Text Formatting

Markdown supports all the text formatting you need:

• Bold text using **double asterisks**
• Italic text using *single asterisks*
• Bold and italic using ***triple asterisks***
• Strikethrough using ~~double tildes~~
• Inline code using backticks

Headings

You can use headings from ## (h2) to ###### (h6). Note that # (h1) is typically reserved for the page title.

This is an H3

This is an H4

This is an H5

Links and Images

Links are easy: Visit Astro’s website

Images work too (just add your images to the public folder):

![Alt text for the image](/path/to/image.jpg)

Lists

Unordered Lists

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered Lists

1. First step
2. Second step
3. Third step
   1. Sub-step A
   2. Sub-step B

Task Lists

• Set up Astro project
• Create blog structure
• Write first blog post
• Add more posts
• Take over the world

Code Blocks

Astro markdown supports syntax-highlighted code blocks:

JavaScript

// A simple greeting function
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

TypeScript

interface BlogPost {
  title: string;
  description: string;
  pubDate: Date;
  tags?: string[];
}

const post: BlogPost = {
  title: 'Hello World',
  description: 'My first post',
  pubDate: new Date(),
  tags: ['astro', 'markdown'],
};

HTML

<article>
  <h1>My Blog Post</h1>
  <p>This is the content.</p>
</article>

CSS

.blog-post {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
}

Shell Commands

# Create a new Astro project
npm create astro@latest

# Start the development server
npm run dev

Blockquotes

“The best way to predict the future is to create it.”

— Peter Drucker

You can also nest blockquotes:

This is a blockquote

This is a nested blockquote

Tables

Feature	Markdown	MDX
Text formatting	✅	✅
Code blocks	✅	✅
Components	❌	✅
JSX expressions	❌	✅

Horizontal Rules

Use --- to create a horizontal rule:

---

Content Collections

This blog uses Astro’s Content Collections feature. Here’s how it works:

1. Define a schema in src/content.config.ts
2. Create markdown files in src/content/blog/
3. Query your content using getCollection()

The schema ensures type-safety for your frontmatter:

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).optional(),
  }),
});

What About MDX?

If you need more power, Astro supports MDX - Markdown with JSX. With MDX you can:

• Import and use Astro components
• Use JavaScript expressions
• Create interactive elements

To use MDX, just rename your file to .mdx and install the MDX integration:

npx astro add mdx

Frontmatter

Every markdown file starts with frontmatter - YAML metadata at the top:

---
title: "My Post Title"
description: "A brief description"
pubDate: 2024-12-26
tags: ["tag1", "tag2"]
draft: false
---

The frontmatter is used to:

• Set the page title and meta description
• Display the publication date
• Show tags/categories
• Mark posts as drafts (they won’t be published)

Summary

Astro makes blogging with markdown a joy:

• ✨ Zero config - Markdown works out of the box
• 🎨 Full control - Style your posts however you want
• 🚀 Fast - Static HTML, no JavaScript by default
• 📝 Type-safe - Content collections validate your frontmatter
• 🔧 Extensible - Add MDX for component support

Happy blogging! 🎉