Community Educational Content

There is so much more out there that can help you learn and build with Astro! Here is some educational content produced and maintained by the Astro community.

All links are external, and may be based on earlier versions of Astro. Be sure to check the date on any community content, and adapt to your project accordingly.

For more Astro educational content, check out the Astro Blog or sign up for the official Astro newsletter where we recap the best community content of each month.

Courses and Tutorials

Section titled Courses and Tutorials Courses and tutorials are focused on teaching you new concepts, often with exercises or sample projects to build. These are a great way to learn new concepts and give you the tools you need for working on your own Astro project.

Check out the following courses and tutorials to learn more about Astro.

Introductory Tutorials

Section titled Introductory Tutorials

• Astro Web Framework Crash Course by freeCodeCamp
• Astro Crash Course in 20 minutes by Chris Pennington (full paid course: Learn Astro)
• Astro 3.0 Crash Course by James Q Quick (full paid course: Build Modern Websites with Astro)
• Astro Crash Course in 60 minutes by @developedbyed
• Understanding Astro (ebook) by Ohans Emmanuel
• The Valley of Code - Astro by Flavio Copes
• Learn Astro 3 from Scratch: Course for Beginners + Astro Application (SPANISH) by @midudev
• Introduction to the Astro web framework (paid) by Tech Razor on Udemy

Video Tutorials

Section titled Video Tutorials

• Astro Quick Start Course: Build an SSR Blog
• How I created a movie application with Astro 3.x
• You may not ACTUALLY understand Content Collections…
• Build a custom blog platform with Astro and Appwrite
• Astro JS Portfolio Crash Course
• Build a full stack blog with Astro
• (ES) Curso de Astro, Generador de Sitios Web Estáticos

Recipes and Guides

Section titled Recipes and Guides See guided examples of adding features to your Astro project.

Official Recipes

Section titled Official Recipes Astro’s official recipes are short, focused how-to guides that walk a reader through completing a working example of a specific task. Recipes are a great way to add new features or behavior to your Astro project by following step-by-step instructions!

• Installing a Vite or Rollup plugin

Learn how you can import YAML data by adding a Rollup plugin to your project.

• Build a custom image component

Learn how to build a custom image component that supports media queries using the getImage function.

• Build forms with API routes

Learn how to use JavaScript to send form submissions to an API Route.

• Build HTML forms in Astro pages

Learn how to build HTML forms and handle submissions in your frontmatter.

• Use Bun with Astro

Learn how to use Bun with your Astro site.

• Call endpoints from the server

Learn how to call endpoints from the server in Astro.

• Verify a Captcha

Learn how to create an API route and fetch it from the client.

• Build your Astro Site with Docker

Learn how to build your Astro site using Docker.

• Dynamically import images

Learn how to dynamically import images using Vite’s import.meta.glob function.

• Add icons to external links

Learn how to install a rehype plugin to add icons to external links in your Markdown files.

• Add i18n features

Use dynamic routing and content collections to add internationalization support to your Astro site.

• Create a dev toolbar app

Learn how to create a dev toolbar app for your site.

• Add last modified time

Build a remark plugin to add the last modified time to your Markdown and MDX.

• Add reading time

Build a remark plugin to add reading time to your Markdown or MDX files.

• Share state between Islands

Learn how to share state across framework components with Nano Stores.

• Share state between Astro Components

Learn how to share state across Astro components with Nano Stores.

• Using streaming to improve page performance

Learn how to use streaming to improve page performance.

• Style rendered Markdown with Tailwind Typography

Learn how to use @tailwind/typography to style your rendered Markdown.

Add your own!

Have you published a recipe or guide for working with Astro? Edit this page and add your link below in the appropriate section!

CSS

Section titled CSS

• Use UnoCSS in Astro
• Add dark mode to Astro with Tailwind CSS
• Use Bootstrap with Astro

Authentication

Section titled Authentication

• Add Github OAuth with Lucia
• Add username and password authentication with Lucia
• Authenticating users in Astro with Clerk and React

RSS

Section titled RSS

• Use a dynamic filename when importing images
• Add an RSS feed to Astro using Storyblok’s stories
• How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS
• Adding RSS Feed Content and Fixing Markdown Image Paths in Astro
• Create a full-content RSS feed using MDX and the Container API

Images

Section titled Images

• Add blog post images to your Astro RSS Feed
• Generate Open Graph images for an Astro blog

Editor Tooling

Section titled Editor Tooling

• Get VSCode, ESLint & Prettier working with Astro
• Integrate Prettier with Astro and Tailwind CSS

Markdown

Section titled Markdown

• Build a table of contents from Astro’s Markdown headings
• Create a Remark plugin to remove runts from your Markdown files
• Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring

Performance

Section titled Performance

• Enhance your Astro builds: modify HTML files post-build
• Setting up micro-frontends with Astro
• How to Implement Incremental Static Regeneration (ISR) in Astro

Utilities

Section titled Utilities

• Using tRPC in Astro
• Integrating Sentry with Astro
• Generate localized sitemaps for your Astro and Storyblok project
• Add searching to your site with Pagefind
• Add searching to your site with Fuse.js
• Add a comments section to your Astro blog using Giscus
• Creating A Pagination Component With Astro

Animation

Section titled Animation

• Using GreenSock Animation Platform (GSAP) in Astro
• Using GreenSock Animation Platform (GSAP) in Astro with View Transitions
• Using Animate On Scroll (AOS) in Astro: A Step-by-Step Guide

Internationalization and Localization

Section titled Internationalization and Localization

• How to make your Astro website multilingual with Crowdin: Astro localization guide
• Translate routes in Astro for content collections and subpages

Astro DB

Section titled Astro DB

• Creating a Guestbook with Astro DB
• How to Build a Views Counter with Astro DB

Learn