# 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 ```bash # 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/`: ```yaml --- 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 ```bash # 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