Astro Template

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

Stack

• Astro 5 - Static site framework
• React 19 - Interactive components
• Tailwind CSS 4 - Minimal styling
• MDX - Markdown with JSX for blog posts
• 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/      # Minimal components (BaseHead, BlogCard, FormattedDate)
├── content/
│   └── blog/       # Blog posts (MDX)
├── layouts/         # BaseLayout, BlogPost
├── pages/          # Routes (index, blog, contact, 404)
├── styles/         # Minimal global CSS
└── utils/          # Utility scripts

public/
└── media/          # Static assets

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

Pages

• / - Homepage with navigation
• /blog - Blog index
• /blog/[slug] - Individual blog posts
• /contact - Contact form
• /404 - 404 page

Blog Posts

Create MDX files in src/content/blog/:

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

Your content here...

Utilities

# AI-powered commit messages (requires OpenRouter API key)
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 title, description, social links
• astro.config.mjs - Astro configuration
• wrangler.jsonc - Cloudflare Pages configuration
• dev/design.json - Design system reference

Development

See CLAUDE.md for detailed architecture and development guidance.

License

MIT