Getting Started with Astro: A Beginner’s Guide

Astro is a popular framework for building fast and modern websites. In this article, we’ll learn how to get started with Astro.

Why Choose Astro?

Astro has several advantages that make it a great choice for developers:

Zero JavaScript by default: Fast loading with no unnecessary JavaScript
Component-based: Easy to use with a component system
Framework agnostic: Works with React, Vue, Svelte, and more
Static-first: Focuses on building fast static websites

Installing Astro

Start by creating a new project:

npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev

Project Structure

An Astro project has an easy-to-understand structure:

src/
├── components/    # Various components
├── layouts/       # Layouts for web pages
├── pages/         # Website pages
└── styles/        # CSS files

Creating Your First Page

Create a file src/pages/index.astro:

---
// Frontmatter - JavaScript/TypeScript code
const title = "Welcome to Astro";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>This is the first page of your Astro website</p>
  </body>
</html>

Using Components

Create a component in src/components/Button.astro:

---
export interface Props {
  text: string;
  variant?: 'primary' | 'secondary';
}

const { text, variant = 'primary' } = Astro.props;
---

<button class={`btn btn-${variant}`}>
  {text}
</button>

<style>
  .btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  
  .btn-primary {
    background: #3b82f6;
    color: white;
  }
  
  .btn-secondary {
    background: #6b7280;
    color: white;
  }
</style>

Deploying

Astro supports deployment on multiple platforms:

Netlify: npm run build && netlify deploy --prod --dir dist
Vercel: Use Vercel CLI or GitHub integration
Cloudflare Pages: Connect repository and auto-deploy

Conclusion

Astro is an excellent framework for building fast and SEO-friendly websites. With its “Zero JavaScript by default” approach and flexibility in using various frameworks, Astro is an interesting choice for various projects.

Try building a website with Astro today!