More Recipes

See guided examples of adding features to your Astro project.

Official Recipes

• Share State Between Islands

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

• RSS 피드 추가하기

  사용자가 콘텐츠를 구독할 수 있도록 Astro 사이트에 RSS 피드를 추가하기.

• 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

• Astro에서 Bun 사용하기

  Astro로 만든 사이트에서 Bun을 사용하는 방법을 배워보세요.

• 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.

• 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 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

Community Resources

Add your own here! See our recipes contributing guide for more info.

• Use a dynamic filename when importing images
• Add animated page transitions with Swup
• Use UnoCSS in Astro
• Build a table of contents from Astro’s Markdown headings
• Create a Remark plugin to remove runts from your Markdown files
• Add searching to your site with Pagefind
• Add searching to your site with Fuse.js
• Get VSCode, ESLint & Prettier working with Astro
• Enhance your Astro builds: modify HTML files post-build
• Add dark mode to Astro with Tailwind CSS
• Generate localized sitemaps for your Astro and Storyblok project
• Integrate Prettier with Astro and Tailwind CSS
• Add an RSS feed to Astro using Storyblok’s stories
• Using tRPC in Astro
• How to make your Astro website multilingual with Crowdin: Astro localization guide
• Add blog post images to your Astro RSS Feed
• Setting up micro-frontends with Astro
• Add username and password authentication with Lucia
• Add Github OAuth with Lucia
• Integrating Sentry with Astro
• Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring
• How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS