Best Boilerplate with Blog Built In 2026

Content Marketing Is Your Growth Engine

For most SaaS products, organic search is the most sustainable growth channel. And organic search requires content — blog posts, guides, comparisons, tutorials. The question isn't whether you need a blog, it's how your boilerplate handles it.

Three starters approach blogging differently: T3 Stack uses MDX with content collections, AstroWind uses Astro Content Collections with near-zero JavaScript, and Makerkit uses a plugin-based blog with MDX support.

The right choice depends on whether content is your primary growth strategy (AstroWind) or a secondary feature of your SaaS app (T3/Makerkit).

TL;DR

AstroWind (free, Astro) has the best blogging experience — content collections with typed schemas, near-zero JavaScript, perfect Lighthouse scores, and built-in RSS/sitemap/OG images. Makerkit ($249+, Next.js) provides a clean blog plugin with MDX, categories, and SEO metadata integrated into your SaaS app. T3 Stack (free, Next.js) supports MDX but requires manual blog setup — maximum flexibility, minimum built-in features. Choose AstroWind for content-first sites. Choose Makerkit for SaaS with integrated blog. Choose T3 for maximum customization.

Key Takeaways

AstroWind's blog is the fastest — near-zero JavaScript means perfect Lighthouse scores and instant page loads.
Makerkit's blog integrates with your SaaS — same auth, same design system, same deployment. AstroWind is a separate site.
T3 Stack gives you MDX foundations but you build the blog features yourself — category pages, RSS feed, OG images, sitemap.
Content collections with typed schemas (Astro, Velite) catch frontmatter errors at build time. Manual MDX setups catch them in production.
RSS and sitemap generation are crucial for SEO — AstroWind includes both. T3 requires manual setup.
For serious content marketing, consider using Astro for the blog and your SaaS boilerplate for the app — best of both worlds.

Blog Feature Comparison

Feature	T3 Stack	AstroWind	Makerkit
Blog included	⚠️ MDX foundations	✅ Full blog system	✅ Blog plugin
Content format	MDX	Markdown/MDX	MDX
Typed schemas	❌ Manual	✅ Content Collections	✅ Plugin schemas
Categories/tags	❌ Manual	✅ Built-in	✅ Built-in
Author pages	❌	✅	⚠️ Basic
Pagination	❌ Manual	✅ Built-in	✅ Built-in
Related posts	❌	✅	⚠️ Basic
Reading time	❌	✅	✅
Table of contents	❌	✅	⚠️ Manual
RSS feed	❌ Manual	✅ Automatic	⚠️ Manual
Sitemap	⚠️ next-sitemap	✅ Automatic	✅ Plugin
OG images	❌ Manual	✅ Auto-generated	✅ Configured
Search	❌	⚠️ Client-side	❌
Syntax highlighting	✅ MDX plugin	✅ Shiki	✅ MDX plugin
Dark mode	✅	✅	✅
Draft posts	❌	✅	✅

AstroWind: Content-First Architecture

AstroWind treats blogging as a first-class concern. Posts are markdown files with typed frontmatter:

---
title: "How We Reduced Bundle Size by 60%"
description: "A practical guide to JavaScript bundle optimization..."
publishDate: 2026-03-08
image: ~/assets/images/bundle-optimization.jpg
category: Engineering
tags: [performance, webpack, optimization]
author: Jane Developer
draft: false
---

Your blog content here...

The content collection schema validates every post at build time:

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string().max(80),
    description: z.string().max(160),
    publishDate: z.date(),
    image: image().optional(),
    category: z.enum(['Engineering', 'Product', 'Business']),
    tags: z.array(z.string()),
    author: z.string(),
    draft: z.boolean().default(false),
  }),
});

If a post has a typo in the category field or missing required metadata, the build fails — not production.

Performance

AstroWind blog posts ship ~5-15 KB of JavaScript. A typical blog post page:

HTML: ~20 KB (complete article)
CSS: ~15 KB (Tailwind)
JS: ~5 KB (mobile menu, theme toggle)
Total: ~40 KB

Compared to T3/Makerkit blog posts:

HTML: ~15 KB (hydration markers + content)
CSS: ~15 KB (Tailwind)
JS: ~80-120 KB (React runtime + hydration)
Total: ~110-150 KB

AstroWind pages load 2-3x faster.

Makerkit: Blog as Part of Your SaaS

Makerkit's blog lives within your Next.js application. Same design system, same navigation, same deployment. Posts are MDX files in your project:

