astro

Astro Usage Guide

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.

---

Quick Reference

File Location

CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.

CLI Commands

• npx astro dev - Start the development server.
• npx astro build - Build your project and write it to disk.
• npx astro check - Check your project for errors.
• npx astro add - Add an integration.
• npx astro sync - Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

Project Structure

Reference project structure docs.

• src/* - Project source code (components, pages, styles, images, etc.)
• src/pages - Required. Defines all pages and routes.
• src/components - Components (convention, not required).
• src/layouts - Layout components (convention, not required).
• src/styles - CSS/Sass files (convention, not required).
• public/* - Non-code, unprocessed assets (fonts, icons, etc.); copied as-is to build output.
• package.json - Project manifest.
• astro.config.{js,mjs,cjs,ts} - Astro configuration file. (recommended)
• tsconfig.json - TypeScript configuration file. (recommended)

---

Core Config Options

Option	Notes
site	Your final, deployed URL. Used to generate sitemaps and canonical URLs.

Example astro.config.ts

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
});

---

Common Workflows

Creating a Basic Page

Add a file to src/pages/ — the filename becomes the route:

---
// src/pages/index.astro
const title = 'Hello, Astro!';
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

Creating a Component