Blog

Overview

BetterStarter includes a full blog system with:

1. Markdown-based content - Posts live in content/blog/
2. RSS feed - Auto-generated at /rss.xml
3. Blog pages - List view and individual post pages
4. Automatic indexing - New posts appear immediately

File Structure

content/blog/
  my-first-post.md
  features-explained.md
  another-post.md

Each .md file becomes a blog post at /blog/{slug}.

Post Format

---
title: "My First Post"
description: "A brief summary for previews"
published: "2026-02-28"
---

## Introduction

Make your opening compelling. This is your hook.

## Main Topic

Dive into the content. Use clear headings and paragraphs.

### Subsection

Break up long content into digestible chunks.

## Conclusion

Summarize key takeaways and call to action.

Publishing Rules

Blog Pages

Blog List

The /blog/ page shows all published posts in reverse chronological order:

• Featured image
• Post title
• Description excerpt
• Publication date
• Author (if configured)

Individual Posts

Each post has a dedicated page with:

• Full content rendered from Markdown
• Table of contents (auto-generated from headings)
• Author info
• Publication date
• Social sharing buttons
• Related posts (optional)

RSS Feed

Auto-generated RSS feed at /rss.xml includes:

• Post title, description, and publication date
• Full post content
• Author information
• Media enclosures (if you add images)

Subscribe with RSS readers:

• Feedly
• Inoreader
• Apple Podcasts (if you add audio)
• Any RSS client

Writing Tips

Headlines

Write attention-grabbing titles:

GOOD: "5 Mistakes I Made with TypeScript"
BAD: "TypeScript Stuff"

GOOD: "How to Deploy TanStack Start to Vercel"
BAD: "Deployment"

Descriptions

Descriptions appear in:

• Blog list previews
• Search results
• Open Graph (social sharing)

Keep them concise and scannable:

❌ "This post is about how you can use TypeScript effectively"
✅ "Master TypeScript: From zero to advanced in one post"

Markdown Formatting

# Main heading (H1) - Usually your title

## Section heading (H2)

### Subsection (H3)

Use **bold** for emphasis and *italics* sparingly.

> Blockquotes work great for quotes or callouts

\`\`\`typescript
// Code blocks with language specification
const greeting = "Hello"
\`\`\`

- Bullet lists
- For scanning
- Main points

Images

Store images in public/blog-assets/{post-slug}/:

![Alt text](https://betterstarter.dev/blog-assets/my-post/image.jpg)

Sizing:

• Featured image: 1200x630 (16:9)
• Content images: 800-1200px wide
• Format: WebP or JPG for fast loading

Publishing Workflow

1. Write the post in Markdown
2. Save to content/blog/post-name.md
3. Commit to git
4. Push to main branch
5. Live immediately on /blog/post-name

No approval process—posts go live on merge.

Drafts

To keep posts private while writing, use a future date:

---
published: "2026-12-31"
---

Posts are only visible when published date is today or earlier.

SEO for Blog Posts

Each post automatically gets:

• Canonical URL
• Open Graph metadata for social sharing
• Sitemap inclusion
• RSS inclusion
• Meta descriptions

Manually configure:

// In blog route if needed
export const Route = createFileRoute('/blog/$slug')({
  head: ({ loaderData }) => ({
    meta: generatePageSEO({
      title: loaderData.post.title,
      description: loaderData.post.description,
      image: loaderData.post.featuredImage,
    }),
  }),
})

Best Practices

• Consistency: Post regularly (weekly, bi-weekly, monthly)
• Quality over quantity: One great post beats ten mediocre ones
• Link internally: Reference other posts and docs
• Update old posts: Refresh popular posts with new info
• Proofread: Grammar and typos hurt credibility
• Test rendering: Use pnpm dev to preview before publishing