How I Set Up This Site with Astro

By Hoang-Long Nguyen · March 2, 2026 · Platform, Astro, Static Sites, Cloudflare

A practical look at how this site is built — Astro Content Collections, static output, Cloudflare Pages deployment, and the few decisions that made it worth the setup.

This site is built with Astro. Here’s what the setup looks like and why I made the choices I did.

Content Collections

Astro’s Content Collections API handles all the blog posts. You define a schema in src/content.config.ts using Zod — frontmatter fields are validated at build time, so a missing date or wrong type throws an error rather than silently rendering wrong.

const posts = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/posts" }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    description: z.string().optional(),
  }),
});

Static output on Cloudflare Pages

The output: "static" config in astro.config.mjs means the build produces pure HTML files — no serverless functions, no edge workers. Cloudflare Pages serves them directly from its CDN. Cold starts don’t exist. Pages load instantly everywhere.

Sitemap and SEO

The @astrojs/sitemap integration generates sitemap-index.xml automatically at build time by crawling all static routes. Pair that with a robots.txt pointing to the sitemap and you have the basics covered without thinking about it again.

Running locally

npm run dev     # dev server at localhost:4321
npm run build   # production build to dist/
npm run preview # serve the built output locally

The dev server has HMR for component changes. Content changes (frontmatter edits) need a page refresh.