Rebati
Back to Blog
Featured

Getting Started with Astro - A Complete Guide

Learn how to build fast, modern websites with Astro. This comprehensive guide covers everything from setup to deployment.

• By Mohammad Rebati
astro
web-development
tutorial
Getting Started with Astro - A Complete Guide

Introduction

Astro is a modern static site generator that allows you to build faster websites with less client-side JavaScript. In this guide, we’ll explore what makes Astro special and how to get started.

What is Astro?

Astro is a web framework designed for content-driven websites. It ships zero JavaScript by default, which means your sites load incredibly fast. You can still use React, Vue, or other frameworks for interactive components when needed.

Why Choose Astro?

  • Performance: Zero JavaScript by default means faster load times
  • Flexibility: Use any framework you want (React, Vue, Svelte, etc.)
  • Developer Experience: Great DX with TypeScript support and modern tooling
  • SEO Friendly: Perfect for content sites and blogs

Getting Started

Installation

npm create astro@latest

Follow the prompts to set up your project. Astro will guide you through the setup process.

Project Structure

my-astro-site/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── public/
└── astro.config.mjs

Your First Page

Create a file in src/pages/index.astro:

---
// Component script (runs at build time)
const title = "Hello, Astro!";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

Key Concepts

Components

Astro components use a special .astro file format that combines HTML, CSS, and JavaScript:

---
// Component script
const name = "Astro";
---

<div class="greeting">
  <h1>Hello, {name}!</h1>
</div>

<style>
  .greeting {
    color: blue;
  }
</style>

Pages

Pages in Astro are created using file-based routing. Any file in src/pages/ becomes a route.

Layouts

Layouts wrap your pages with common HTML structure:

---
// src/layouts/Layout.astro
---

<html>
  <head>
    <slot name="head" />
  </head>
  <body>
    <slot />
  </body>
</html>

Using Frameworks

You can use React, Vue, or other frameworks for interactive components:

npx astro add react

Then use React components in your Astro pages:

---
import MyReactComponent from '../components/MyReactComponent';
---

<MyReactComponent client:load />

Deployment

Astro sites can be deployed to various platforms:

  • Netlify: npm run build and deploy the dist folder
  • Vercel: Connect your repo, Vercel detects Astro automatically
  • Cloudflare Pages: Deploy directly from GitHub

Conclusion

Astro is an excellent choice for building fast, modern websites. Its zero-JS-by-default approach makes it perfect for content sites, while still allowing you to use frameworks when needed.

Ready to build something amazing? Check out our Astro templates to get started quickly!

Back to Blog