Skip to content
Codeloom

Topics / Astro

Astro

Content-driven sites with zero JS by default. Islands and content collections.

Browse 22 tutorials → Other topics

Why learn Astro?

  • Ships zero JavaScript by default — pages are fast.

  • Use any framework (React, Vue, Svelte) as an island when you need interactivity.

  • Perfect for blogs, docs, marketing sites, and content-heavy apps.

  • Built-in MDX, image optimization, and content collections.

What you can build with Astro

Blogs and documentation sites Marketing and landing pages Content-heavy portfolios Multi-framework sites

Astro tutorials

22 articles · page 1 of 2

Hand-written tutorials, ordered as a recommended learning path.

  1. 01 What Is Astro? A clear introduction to Astro — what it is, why zero JavaScript by default matters, how content collections and islands work, and the kinds of sites Astro is the right tool for.
  2. 02 Install & First Page A practical walkthrough for scaffolding an Astro 5 project — installing Node.js, running npm create astro, understanding the file layout, writing your first .astro page, and producing a production build.
  3. 03 Components & Layouts A practical guide to Astro components and layouts — frontmatter, typed props, slots, named slots, and the BaseLayout pattern every Astro project converges on for shared shell HTML.
  4. 04 Content Collections A practical guide to Astro content collections — defining a zod schema in src/content/config.ts, using the glob loader, fetching entries with getCollection, and building a dynamic [...slug].astro route.
  5. 05 Authentication Implement authentication in Astro: cookie-based sessions, JWT tokens, OAuth flows, protected routes with middleware, and patterns for both SSR and hybrid modes.
  6. 06 Collections Advanced Go beyond basic content collections: schema references between collections, computed fields, custom loaders, advanced querying patterns, and full type safety across your Astro project.
  7. 07 Deployment A practical guide to deploying Astro projects across major platforms: adapter configuration, environment variables, build settings, and platform-specific gotchas.
  8. 08 Integrations How Astro integrations work under the hood: using official integrations, configuring MDX and Tailwind, and building your own custom integration with lifecycle hooks.
  9. 09 Middleware + Endpoints Combine Astro middleware with server endpoints to build request pipelines: auth gates, rate limiting, CORS handling, and JSON APIs that share context through Astro.locals.
  10. 10 Islands Patterns Advanced island patterns in Astro: when to hydrate, how to share state between islands, mixing frameworks, lazy loading strategies, and mistakes that kill performance.
  11. 11 SEO & Performance A practical guide to Astro SEO: meta tags, Open Graph, structured data, sitemaps, canonical URLs, and Core Web Vitals optimization techniques.
  12. 12 View Transitions Deep Deep dive into Astro View Transitions: custom animations, transition groups, lifecycle events, fallback behavior, and production patterns for smooth page navigation.
  13. 13 Next.js vs Astro vs Remix Compare Next.js, Astro, and Remix on rendering, performance, and developer experience. Find the best meta-framework for your 2026 web project.
  14. 14 Collections Build a typed blog with Astro content collections, including Zod schemas, references, and dynamic routes generated from Markdown files.
  15. 15 Astro Images Master Astro's built-in Image and Picture components to ship responsive, lazy-loaded, modern-format images without external services.
  16. 16 Integrations Understand the difference between Astro integrations and adapters, when to reach for each, and how they shape your deployment pipeline.
  17. 17 Islands Learn how Astro ships zero JavaScript by default and only hydrates the interactive components you mark as islands.
  18. 18 Middleware Use Astro middleware to run code on every request: auth gates, locals injection, redirects, and response headers. Learn the onRequest signature, the next() flow, sequencing, and common production patterns.
  19. 19 Pagefind Search Add fast, static, client-side search to an Astro site using Pagefind. Learn how the index is built, how to wire up the UI, how to scope and weight content, and pitfalls around build order and large sites.
  20. 20 Server Endpoints Build JSON APIs and dynamic responses directly in Astro using server endpoints. Learn the file conventions, request and response shapes, dynamic params, and how to mix endpoints with static and SSR pages.