Getting Started with Astro
Astro is a modern web framework that delivers fast, content-focused websites. In this guide, we’ll explore the fundamentals of building with Astro.
Why Choose Astro?
Astro stands out for its unique approach to building websites:
- Zero JavaScript by default: Only ship the JavaScript you need
- Component Islands: Hydrate interactive components on demand
- Framework agnostic: Use React, Vue, Svelte, or any framework
Your First Astro Project
Getting started is simple. First, create a new project:
npm create astro@latestFollow the prompts to set up your project structure.
Building Pages
Astro pages live in the src/pages/ directory and use the .astro extension:
---
const title = "My Page";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>Welcome to Astro!</h1>
</body>
</html>Next Steps
Now that you understand the basics, explore:
- Content collections for managing markdown
- Component frameworks integration
- Deployment options
Happy building with Astro!
