Create a Blog Post

src/pages/blog/
├── index.astro              # Blog listing page
└── posts/
    ├── first-post.mdx
    ├── second-post.mdx
    └── [page].astro         # Pagination template

---
title: "Your Blog Post Title"
description: "A brief description of your post"
slug: "create-blog"
date: "2024-01-01"
authors: ["your-name"]
tags: ["tag1", "tag2"]
image: "/blog/your-image.jpg"
---

import BlogLayout from "@/layouts/BlogLayout.astro"

<BlogLayout 
  title={frontmatter.title}
  description={frontmatter.description}
  date={frontmatter.date}
  authors={frontmatter.authors}
  tags={frontmatter.tags}
  image={frontmatter.image}
>


Your content goes here...

</BlogLayout>

interface BlogFrontmatter {
  title: string;          // Post title
  description: string;    // Brief description
  date: string;          // Publication date (YYYY-MM-DD)
  authors?: string[];     // Array of author IDs
  tags?: string[];       // Array of tag names
  image?: string;        // Cover image path
  draft?: boolean;       // If true, only shown in development
}

import { Image } from 'astro:assets'

<Image
  src="/docs-site-kickstarter/blog/example.jpg"
  alt="Example image"
  width={800}
  height={400}
  class="rounded-lg"
/>

```typescript
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}
```

<div class="aspect-video">
  <iframe
    src="https://www.youtube.com/embed/..."
    class="w-full rounded-lg"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  />
</div>

// src/data/authors.ts
export const authors = {
  "your-name": {
    name: "Your Name",
    avatar: "/avatars/your-name.jpg",
    bio: "Your brief bio",
    twitter: "@yourhandle"
  }
}

// src/pages/rss.xml.js
import rss from '@astrojs/rss';

export const get = () => rss({
  title: 'Your Blog',
  description: 'Your blog description',
  site: 'https://your-site.com',
  items: await getAllPosts()
});

<TableOfContents headings={headings} />

<div class="flex justify-between">
  {previousPost && (
    <a href={previousPost.url}>� {previousPost.title}</a>
  )}
  {nextPost && (
    <a href={nextPost.url}>{nextPost.title} </a>
  )}
</div>

<div class="flex space-x-2">
  <Button variant="outline" size="sm">
    Share on Twitter
  </Button>
  <Button variant="outline" size="sm">
    Share on LinkedIn
  </Button>
</div>