🚀 Astro Skeleton Starter Kit

A modern, opinionated Astro starter template with SEO, performance, and ease-of-use in mind.

pnpm create astro@latest -- --template @ddlaws0n/astro-skeleton

✨ Features

• 🔥 Astro v5 - The latest version with improved performance and features
• 💨 Tailwind CSS v4 - Next-generation utility-first CSS framework
• 🔍 Built-in SEO - Meta tags, Open Graph, and Twitter Cards with astro-seo-meta
• 📑 Sitemap Generation - Automatic sitemap for improved search engine indexing
• 📰 RSS Feed Support - Keep your audience updated with built-in RSS capabilities
• ⚡ Performance Optimizations - Third-party script handling with Partytown
• 🖼️ Image Optimization - Using Sharp for efficient image processing
• 🧩 Icon System - Easy icon usage with Astro Icon and Iconify Solar
• 🧪 Testing Setup - Vitest configured and ready to use
• ✅ Code Quality Tools:
  • Biome for fast linting and formatting
  • TypeScript for type safety
  • Astro Check for Astro-specific checks
• 🔄 Git Hooks - Using lint-staged for clean commits
• 📦 Semantic Release - Automated versioning and changelogs

📂 Project Structure

Inside of your Astro Skeleton project, you'll see the following folders and files:

/
├── .github/              # GitHub configuration including workflows
│   └── workflows/        # GitHub Actions workflows
├── public/               # Static assets
│   └── favicon.svg
├── src/
│   ├── components/       # Reusable UI components
│   ├── content/          # Content collections (if enabled)
│   ├── layouts/          # Page layouts
│   │   └── Layout.astro
│   ├── pages/            # Page components and routes
│   │   └── index.astro
│   └── styles/           # Global styles and Tailwind configuration
├── tests/                # Test files using Vitest
├── .env.example          # Example environment variables
├── astro.config.mjs      # Astro configuration
├── package.json          # Project dependencies and scripts
└── tsconfig.json         # TypeScript configuration

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm start	Alias for pnpm dev
pnpm build	Type-checks and builds production site to ./dist/
pnpm preview	Preview your build locally before deploying
pnpm sync	Sync content collections types
pnpm check	Run all checks (Astro, TypeScript, Biome)
pnpm check:astro	Check Astro files for errors
pnpm check:types	Check TypeScript types
pnpm check:biome	Check files with Biome
pnpm format	Format files with Biome
pnpm lint	Lint files with Biome
pnpm lint:fix	Lint and fix files with Biome
pnpm test	Run Vitest tests
pnpm test:watch	Run Vitest in watch mode
pnpm test:coverage	Run Vitest and generate coverage report
pnpm clean	Clean build files and dependencies
pnpm release	Run semantic release (CI typically)

🛠️ Configuration

This template comes pre-configured with:

• Tailwind CSS v4 - Including typography plugin
• SEO Tools - Meta tags, sitemap, and RSS feed
• Performance Optimizations - Partytown for third-party scripts
• Testing Framework - Vitest configured for unit and integration tests
• Code Quality - Biome for linting and formatting with pre-commit hooks

🚀 Deployment

This template is ready to deploy to your favorite hosting platform. It works great with:

• Netlify
• Vercel
• Cloudflare Pages
• GitHub Pages

👀 Want to learn more?

Feel free to check Astro documentation or jump into the Astro Discord server.