Search

Getting Started with Astro + Cloudflare

A step-by-step guide to building a fast site with Astro and Cloudflare Pages.

Admin2 min read
astrotutorialcloudflare

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-25
draft: false
tags:
  - tutorial
author: "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

Related posts