Getting Started with Astro + Cloudflare
A step-by-step guide to building a fast site with Astro and Cloudflare Pages.
Why This Stack?
Building a fast marketing website requires a combination of tools that work well together. Astro provides the static site generation, Markdown in Git keeps content versioned and reviewable, and Cloudflare Pages handles global deployment.
Setting Up Content Collections
Content collections are the backbone of your site. Define a schema in
src/content.config.ts:
const blog = defineCollection({ loader: glob({ pattern: "**/*.md", base: "./src/content/blog", generateId: ({ entry }) => entry.replace(/\.[^/.]+$/, ""), }), schema: z.object({ title: z.string(), description: z.string(), locale: z.enum(["en"]), publishDate: z.date(), draft: z.boolean().default(false), tags: z.array(z.string()).default([]), author: z.string().default("Admin"), translationKey: z.string().optional(), }),});Creating Your First Post
Create a new Markdown file in src/content/blog/:
---title: "My First Post"description: "A short description"locale: "en"publishDate: 2026-06-25draft: falsetags: - tutorialauthor: "Admin"---
## Content Here
Write your post content using **Markdown**.Multilanguage-Ready
The starter is English-only by default, but the i18n engine is wired up. To add
a language, widen the Locale type, register the locale in the config files, add
a src/i18n/<locale>.json translations file, and create localized content. See
the Internationalization guide in the docs for the full walkthrough.
Previewing Drafts
Draft posts are excluded from production builds. Set draft: true in the
frontmatter while you work, and remove it (or set false) when you’re ready to
publish.
Going Further
- Customize the Tailwind CSS theme in
src/styles/global.css - Add new sections to pages via the page content collections
- Set up analytics with GTM or Umami via the site settings
Getting Started with Astro + Cloudflare
- Step 1
Clone the repository
Run `git clone https://github.com/milzamsz/astro-cloudflare-starter` to create a local copy of the starter.
- Step 2
Install dependencies
Navigate into the project directory and run `pnpm install` to install all required packages.
- Step 3
Start the dev server
Run `pnpm dev` to start the Astro development server. Open http://localhost:4321 in your browser to see the site.
- Step 4
Customize and deploy
Edit content, update the site configuration files, and deploy to Cloudflare Pages using `pnpm build && npx wrangler pages deploy dist/`.
Frequently Asked Questions
- What is Astro?
- Astro is a web framework designed for content-driven websites. It ships zero JavaScript by default, using an island architecture for interactivity.
- Do I need Node.js to use this starter?
- Yes. This project requires Node.js 24 or later.