Getting Started with Astro: A Practical Guide
Everything you need to know to build your first Astro site, from project setup to deployment.
Astro is a modern static site generator that ships zero JavaScript by default. It is perfect for content-driven sites, marketing pages, and documentation.
Project Setup
Run npm create astro@latest to scaffold a new project. Choose a starter template or start from scratch. The project structure is straightforward: pages in src/pages/, layouts in src/layouts/, and components in src/components/.
Pages and Routing
Astro uses file-based routing. Create a file at src/pages/about.astro and it is available at /about. Dynamic routes use bracket syntax: [slug].astro.
Components
Astro components use a frontmatter script block (fenced with ---) for logic and a template section for HTML. You can also use React, Vue, Svelte, or Solid components alongside Astro components.
Deployment
Build your site with npm run build and deploy the dist/ folder to any static host: Vercel, Netlify, Cloudflare Pages, or a simple S3 bucket. Astro also supports SSR if you need server-side rendering.