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.

Verification

After deployment, verify your post:

Visit your blog page at /blog
Confirm your post appears in the list
Click on your post to view the full content
Check that images load correctly
Test social sharing (Twitter, LinkedIn) to verify Open Graph metadata

Common Issues

Post Not Appearing

Make sure:

The file is in content/blog/ directory
The file has .mdx extension
Frontmatter is properly formatted with --- markers
The publishedAt date is not in the future

Images Not Loading

Verify the image URL is accessible
Check that the URL starts with https://
Ensure CORS is configured if using external images

Formatting Issues

Validate your MDX syntax
Check that all components are properly imported
Ensure code blocks use proper backtick syntax

Next Steps

Add Testimonials - Showcase customer feedback
Customize Hero Section - Update your homepage
SEO Best Practices - Optimize for search engines

MDX Blog Overview - Learn about the blog system
Storage Integration - Upload images to S3
Deployment Guide - Deploy your changes

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.

Verification

After deployment, verify your post:

Visit your blog page at /blog
Confirm your post appears in the list
Click on your post to view the full content
Check that images load correctly
Test social sharing (Twitter, LinkedIn) to verify Open Graph metadata

Common Issues

Post Not Appearing

Make sure:

The file is in content/blog/ directory
The file has .mdx extension
Frontmatter is properly formatted with --- markers
The publishedAt date is not in the future

Images Not Loading

Verify the image URL is accessible
Check that the URL starts with https://
Ensure CORS is configured if using external images

Formatting Issues

Validate your MDX syntax
Check that all components are properly imported
Ensure code blocks use proper backtick syntax

Next Steps

Add Testimonials - Showcase customer feedback
Customize Hero Section - Update your homepage
SEO Best Practices - Optimize for search engines

MDX Blog Overview - Learn about the blog system
Storage Integration - Upload images to S3
Deployment Guide - Deploy your changes

Add Blog Post

Add a Blog Post

Goal

Prerequisites

Steps

Create a New MDX File

Add Frontmatter Metadata

Write Your Content

Use MDX Components (Optional)

Preview Your Post

Publish Your Post

Verification

Common Issues

Post Not Appearing

Images Not Loading

Formatting Issues

Next Steps

On this page

Add Blog Post

Add a Blog Post

Goal

Prerequisites

Steps

Create a New MDX File

Add Frontmatter Metadata

Write Your Content

Use MDX Components (Optional)

Preview Your Post

Publish Your Post

Verification

Common Issues

Post Not Appearing

Images Not Loading

Formatting Issues

Next Steps

On this page