1 min de lectura

Getting Started with Astro 5

#astro #javascript #tutorial

Astro has become one of the most popular frameworks for building static websites and content. In this guide, we’ll explore how to get started with Astro 5.

Why Astro?

Astro offers several advantages over other frameworks:

  • Zero JavaScript by default: Astro sends pure HTML to the browser
  • Component Islands: Hydrate only what you need
  • Framework agnostic: Use React, Vue, Svelte or any other
  • Excellent DX: Ultra-fast hot module replacement

Installation

To create a new Astro project:

npm create astro@latest my-project
cd my-project
npm run dev

Project Structure

A typical Astro project has this structure:

src/
├── components/
├── layouts/
├── pages/
└── styles/

Creating Your First Page

Pages in Astro are .astro files in the src/pages folder:

---
// This is the frontmatter - code that runs on the server
const title = "My first page";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>Hello, world!</p>
  </body>
</html>

Conclusion

Astro is an excellent choice for blogs, documentation, and marketing sites. Its focus on performance and simplicity makes it ideal for modern projects.

Liked it? Share it!

Comments (0)

Loading...