Add a Blog Post

Learn how to create and publish a new blog post in your Plainform application.

Goal

By the end of this recipe, you'll have created and published a new blog post with proper metadata, formatting, and images.

Prerequisites

A working Plainform installation
Basic knowledge of Markdown/MDX syntax
(Optional) An image for your blog post

Steps

Create a New MDX File

Navigate to the content/blog directory and create a new .mdx file. Use a descriptive filename with hyphens instead of spaces:

# Good examples
content/blog/getting-started-with-nextjs.mdx
content/blog/stripe-integration-guide.mdx
content/blog/10-tips-for-saas-founders.mdx

Naming convention: Use lowercase letters and hyphens. The filename becomes part of the URL slug (e.g., getting-started-with-nextjs.mdx → /blog/getting-started-with-nextjs)

Add Frontmatter Metadata

At the top of your file, add the required frontmatter between --- markers:

---
title: Your Blog Post Title
publishedAt: 2024-01-15
summary: A brief description of your post that appears in previews and search results
author: john-doe
category: Tutorial
img: https://yourawsbucket.com/blog-image.jpg
---

Frontmatter fields explained:

title - The main heading of your post (appears in browser tab and social shares)
publishedAt - Publication date in YYYY-MM-DD format
summary - Short description (150-160 characters recommended for SEO)
author - Author identifier matching a key in locales/en.json (e.g., john-doe). Learn how to add authors
category - Post category for organization (e.g., Tutorial, Guide, News)
img - Featured image URL (appears in post header and social shares)

Image hosting: Upload your featured image to AWS S3 using the storage integration, or use an external URL. Recommended size: 1200x630px for optimal social sharing.

Write Your Content

Add your blog post content using Markdown and MDX components:

---
title: Getting Started with Next.js
publishedAt: 2024-01-15
summary: Learn the fundamentals of Next.js and build your first application
author: john-doe
category: Tutorial
img: https://yourawsbucket.com/nextjs-guide.jpg
---

import { Callout } from 'fumadocs-ui/components/callout';

Your introduction paragraph goes here. Hook your readers and explain what they'll learn.

## Why Next.js?

Explain your main points here. Use clear headings to organize your content.

<Callout type="info">
  **Pro tip:** Add helpful callouts to highlight important information.
</Callout>

## Getting Started

Continue with your content...

### Code Examples

\`\`\`typescript
// Add code examples with syntax highlighting
export default function HomePage() {
  return <h1>Hello World</h1>;
}
\`\`\`

## Conclusion

Wrap up your post with key takeaways and next steps.

Use MDX Components (Optional)

Enhance your post with interactive components:

Callouts for important notes:

<Callout type="info">
  **Note:** This is an informational callout.
</Callout>

<Callout type="warn">
  **Warning:** This highlights potential issues.
</Callout>

Tabs for code examples:

<Tabs items={['npm', 'yarn', 'pnpm']}>
<Tab value="npm">
\`\`\`bash
npm install package-name
\`\`\`
</Tab>
<Tab value="yarn">
\`\`\`bash
yarn add package-name
\`\`\`
</Tab>
<Tab value="pnpm">
\`\`\`bash
pnpm add package-name
\`\`\`
</Tab>
</Tabs>

Steps for tutorials:

<Steps>
<Step>
### Step 1
First action to take...
</Step>
<Step>
### Step 2
Next action to take...
</Step>
</Steps>

Preview Your Post

Start your development server to preview the post:

npm run dev

Navigate to http://localhost:3000/blog/your-post-slug to see your post.

Hot reload: Changes to your MDX file will automatically refresh in the browser.

Publish Your Post

Once you're happy with your post:

Commit your changes:

git add content/blog/your-post.mdx
git commit -m "feat: add blog post about your topic"

Push to your repository:
```
git push origin main
```
Deploy: If you're using Vercel, your post will be automatically deployed. Otherwise, run your deployment process.