Ashish Sharma

Getting Started with Astro

Getting Started with Astro

Astro is a modern static site generator that helps you build fast, content-focused websites with less JavaScript. In this post, we’ll explore why Astro is a great choice for your next project.

Why Astro?

Astro brings several compelling features to the table:

  • Zero JavaScript by default: Send HTML to your users, add interactivity only where needed.
  • All-in-one: Includes routing, markdown support, asset optimization, and more out of the box.
  • Framework agnostic: Use React, Vue, Svelte, or plain HTML components together.
  • Performance: Built-in image optimization and lazy loading make your site blazing fast.

Getting Started

To create a new Astro project, run:

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

The development server will start at http://localhost:3000.

Building Pages

Astro uses file-based routing, so creating pages is as simple as adding .astro files to the src/pages/ directory:

---
// src/pages/hello.astro
---

<h1>Hello, world!</h1>

Visit /hello and you’ll see your page rendered.

Conclusion

Astro is an excellent choice for building modern, performant websites. Whether you’re building a blog, portfolio, or documentation site, Astro has you covered.

Learn more at astro.build.