Hero image for Getting Started with Astro

Getting Started with Astro

AstroWeb DevelopmentTutorial

Astro is a modern static site generator that has quickly become one of my favorite tools for building websites. In this post, I’ll share why I chose Astro for my portfolio and how you can get started.

Why Astro?

Astro stands out from other frameworks with its unique approach:

  • Zero JavaScript by default - Ships pure HTML unless you need interactivity
  • Island architecture - Hydrate only the components that need it
  • Framework agnostic - Use React, Vue, Svelte, or vanilla JS
  • Content-focused - Built-in support for Markdown and MDX

Getting Started

Create a new Astro project with a single command:

npm create astro@latest my-portfolio

Project Structure

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

Creating Your First Page

Astro pages are simple .astro files:

---
// Component Script (JavaScript)
const title = "Hello, World!";
---

<!-- Component Template (HTML + JSX-like expressions) -->
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

Content Collections

Astro’s content collections make managing blog posts easy:

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
  }),
});

export const collections = { blog };

Conclusion

Astro is perfect for content-focused websites like portfolios and blogs. Its performance-first approach and excellent developer experience make it a joy to use.

Give it a try for your next project!