Astro Cheatsheet

This cheatsheet provides a quick reference for developers working with Astro. Keep it handy for your next project!

Basic Commands

• npm create astro@latest — Create a new Astro project
• npm run dev — Start the development server
• npm run build — Build your site for production
• npm run preview — Preview your production build

File Structure

• src/pages/ — Page routes
• src/components/ — Reusable UI components
• src/layouts/ — Layout components
• src/content/ — Markdown content

Useful Syntax

• Import a component:

  import MyComponent from '../components/MyComponent.astro';

• Use a layout:

  import Layout from '../layouts/Layout.astro';
  <Layout>
    <h1>Hello, world!</h1>
  </Layout>

Best Practices

• Use semantic HTML for accessibility
• Keep components small and reusable
• Organize content by language and category

Happy coding with Astro!