Getting Started with Astro 5: A Complete Guide

Astro has revolutionized how we build websites by putting content first and shipping less JavaScript. In this guide, we’ll explore Astro 5’s new features and build a complete blog from scratch.

Why Astro?

Astro is a modern static site builder that helps you build faster websites with less client-side JavaScript. Here’s what makes it special:

• Zero JavaScript by default - Only ship JS when you need it
• Island Architecture - Interactive components where you need them
• Framework Agnostic - Use React, Vue, Svelte, or plain HTML
• Content Collections - Type-safe content management
• Hybrid Rendering - Mix static and dynamic content

Setting Up Your Project

Let’s create a new Astro project:

npm create astro@latest my-blog
cd my-blog
npm install

Installing Dependencies

For our blog, we’ll need a few integrations:

npm install @astrojs/tailwind tailwindcss
npm install @astrojs/mdx
npm install @astrojs/sitemap

Project Structure

Here’s how we’ll organize our files:

src/
├── components/
│   ├── Header.astro
│   ├── Footer.astro
│   └── PostCard.astro
├── layouts/
│   ├── BaseLayout.astro
│   └── BlogLayout.astro
├── pages/
│   ├── index.astro
│   └── blog/
│       ├── index.astro
│       └── [slug].astro
├── content/
│   └── blog/
└── styles/
    └── global.css

Content Collections

Astro 5 introduces powerful content collections for type-safe content management:

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

const blogCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      author: z.string(),
      pubDate: z.date(),
      tags: z.array(z.string()),
      draft: z.boolean().default(false),
    }),
});

export const collections = {
  blog: blogCollection,
};

Creating Your First Post

Create a new markdown file in src/content/blog/:

---
title: "My First Post"
description: "Welcome to my new blog!"
author: "hacksubset"
pubDate: 2026-02-15
tags:
  - welcome
  - introduction
---

# Welcome!

This is my first blog post using Astro 5.

Hybrid Rendering

Astro 5’s hybrid rendering allows you to mix static and dynamic content:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  adapter: cloudflare({ mode: 'advanced' }),
  output: 'hybrid',
});

Conclusion

Astro 5 makes it easier than ever to build fast, content-focused websites. With its island architecture, content collections, and hybrid rendering, you have all the tools you need for modern web development.

Stay tuned for more posts about Astro, web development, and best practices!