content/
├── blog/
│   ├── how-we-reduced-bundle-size.mdx
│   ├── announcing-v2.mdx
│   └── customer-success-story.mdx

The advantage: your blog shares auth with your app. You can have gated content (blog posts visible only to logged-in users), personalized CTAs, and seamless navigation between blog and product.

The tradeoff: your blog loads React's runtime. Lighthouse Performance scores drop from 98-100 (AstroWind) to 85-95 (Makerkit).

T3 Stack: Build Your Own Blog

T3 Stack includes MDX support through @next/mdx or contentlayer (now velite), but you build the blog features yourself:

// You write this
export default function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.date}</time>
      <MDXContent components={mdxComponents} />
    </article>
  );
}

// And this
export function generateStaticParams() {
  return allPosts.map(post => ({ slug: post.slug }));
}

// And the RSS feed, and the sitemap, and the OG images...

Maximum flexibility. Maximum work. If you enjoy building blog infrastructure, T3 gives you full control. If you want to write posts and ship, AstroWind or Makerkit save hours.

SEO Capabilities

Feature	T3 Stack	AstroWind	Makerkit
Meta title/description	✅ Metadata API	✅ Built-in	✅ Plugin
Canonical URLs	⚠️ Manual	✅ Automatic	✅ Automatic
JSON-LD structured data	❌ Manual	✅ Article schema	✅ Plugin
Open Graph images	❌ Manual	✅ Auto-generated	✅ Configured
Twitter cards	❌ Manual	✅ Built-in	✅ Built-in
Sitemap	⚠️ next-sitemap pkg	✅ @astrojs/sitemap	✅ Plugin
RSS feed	❌ Manual	✅ @astrojs/rss	⚠️ Manual
Robots.txt	⚠️ Manual	✅ Configured	✅ Plugin
Internal linking	❌ Manual	✅ Related posts	⚠️ Manual
Page speed (Lighthouse)	85-95	98-100	88-95

For SEO-driven content marketing, AstroWind's out-of-the-box SEO features are unmatched. Every blog post automatically gets structured data, OG images, canonical URLs, and inclusion in the sitemap and RSS feed.

When to Choose Each

Choose AstroWind If:

Content marketing is your primary growth strategy — you'll publish 4+ posts per month
Page speed matters for SEO — Google uses Core Web Vitals as a ranking factor
You want zero-config blogging — categories, tags, RSS, sitemap, OG images all built-in
Your blog and app are separate — blog drives traffic, app handles users (different concerns)

Choose Makerkit If:

Blog is part of your SaaS — same design, same auth, same navigation
You need gated content — blog posts visible only to subscribers or logged-in users
Moderate publishing frequency — 2-4 posts per month
You want one codebase — blog and app deploy together

Choose T3 Stack If:

You want full control over every aspect of your blog's implementation
Blog is a secondary feature — a few announcement posts, not a content engine
You'll build custom features — interactive MDX components, embedded demos, custom layouts
You enjoy building infrastructure — RSS, sitemap, OG image generation are fun challenges

The Best of Both Worlds

Many successful SaaS products use Astro for the blog and Next.js (T3/Makerkit) for the app:

www.example.com/blog  → AstroWind (perfect SEO, zero JS)
app.example.com       → T3/Makerkit (full SaaS functionality)

The blog drives organic traffic. CTAs link to the app for signup. Different tools for different jobs.

Compare blog features across 50+ boilerplates on StarterPick — find the right content foundation for your growth strategy.

Review AstroWind and compare alternatives on StarterPick.

Why Blog Architecture Matters for SEO

The blog architecture choice has compounding effects on search performance. A well-structured MDX blog with proper metadata, static generation, and correct HTML markup will outperform a dynamically rendered blog for content indexing — not because of any mysterious Google bonus for certain frameworks, but because static HTML is faster to load, easier to crawl, and requires no JavaScript execution for content to be visible to crawlers.

The three SEO-critical blog requirements that boilerplate blogs often get wrong:

Canonical URLs prevent duplicate content penalties. Every blog post should have a single canonical URL. If your blog is accessible at both /blog/my-post and /blog/my-post/, only one should be the canonical. The <link rel="canonical"> tag should match exactly one URL. Makerkit and AstroWind handle this correctly. Some boilerplates omit canonical tags entirely.

Open Graph and Twitter Card metadata is required for social sharing. When someone shares your blog post on LinkedIn, the featured image and description come from <meta property="og:image"> and <meta property="og:description">. Without these, social shares show blank previews that reduce click-through rates. Most boilerplates include these — but check that the OG image is actually generated per-post, not shared across all posts.

