_Index

Astro Installation and Setup — Complete Beginner's Guide

Learn how to install Astro, set up a new project, configure the dev server, and understand the initial file structure step by step.

Astro Project Structure — Complete Guide

Learn the Astro project structure including src/, public/, config files, and how each directory contributes to your site.

Astro Islands Architecture -- Complete Guide

Learn Astro islands architecture -- ship zero JavaScript by default, selectively hydrate interactive components, and achieve fast page loads with partial.

Astro Pages — Creating Routes and Content

Learn how to create Astro pages using .astro and .md files, add frontmatter, include components, and manage SEO meta tags.

Astro Content Collections -- Complete Guide

Learn Astro content collections -- manage markdown and MDX files with type-safe frontmatter schemas, query content efficiently, and build blog or documentation.

Astro Layouts — Reusable Page Structure

Learn how to create Astro layouts with slots, pass props, nest layouts, and compose reusable page shells across your site.

Astro Integrations -- Framework Guide

Learn Astro integrations -- add React, Vue, Svelte, or Solid components to Astro pages, configure Tailwind CSS, and extend builds with official adapters.

Astro Components — Building Reusable UI

Learn how to create Astro components with props, slots, HTML templates, and server-side logic for reusable UI across your site.

Astro View Transitions -- Smooth Navigation Guide

Learn Astro view transitions for smooth page navigation without full browser reloads, using the ViewTransitions component and custom animations for rich UX.

Astro Islands Architecture — Client-Side Interactivity

Learn Astro's islands architecture: hydrate only interactive components on the client while serving static HTML for the rest of the page.

Astro Client Directives — Hydration Control

Learn Astro client directives: client:load, client:idle, client:visible, client:media, client:only and how to control when islands hydrate.

Astro MDX — Markdown with Interactive Components

Learn how to use MDX in Astro: embed React, Vue, or Svelte components inside Markdown content with type-safe frontmatter.

Astro Content Collections — Type-Safe Content Management

Learn Astro content collections: define collections, validate frontmatter with Zod, query Markdown and MDX content with type safety.

Astro Collection Schemas — Advanced Validation with Zod

Learn advanced Astro content collection schemas: Zod validation, image references, nested objects, custom types, and schema reference patterns.

Astro Dynamic Routes — Parameters and Static Generation

Learn Astro dynamic routes: define parameters with brackets, generate static paths, use catch-all routes, and pass data to page components.

Astro SSR Modes — Static, Server, and Hybrid Rendering

Learn Astro SSR modes: static generation, server-side rendering, hybrid mode, and how to choose the right rendering strategy for each page.

Astro API Endpoints — Server-Side JSON and Form Handling

Learn Astro API endpoints: create server-side routes that return JSON, handle POST requests, manage form submissions, and build RESTful APIs.

Astro Middleware — Request Interception and Transformation

Learn Astro middleware: intercept requests, add headers, authenticate users, redirect, and modify responses for server-rendered pages.

Astro DB — Integrated Database for Astro Projects

Learn Astro DB: set up a database, define tables with schemas, query and mutate data, and integrate with SSR pages and API endpoints.

Astro Images — Automatic Image Optimization

Learn Astro image optimization: use the Image component, optimize remote images, generate responsive srcsets, and lazy load for performance.

Astro Fonts — Managing Typography and Font Optimization

Learn Astro font management: add Google Fonts, self-host fonts, optimize font loading, and implement font-display strategies.

Astro Styling — CSS Strategies and Scoped Styles

Learn Astro styling: scoped CSS, global styles, Tailwind CSS integration, CSS modules, and best practices for styling Astro components.

Astro Integrations — Official and Community Plugins

Learn Astro integrations: add React, Vue, Svelte, Tailwind, sitemap, and community plugins to extend your Astro project.

Astro Sitemap and RSS — SEO Feeds Generation

Learn Astro sitemap and RSS generation: configure sitemap.xml, create RSS feeds for blogs, and optimize for search engine discovery.

Astro View Transitions — Smooth Page Navigation

Learn Astro view transitions: enable smooth page animations, configure transition types, customize animations, and improve perceived performance.

Astro i18n — Internationalization and Multi-Language Sites

Learn Astro i18n: configure multi-language support, translate routes, manage locale-specific content, and implement language switching.

Astro Deployment — Deploy to Production Hosting

Learn Astro deployment: deploy to Netlify, Vercel, Cloudflare Pages, or Node.js servers with SSR adapters and CI/CD pipelines.

Astro Testing — Component and Page Testing

Learn Astro testing: write unit tests for components, integration tests for pages, use Vitest, and test SSR endpoints.

Astro Final Project — Build a Complete Production Site

Build a complete production-ready Astro site with content collections, dynamic routes, SSR, API endpoints, view transitions, and deployment.