Building a Travel Blog with Astro Content Collections and MDX

When I started building about-kazakhstan.com, I needed a framework that handled 83+ MDX articles with frontmatter validation, image optimization, and fast builds. Astro Content Collections turned out to be perfect.

Why Astro for a Content Site

• Zero JS by default -- travel articles dont need client-side interactivity
• Content Collections -- type-safe frontmatter with Zod validation
• MDX support -- embed React/Astro components (FAQ, AffiliateBox) inside markdown
• Cloudflare Pages -- free hosting, auto-deploy on git push

Content Schema

// src/content.config.ts
const blog = defineCollection({
  schema: z.object({
    title: z.string().max(70),
    description: z.string().min(100).max(160),
    pubDate: z.date(),
    updatedDate: z.date().optional(),
    heroImage: z.string(),
    category: z.enum(["culture", "travel", "food", "history", "nature"]),
    tags: z.array(z.string()),
    featured: z.boolean().default(false),
  }),
});

Quality Gate Script

I wrote a 17-point content quality checker that validates every article:

• Word count > 2000
• Internal links > 4
• At least 1 data table
• No em dashes (style rule)
• Freshness marker present
• FAQ component included

node scripts/content-quality-check.mjs --all
# Result: 83/83 PASS

Performance

• Build time: ~45s for 83 articles
• Lighthouse: 98-100 across all metrics
• Zero client JS on article pages

The site covers Almaty travel, Kazakh food, and cultural guides.

What framework do you use for content-heavy sites?