Introduction
Astro is a modern static site builder that delivers lightning-fast performance by shipping zero JavaScript by default. This guide will help you get started with Astro and understand its core concepts.
Why Choose Astro?
Astro offers several advantages for building content-focused websites:
- Zero JavaScript by Default: Only ship the JavaScript you need
- Framework Agnostic: Use React, Vue, Svelte, or any framework
- Built-in Optimizations: Automatic image optimization, CSS bundling, and more
- Island Architecture: Interactive components load independently
Getting Started
To create a new Astro project, run:
npm create astro@latest
Follow the prompts to set up your project with your preferred configuration.
Project Structure
A typical Astro project structure looks like this:
/
βββ public/
β βββ favicon.svg
βββ src/
β βββ components/
β βββ layouts/
β βββ pages/
βββ astro.config.mjs
Creating Your First Page
Pages in Astro are created in the src/pages directory. Hereβs a simple example:
---
const title = "My First Astro Page"
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>Welcome to Astro!</h1>
</body>
</html>
Conclusion
Astro provides a powerful foundation for building fast, modern websites. Its component-based architecture and performance optimizations make it an excellent choice for content-focused sites.
