ID
Pencarian

Getting Started with Astro + Cloudflare

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

2 menit baca
Terjemahan Bahasa Inggris

Artikel ini ditulis dalam Bahasa Indonesia. Ingin membaca versi Bahasa Inggris?

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
AW
Tentang Penulis

Andre Wahyu Hermawan

Content Creator & Web Enthusiast

Pengelola ANDREAN. Berbagi seputar AI, web development, dan strategi konten YouTube.