Astro Template

Minimal Astro development environment with React, Tailwind CSS, and Cloudflare Pages deployment.

Stack

• Astro 5 - Static site framework
• React 19 - Interactive components
• Tailwind CSS 4 - Styling
• MDX - Markdown with JSX
• TypeScript - Type safety
• Cloudflare Pages - Deployment
• pnpm - Package manager

Quick Start

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build
pnpm build

# Deploy
pnpm deploy

Project Structure

src/
├── assets/          # Images (processed by Astro)
├── components/      # React/Astro components
├── content/         # MDX content collections
│   ├── blog/       # Blog posts
│   ├── sections/   # Homepage sections
│   └── pages/      # Page content
├── layouts/         # Page layouts
├── pages/          # Routes
├── styles/         # Global CSS
└── utils/          # Utility scripts

public/
└── media/          # Static assets

dev/
├── design.json     # Design system docs
└── continuity.md   # Development log

Content Collections

Blog Posts (src/content/blog/)

---
title: 'Post Title'
description: 'Description'
pubDate: 'Dec 27 2024'
heroImage: '../../assets/image.avif'
featured: true
category: 'Category'
tags: ['tag1', 'tag2']
---

Content here...

Sections (src/content/sections/)

• hero.mdx - Hero section
• experience.mdx - Work history
• skills.mdx - Skills
• featured-project.mdx - Featured work

See files for schema examples.

Utilities

# AI-powered commit messages
pnpm commit

# Convert images to AVIF
pnpm convert:avif:all
pnpm convert:avif:jpeg
pnpm convert:avif:png

# Generate Cloudflare types
pnpm cf-typegen

Configuration

• src/consts.ts - Site constants
• astro.config.mjs - Astro config
• wrangler.jsonc - Cloudflare config
• dev/design.json - Design system

Development

See CLAUDE.md for detailed architecture and development patterns.

License

MIT