Community Content

There’s lots more content out there that can help you learn and build with Astro! Here is some content produced and maintained by the Astro community. All links are external and we don’t guarantee anything here…

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.

Courses and Tutorials

Introductory Courses

Section titled Introductory Courses

• Learn Astro
• Build Modern Websites with Astro

Video Tutorials

Section titled Video Tutorials

• Astro Crash Course in 20 minutes!
• How I created a movie application with Astro 3.x

Recipes and Guides

Section titled Recipes and Guides

See guided examples of adding features to your Astro project, submitted by our community members!

Recipes are typically 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!

Other guides might explain concepts related to an area of content, such as using images or working with MDX.

Explore community-produced recipes maintained by Astro users:

CSS

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

Authentication

• Add Github OAuth with Lucia
• Add username and password authentication with Lucia

RSS

• Add an RSS feed to Astro using Storyblok’s stories
• How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS
• Add blog post images to your Astro RSS Feed

Images

• Use a dynamic filename when importing images

Editor Tooling

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

Animation

• Add animated page transitions with Swup

Markdown

• Build a table of contents from Astro’s Markdown headings
• Create a Remark plugin to remove runts from your Markdown files

Performance

• Enhance your Astro builds: modify HTML files post-build
• Setting up micro-frontends with Astro

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

Internationalizaton and Localization

• How to make your Astro website multilingual with Crowdin: Astro localization guide

CSS

Section titled CSS

Use UnoCSS in Astro Guide to installing and configuring the UnoCSS Astro integration

Add dark mode to Astro with Tailwind CSS Implement dark mode in an accessible way with Tailwind and Preact

Authentication

Section titled Authentication

Add Github OAuth with Lucia

Add username and password authentication with Lucia

RSS

Section titled RSS

Add an RSS feed to Astro using Storyblok's stories

How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS

Add blog post images to your Astro RSS Feed

Images

Section titled Images

Use a dynamic filename when importing images

Add blog post images to your Astro RSS Feed

Editor Tooling

Section titled Editor Tooling

Get VSCode, ESLint & Prettier working with Astro

Integrate Prettier with Astro and Tailwind CSS

Animation

Section titled Animation

Add animated page transitions with Swup

Your recipe here!

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

Utilities

Section titled Utilities

Using tRPC in Astro

Seamless Error Tracking: 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

Performance

Section titled Performance

Enhance your Astro builds: modify HTML files post-build

Setting up micro-frontends with Astro

Internationalization and Localization

Section titled Internationalization and Localization

How to make your Astro website multilingual with Crowdin: Astro localization guide

Your recipe here!

CSS

Section titled CSS

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

Authentication

Section titled Authentication

• Add Github OAuth with Lucia
• Add username and password authentication with Lucia

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

Images

Section titled Images

• Add blog post images to your Astro RSS Feed

Editor Tooling

Section titled Editor Tooling

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

Animation

Section titled Animation

• Add animated page transitions with Swup

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

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

Internationalization and Localization

Section titled Internationalization and Localization

• How to make your Astro website multilingual with Crowdin: Astro localization guide