Blog Post Creator Skill

This skill helps you create high-quality, SEO-optimized blog posts using the MDX content engine.

Directory Structure

• Content Location: src/content/blog/*.mdx
• Images: /public/assets/images/ (reference as /assets/images/...)
• Engine: src/lib/mdx/blogs.ts
• Frontend: src/app/(website-layout)/blog/

File Format

Each blog post must be a .mdx file with specific frontmatter:

---
title: "Your Engaging Title Here"
tags: ["tag1", "tag2", "seo-keyword"]
featuredImage: "/assets/images/your-image.png"
createdDate: "YYYY-MM-DD"
description: "A compelling meta description for SEO (150-160 chars recommended)"
---

# Your Title H1

Introduction paragraph...

## Section H2

Content...

Best Practices

1. Slug Generation: The filename becomes the slug (e.g., my-post.mdx -> /blog/my-post). Use kebab-case.
2. Images: Place images in public/assets/images and reference them with absolute paths.
3. Tags: Used for "Related Articles" logic. Include 3-5 relevant tags.
4. Components: You can import and use React components inside MDX files (if configured in mdx-components.tsx).
5. SEO: - title: Used for <title> and og:title. - description: Used for <meta name="description"> and og:description. - featuredImage: Used for og:image. DO NOT USE single quotes in the frontmatter. Use double quotes instead.

Workflow

1. Create a new file: src/content/blog/your-slug.mdx.
2. Add the frontmatter.
3. Write content using Markdown syntax.
4. (Optional) Add images to public/assets/images/.

Example

File: src/content/blog/getting-started.mdx

---
title: "Getting Started with Indie Kit"
tags: ["guide", "tutorial", "indie-kit"]
featuredImage: "/assets/images/og.png"
createdDate: "2024-03-20"
description: "A complete guide to setting up your new SaaS project with Indie Kit in under 10 minutes."
---

# Getting Started

Welcome to the future of SaaS development...

Refer to reference.md for more details.