Skip to content
Back to Stack Recommender

Astro Content Site Stack

Astro 5 + MDX + Content Collections + Cloudflare Pages for high-performance content sites.

Static SitesSimple

Stack Components

FrameworkAstro 5
ContentMDX + Content Collections
StylingTailwindCSS 4
SearchPagefind
CMSKeystatic (optional)
DeployCloudflare Pages

Why

Astro ships zero JS by default, scoring 95+ on Lighthouse out of the box. Content Collections give type-safe frontmatter.

Cloudflare Pages deploys in 30s with global CDN. Perfect for blogs, docs, and marketing sites.

When

Choose Astro for content-driven sites: blogs, documentation, portfolios, marketing pages, and landing pages. Avoid for interactive dashboards (use Next.js) or realtime apps.

How

1. Scaffold — npm create astro@latest mysite -- --template blog 2. Add integrations — npx astro add tailwind mdx 3. Content Collections — src/content/blog/*.mdx with schema validation 4. Write pages — src/pages/index.astro, blog/[slug].astro 5. Add Pagefind — npm i pagefind, build, then pagefind --site dist 6. Deploy — npx wrangler pages deploy dist (or connect GitHub repo) 7. Custom domain — Cloudflare dashboard > Pages > Custom domains 8. Analytics — Cloudflare Web Analytics (free, privacy-friendly)

Example

// src/content.config.ts — Content Collections schema import { defineCollection, z } from "astro:content"; import { glob } from "astro/loaders"; const blog = defineCollection({ loader: glob({ pattern: "**/*.mdx", base: "./src/content/blog" }), schema: z.object({ title: z.string(), description: z.string(), pubDate: z.coerce.date(), tags: z.array(z.string()).default([]), draft: z.boolean().default(false), }), }); export const collections = { blog }; // src/pages/blog/[slug].astro — type-safe page --- import { getCollection, render } from "astro:content"; export async function getStaticPaths() { const posts = await getCollection("blog", ({ data }) => !data.draft); return posts.map((post) => ({ params: { slug: post.id }, props: { post } })); } const { post } = Astro.props; const { Content } = await render(post); --- <article> <h1>{post.data.title}</h1> <time>{post.data.pubDate.toLocaleDateString()}</time> <Content /> </article>

Common Problems

  • ⚠Content collection not found — forgot to export collections in content.config.ts
  • ⚠MDX components not rendering — need to import and pass components prop to render()
  • ⚠Pagefind index empty — run after build, not before: astro build && pagefind --site dist
  • ⚠Cloudflare Pages build fails — Node.js version mismatch, set NODE_VERSION env var

Best Practices

  • ✓Use Astro Islands — add interactive components with client:visible, keep rest static
  • ✓Generate sitemap + RSS — @astrojs/sitemap and @astrojs/rss for SEO and feed readers
  • ✓Use Keystatic for non-technical authors — git-based CMS, no external service needed
  • ✓Set cache headers in Cloudflare — long TTL for assets, short for HTML

FAQ

What is Astro Content Site Stack and what projects is it for?

Astro 5 + MDX + Content Collections + Cloudflare Pages for high-performance content sites. It pairs layered technologies for end-to-end type safety and out-of-the-box deploys, fitting everything from MVPs to production SaaS.

How do I spin up a working demo with Astro Content Site Stack in 10 minutes?

Two steps: (1) Scaffold — npm create astro@latest mysite -- --template blog; (2) Add integrations — npx astro add tailwind mdx. Get the local dev server running, then wire one real data source to verify the end-to-end loop.

What is the most common pitfall with Astro Content Site Stack and how do I avoid it?

The most common pitfall is: Content collection not found — forgot to export collections in content.config.ts. Avoid it by adding the matching checklist to your PR template and running type-check + lint + unit tests in CI — three gates before merge.

What are the best practices for Astro Content Site Stack?

Best practices for Astro Content Site Stack include: Use Astro Islands — add interactive components with client:visible, keep rest static; Generate sitemap + RSS — @astrojs/sitemap and @astrojs/rss for SEO and feed readers; Use Keystatic for non-technical authors — git-based CMS, no external service needed. The first one — "Use Astro Islands — add interactive components with client:visible, keep rest static" — should be set up at project init to avoid costly rework later.

When should I NOT choose Astro Content Site Stack?

Pick something else in three cases: (1) the team has zero experience with the core framework and the deadline is tight (learning-curve risk); (2) it's a pure content/marketing site (Astro is lighter); (3) you need very high throughput (>10k RPS) or strict-consistency microservices (Go/Rust). Astro Content Site Stack shines for mid-to-high complexity full-stack and API work — don't over-engineer simple static pages with it.