Blog Post Creator Skill

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.