XML sitemap generation needs to include your blog posts with correct lastmod dates. Static site generators (Astro) typically do this automatically. Next.js App Router requires a sitemap.ts file that queries your MDX files and generates the sitemap. Several Next.js boilerplates include a sitemap generator but forget to include blog posts or use incorrect lastmod dates.

Key Takeaways

AstroWind is the best choice when the blog is the primary product: zero JavaScript by default, perfect Lighthouse scores, and designed specifically for content-first sites
Makerkit's MDX blog is the best for SaaS products where the blog drives leads for the application — it's integrated with the full SaaS application, shares auth, and supports gated content
The hybrid pattern (Astro for the blog, Next.js for the app) is the most scalable architecture for serious content marketing — different tools for genuinely different requirements
Canonical URLs, per-post OG images, and XML sitemaps are the three blog SEO requirements most commonly missed by boilerplate implementations — verify all three before launching
Blog content written with developer audiences in mind (tutorials, comparisons, technical guides) typically outperforms feature-focused marketing content in organic search — the blog architecture only helps if the content strategy consistently targets queries that your ideal customers actually use when evaluating solutions like yours

Velite and Content Collections: The MDX Data Layer

Modern Next.js boilerplates are converging on Velite (or its predecessor Contentlayer) as the MDX data layer — the library that reads your MDX files, validates frontmatter, and exposes typed content objects to your pages.

Velite reads MDX files from your content/ directory and generates a TypeScript module (/.velite) that exports typed arrays of your content. Your blog/[slug]/page.tsx imports from .velite rather than scanning the filesystem directly:

// content/config.ts — define your schema once
import { defineConfig, defineCollection, s } from 'velite'

export default defineConfig({
  collections: {
    posts: defineCollection({
      name: 'Post',
      pattern: 'blog/**/*.mdx',
      schema: s.object({
        title: s.string().max(99),
        slug: s.slug('posts'),
        date: s.isodate(),
        description: s.string().max(160),
        tags: s.array(s.string()),
        body: s.mdx(),
      })
    })
  }
})

// app/blog/[slug]/page.tsx — fully typed, no filesystem reads
import { posts } from '#site/content'

export function generateStaticParams() {
  return posts.map(post => ({ slug: post.slug }))
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  const post = posts.find(p => p.slug === params.slug)!
  return <article><post.body /></article>
}

Velite catches schema violations at build time — missing required fields, wrong types, duplicate slugs — before your deploy. This is meaningfully better than discovering frontmatter errors in production logs at 2am.

For T3 Stack users adding a blog, Velite is the recommended MDX layer over Contentlayer (which is no longer maintained). For AstroWind, Astro Content Collections serve the same role with equivalent build-time validation. For Makerkit, the plugin system wraps a similar approach.

One important practical point: Velite and Contentlayer both require a build step before your Next.js dev server can serve blog pages. The .velite output directory must be generated before imports resolve. This means your CI pipeline needs to run the content build before next build, and your dev workflow needs velite running in watch mode alongside next dev. AstroWind handles this transparently because content collection compilation is built into Astro's build pipeline — no separate process needed.

Connecting Blog to Your SaaS Growth Funnel

The blog's SEO value only converts if the architecture connects readers to your SaaS product. Three integration patterns matter:

CTA placement in MDX — Most boilerplates support MDX custom components. A <CTABanner /> component placed at the bottom of every post (or midway through long guides) can be globally managed from one file while appearing across hundreds of posts. Without this, adding a new CTA to old posts requires editing every MDX file.

Related post recommendations — AstroWind includes related posts by tag. T3/Makerkit require custom implementation. At scale (50+ posts), related posts increase time-on-site and reduce bounce rate — both signals Google uses for content quality evaluation.

Internal linking — Systematically linking between blog posts distributes PageRank across your content. The best SaaS boilerplates guide and comparison articles benefit from links from your tutorial content. This is a content strategy concern, not a boilerplate feature — but the boilerplate's MDX component support (custom link components with automatic internal/external handling) affects how systematically you can implement it. For broader context on how content architecture connects to framework selection, see why SaaS boilerplates choose Next.js and the best free open-source SaaS boilerplates guide for content-aware open-source options.

Compare blog features across 50+ boilerplates on StarterPick — find the right content foundation for your growth strategy.

The SaaS Boilerplate Matrix (Free PDF)