web-development • March 9, 2024 • 1 min read

Getting Started with Astro: A Modern Static Site Generator

Learn how to build lightning-fast websites with Astro, a modern static site generator that lets you use your favorite JavaScript frameworks while shipping zero JavaScript by default.

Rio Astamal

Full Stack Developer & Tech Enthusiast

Getting Started with Astro

Astro is a modern static site generator that allows you to build lightning-fast websites using your favorite JavaScript frameworks while shipping zero JavaScript by default.

Why Astro?

Astro stands out from other static site generators for several reasons:

Component Islands: Use React, Vue, Svelte, or any other framework components where needed
Zero JavaScript by Default: Ship no JavaScript to the client unless necessary
Excellent Developer Experience: Hot module reloading, TypeScript support, and more
Powerful Content Collections: First-class support for content management

Setting Up Your First Astro Project

Getting started with Astro is straightforward. Here’s how:

# Create a new project with npm
npm create astro@latest

# Or with pnpm
pnpm create astro@latest

# Or with yarn
yarn create astro

Project Structure

A typical Astro project structure looks like this:

├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── public/
├── astro.config.mjs
└── package.json

Building Pages

In Astro, pages can be created using .astro, .md, .mdx, or even .html files:

---
// src/pages/index.astro
---

<html lang="en">
  <head>
    <title>My Astro Site</title>
  </head>
  <body>
    <h1>Welcome to Astro!</h1>
  </body>
</html>

Using Components

Astro components are powerful and flexible:

---
// src/components/Card.astro
interface Props {
  title: string;
  body: string;
}

const { title, body } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <p>{body}</p>
</div>

<style>
  .card {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 0.5rem;
  }
</style>

Conclusion

Astro is an excellent choice for building modern websites, especially content-focused sites like blogs, documentation, and marketing sites. Its unique approach to JavaScript, combined with its excellent developer experience, makes it a powerful tool in any web developer’s arsenal.

Stay tuned for more Astro tutorials and tips!

thought • March 9, 2024

Hello World