generated from Nicholai/astro-template
2.0 KiB
2.0 KiB
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 sectionexperience.mdx- Work historyskills.mdx- Skillsfeatured-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 constantsastro.config.mjs- Astro configwrangler.jsonc- Cloudflare configdev/design.json- Design system
Development
See CLAUDE.md for detailed architecture and development patterns.
License
MIT