Getting Started with Astro

Astro is a modern static site builder that delivers lightning-fast websites with a great developer experience. It’s perfect for content-driven sites, blogs, and e-commerce.

Installation

To start a new Astro project, open your terminal and run:

npm create astro@latest

Follow the prompts to choose your project name, template, and whether to install dependencies.

Project Structure

An Astro project typically has the following structure:

├── src/
│   ├── components/  # Astro, React, Vue, Svelte components
│   ├── layouts/     # Reusable UI wrappers
│   ├── pages/       # Your website pages
│   └── styles/      # Global styles
├── public/          # Static assets (images, fonts)
├── astro.config.mjs # Astro configuration
├── package.json     # Project dependencies
└── tsconfig.json    # TypeScript configuration

Development Server

To start the development server and see your changes in real-time, run:

npm run dev

This will typically start the server at http://localhost:4321.

Deployment

To build your project for deployment, run:

npm run build

This will generate a dist/ directory with all your static assets, ready to be deployed to any static hosting provider.