Getting Started with Astro 6
Learn about the new features in Astro 6 and how to set up your first project with the latest version of the framework.
Astro 6 represents a major leap forward for the popular static site generator. With a completely redesigned dev server, built-in font optimization, live collections, and Content Security Policy support, Astro 6 makes building fast, content-focused websites easier than ever before. Whether you are migrating from an older version or starting fresh, this guide will walk you through everything you need to know.
What is Astro?
Astro is a web framework designed for building content-driven websites. Unlike traditional JavaScript frameworks that ship heavy client-side bundles, Astro renders your pages to static HTML at build time. This approach delivers dramatically faster page loads, better SEO, and lower hosting costs. Astro supports a unique "islands architecture" that lets you sprinkle interactive components exactly where you need them, without hydrating the entire page.
Key Features in Astro 6
The Astro team has packed this release with significant improvements that touch every part of the developer experience. The dev server has been rewritten from the ground up to be faster and more reliable. Font optimization is now built directly into the framework, eliminating the need for third-party font services. Live collections provide a real-time content editing experience that works seamlessly with Astro's existing content collections API.
Redesigned Dev Server
The new dev server in Astro 6 is significantly faster and more stable than previous versions. Hot Module Replacement (HMR) is nearly instantaneous, and the server handles large projects with thousands of files without breaking a sweat. Error overlays are more informative, and the server gracefully recovers from syntax errors without requiring a restart.
Built-in Font Optimization
Fonts are one of the biggest performance bottlenecks on the web. Astro 6 now includes first-class font support that automatically optimizes font loading. It generates fallback fonts, subsets font files to include only the characters you use, and preloads critical fonts for the fastest possible rendering. This means no more layout shift from late-loading fonts.
Live Collections
Live collections extend Astro's powerful content collections API with real-time editing capabilities. When you edit a Markdown file or modify frontmatter, changes appear instantly in the browser without a full page reload. This is particularly useful for content authors who want immediate feedback as they write and edit their articles.
Content Security Policy Support
Security is a top priority for modern websites. Astro 6 includes built-in Content Security Policy (CSP) support, making it easy to add security headers that protect your site from cross-site scripting (XSS) attacks and other injection vulnerabilities. The framework automatically generates the correct CSP headers based on the scripts and styles used in your pages.
Creating Your First Astro 6 Project
Getting started is straightforward. Run the create command and choose from several starter templates including the basics template for a minimal setup, or the blog template for a ready-to-use blog with content collections pre-configured. The CLI guides you through TypeScript configuration, package manager selection, and optional integrations.
Tip: If you are migrating from Astro 5, check the official migration guide for a complete list of breaking changes. Most projects can be upgraded in under 30 minutes.
Project Structure
An Astro 6 project follows a clean, predictable structure. Pages live in the src/pages/ directory and automatically become routes. Components go in src/components/ and can be reused across pages. Layouts in src/layouts/ provide shared HTML shells. Static assets that do not need processing live in the public/ directory, while assets that benefit from optimization (like images and SVGs) belong in src/assets/.
Why Choose Astro?
Astro stands out from other frameworks because it ships zero JavaScript by default. Every component renders to static HTML at build time, and only the interactive "islands" you explicitly mark ship JavaScript to the browser. This results in Lighthouse scores that consistently hit 100 across all categories. For content-heavy sites like blogs, documentation, marketing pages, and portfolios, Astro is often the best choice available today.