Astro recipes

See guided examples of adding features to your Astro project.

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.

• Analise o tamanho dos pacotes

  Aprenda como analisar os pacotes gerados por Astro usando `rollup-plugin-visualizer`.

• Construa um componente de imagem personalizado

  Aprenda a construir um componente de imagem personalizado que suporta media queries usando a função getImage.

• Build HTML forms in Astro pages

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

• Build forms with API routes

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

• Use Bun com Astro

  Aprenda como usar Bun com seu site Astro.

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

• Verifique um Captcha

  Aprenda como criar uma rota de API e buscá-la do cliente.

• Customize file names in the build output

  Learn how to change the default naming pattern for your built assets like JavaScript, CSS, and images in Astro using Vite's Rollup options.

• Construa seu site Astro com Docker

  Aprenda como construir seu site Astro usando Docker.

• Importe imagens dinamicamente

  Aprenda como importar imagens dinamicamente usando a função import.meta.glob do Vite.

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

• Crie um aplicativo da barra de ferramentas de desenvolvimento

  Aprenda a criar um aplicativo da barra de ferramentas de desenvolvimento para seu 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.

• Add an RSS feed

  Add an RSS feed to your Astro site to let users subscribe to your content.

• Share state between Astro components

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

• Share state between islands

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

• Usando streaming para melhorar o desempenho da página

  Aprenda a usar streaming para melhorar o desempenho da página.

• Style rendered Markdown with Tailwind Typography

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

Community Resources

Find more recipes written and submitted by the community at Astro Tips.