Getting Started with Astro

Astro is a modern static site generator that allows you to build faster websites with less client-side JavaScript. In this tutorial, we’ll cover the basics of setting up an Astro project and creating your first pages.

Why Choose Astro?

Performance-focused: Astro ships zero JavaScript by default, resulting in extremely fast page loads
Component Islands: Use your favorite UI framework (React, Vue, Svelte) where needed
Full-featured: Built-in Markdown support, file-based routing, and data fetching

Installation

To create a new Astro project, run the following command in your terminal:

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

# Or with yarn
yarn create astro

# Or with pnpm
pnpm create astro

Follow the prompts to set up your project. You can choose a template or start with a minimal setup.

Project Structure

A typical Astro project structure looks like this:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

public/: Static assets that will be copied directly to the build folder
src/components/: Reusable UI components
src/layouts/: Page layouts and templates
src/pages/: File-based routing system

Creating Your First Page

In Astro, pages are created in the src/pages/ directory. Let’s create a simple homepage:

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

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Astro Site</title>
  </head>
  <body>
    <h1>Welcome to my Astro site!</h1>
  </body>
</html>

Next Steps

This is just the beginning of what you can do with Astro. In future tutorials, we’ll explore:

Creating and using components
Working with Markdown content
Data fetching and API integration
Deploying your Astro site

Stay tuned for more Astro content!