Introduction

Writing blog posts should be fast and frictionless. With Claude Code, you can create, edit, and publish content using natural language commands - even voice dictation.

This post demonstrates the streamlined workflow for adding posts to this Next.js blog using Claude Code.

The Traditional Blogging Workflow

The old way of creating a blog post involved:

1. Manually creating an MDX file with the correct naming convention
2. Writing frontmatter YAML (and hoping you don't make syntax errors)
3. Formatting content in Markdown
4. Adding images to the correct directory
5. Testing locally to ensure everything renders
6. Committing and deploying

Total time: 15-30 minutes for setup alone

The Claude Code Workflow

With Claude Code, the process becomes:

Simply say (or type):

"Create a blog post titled 'My Amazing Idea' about [your topic]. Tag it with [relevant tags]."

Claude handles:

• File creation with proper naming
• Frontmatter generation with current date
• Content formatting
• Default configuration
• YAML validation

Total time: 30 seconds

Voice-Optimized Commands

Here are some examples of natural language commands that work great:

Quick Post

"Create a blog post titled 'TypeScript Tips' with 5 tips for beginners.
Tag it with typescript and tutorial."

Draft Post

"Write a draft post called 'Future Plans' with placeholder content.
I'll finish it later."

Technical Post with Code

"Create a post about React hooks with code examples showing useState
and useEffect. Use PostLayout and tag it react, javascript, tutorial."

Visual Post

"Make a blog post titled 'Photos from Iceland' using PostBanner layout.
Add placeholder text for now. Tag it travel, photography."

How It Works Behind the Scenes

When you give Claude a command to create a post, it:

1. Generates a URL-friendly slug from your title

   • "My Amazing Post!" → my-amazing-post.mdx

2. Creates frontmatter with sensible defaults:

   ---
   title: 'Your Title'
   date: '2025-10-27'
   tags: ['tag1', 'tag2']
   draft: false
   summary: 'Auto-generated or provided summary'
   authors: ['default']
   layout: PostLayout
   ---
   

3. Formats your content properly as MDX

4. Saves to the correct location (/data/blog/)

5. Validates frontmatter syntax

Advanced Features

Multi-Section Posts

Request structured content:

"Create a post about API design with sections:
- Introduction
- REST principles
- Best practices
- Common mistakes
- Conclusion

Add actual content for each section."

Code Examples

Claude can add properly formatted code blocks:

// Example: React Component
function BlogPost({ title, content }) {
  return (
    <article>
      <h1>{title}</h1>
      <div>{content}</div>
    </article>
  );
}

Editing Existing Posts

"Edit the post 'blogging-with-claude-code' to add a section
about keyboard shortcuts."

Best Practices

1. Be Specific with Tags

Tags help readers find related content. Use 3-5 relevant tags per post.

2. Write Compelling Summaries

The summary appears in:

• Blog listing pages
• Social media cards (Open Graph)
• Search engine results

Keep it to 150-200 characters.

3. Choose the Right Layout

• PostLayout: Standard posts with sidebar (default)
• PostSimple: Minimal, distraction-free reading
• PostBanner: Posts with featured images

4. Use Draft Status

Set draft: true while working on a post. It won't appear in production builds.

5. Organize with Folders

For post series, use nested folders:

data/blog/
└── react-tutorial/
    ├── part-1-basics.mdx
    ├── part-2-hooks.mdx
    └── part-3-advanced.mdx

Publishing Workflow

After Claude creates your post:

1. Review the content

   yarn dev
   # Visit http://localhost:3000/blog
   

2. Make any edits

   • Ask Claude to refine specific sections
   • Add images or diagrams
   • Adjust formatting

3. Deploy

   yarn build
   git add .
   git commit -m "Add new blog post"
   git push
   

4. Verify on production

   • Check your deployed site
   • Share on social media

Tips for Voice Dictation

If you're using voice input:

1. Speak clearly and pace yourself

   • Pause between sentences
   • Enunciate technical terms

2. Structure as you speak

   • "New paragraph" for breaks
   • "Heading: Introduction" for sections
   • "Code block in JavaScript" before code

3. Provide context upfront

   • Start with title, tags, and layout
   • Describe the overall structure
   • Then fill in content

4. Review and refine

   • Voice transcription isn't perfect
   • Do a quick review pass
   • Ask Claude to fix any errors

Real-World Example

Here's exactly how I created this post using voice:

Command:

"Create a blog post titled 'Blogging with Claude Code: A Voice-First Workflow' about how to use Claude Code to create blog posts with voice commands. Include sections on traditional workflow, Claude workflow, voice commands, behind the scenes, advanced features, best practices, publishing, and voice tips. Tag it with claude-code, blogging, workflow, and ai. Use PostLayout."

Claude generated the complete structure, and I refined specific sections by asking:

"Expand the section on voice-optimized commands with more examples"

Total time from idea to publishable post: 5 minutes

Conclusion

Blogging with Claude Code removes all the friction from content creation:

• No manual file management
• No YAML syntax errors
• No context switching between tools
• No formatting headaches

Just speak your idea, and Claude handles the rest.

Next time you have a blog post idea, don't open a text editor - just talk to Claude.

Resources

• Claude.md Documentation - Complete guide to posting
• MDX Documentation - Learn MDX syntax
• Next.js Blog Guide - Next.js fundamentals

Happy blogging!