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.

• バンドルサイズを分析する

  `rollup-plugin-visualizer`を使用してAstroが生成するバンドルを分析する方法を学びます。

• カスタム画像コンポーネントを作成する

  getImage関数を使って、メディアクエリ対応のカスタム画像コンポーネントを作成する方法を学びます。

• APIルートでフォームを構築する

  JavaScriptを使ってフォーム送信をAPIルートへ送る方法を学びます。

• AstroページでHTMLフォームを構築する

  フロントマターで送信を処理しながら、HTMLフォームを構築する方法を学びます。

• AstroでBunを使う

  AstroサイトでのBunの使い方を紹介します。

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

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

• Build your Astro site with Docker

  Learn how to build your Astro site using Docker.

• Verify a Captcha

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

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

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

• 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

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