Contenido Educativo de la Comunidad

¡Hay mucho más por ahí que puede ayudarte a aprender y construir con Astro! Aquí tienes algo de contenido educativo producido y mantenido por la comunidad de Astro.

Todos los enlaces son externos y pueden estar basados en versiones anteriores de Astro. Asegúrate de verificar la fecha de cualquier contenido de la comunidad y adapta tu proyecto en consecuencia.

Para más contenido educativo de Astro, echa un vistazo al Blog de Astro o suscríbete al boletín oficial de Astro donde resumimos el mejor contenido de la comunidad de cada mes.

Cursos y tutoriales

Sección titulada Cursos y tutoriales

Los cursos y tutoriales se centran en enseñarte nuevos conceptos, a menudo con ejercicios o proyectos de ejemplo para construir. Estos son una gran manera de aprender nuevos conceptos y darte las herramientas que necesitas para trabajar en tu propio proyecto de Astro.

Checa los siguientes cursos y tutoriales para aprender más sobre Astro.

Tutoriales introductorios

Sección titulada Tutoriales introductorios

• Curso acelerado del framework web Astro por freeCodeCamp
• Curso acelerado de Astro en 20 minutos por Chris Pennington (curso completo de pago: Aprende Astro)
• Curso acelerado de Astro 3.0 por James Q Quick (curso completo de pago: Construye sitios web modernos con Astro)
• Curso acelerado de Astro en 60 minutos por @developedbyed
• Entendiendo Astro (ebook) por Ohans Emmanuel
• El valle del código - Astro por Flavio Copes
• Aprende Astro 3 desde cero: Curso para principiantes + Aplicación Astro (ESPAÑOL) por @midudev

Video tutoriales

Sección titulada Video tutoriales

• Curso de inicio rápido de Astro: Construye un blog SSR
• Cómo creé una aplicación de películas con Astro 3.x
• Es posible que REALMENTE no entiendas las colecciones de contenido…
• Construye una plataforma de blog personalizada con Astro y Appwrite
• Curso acelerado de Portfolio con Astro
• Construye un blog full stack con Astro
• (ES) Curso de Astro, Generador de Sitios Web Estáticos

Recetas y guías

Sección titulada Recetas y guías

Ve ejemplos guiados de cómo añadir funcionalidades a tu proyecto de Astro.

Official Recipes

Sección titulada Official Recipes

Las recetas oficiales de Astro son guías cortas y enfocadas que guían al lector a través de la realización de un ejemplo de trabajo de una tarea específica. ¡Las recetas son una excelente manera de añadir nuevas características o comportamientos a tu proyecto de Astro siguiendo instrucciones paso a paso!

• Instalando un plugin de Vite o Rollup

  Aprende como puedes importar datos en YAML añadiendo un plugin de Rollup en tu proyecto.

• Analyze Bundle Size

  Learn how to analyze the bundle generated by Astro using `rollup-plugin-visualizer`.

• Construye un componente de imagen personalizado

  Aprende a construir un componente de imagen personalizado que admita media queries utilizando la función getImage.

• Construye formularios con rutas API

  Aprende como usar JavaScript para enviar formularios a una ruta API.

• Construye formularios HTML en páginas de Astro

  Aprende como construir formularios HTML y manejar envíos en tu frontmatter.

• Usa Bun con Astro

  Aprende cómo usar Bun con tu sitio de Astro.

• Llama endpoints desde el servidor

  Aprende como llamar endpoints desde el servidor en Astro.

• Verificar un Captcha

  Aprende como crear una ruta de API y consultarla desde el cliente.

• Construye tu sitio de Astro con Docker

  Aprende cómo construir tu sitio de Astro utilizando Docker.

• Importa imágenes dinámicamente

  Aprende a importar imágenes dinámicamente usando la función import.meta.glob de Vite.

• Agregar iconos a los enlaces externos

  Aprende cómo instalar un plugin de rehype para agregar iconos a los enlaces externos en tus archivos Markdown.

• Agrega características i18n

  Utiliza enrutamiento dinámico y colecciones de contenido para agregar soporte de internacionalización a tu sitio de Astro.

• Crear aplicaciones de barra de herramientas para desarrollo

  Aprende como crear una aplicación de barra de herramientas para desarrollo para tu sitio

• Agrega la hora de última modificación

  Crea un plugin de remark para agregar la hora de última modificación a tu Markdown y MDX

• Agregar tiempo de lectura

  Construye un plugin de remark para añadir tiempo de lectura a tus archivos Markdown o MDX.

• Comparte el estado entre Islas

  Aprende a compartir estado entre componentes de framework con Nano Stores.

• Comparte el estado entre componentes de Astro

  Aprende como compartir el estado entre componentes de Astro con Nano Stores.

• Utilizando transmisión para mejorar el rendimiento de la página

  Aprende cómo utilizar la transmisión para mejorar el rendimiento de la página.

• Estilo de Markdown renderizado con Tailwind Typography

  Aprende a usar @tailwind/typography para dar estilo a tu Markdown renderizado.

¡Añade la tuya!

¿Has publicado una receta o guía para trabajar con Astro? ¡Edita esta página y añade abajo tu enlace en la sección correspondiente!

CSS

Sección titulada CSS

• Usa UnoCSS en Astro
• Agrega modo oscuro a Astro con Tailwind CSS)
• Usa Bootstrap con Astro

Autentificación

Sección titulada Autentificación

• Agrega Github OAuth con Lucia
• Agrega autentificación con usuario y contraseña con Lucia
• Autenticación de usuario en Astro con Clerk y React

RSS

Sección titulada RSS

• Usa un nombre de archivo dinámico al importar imágenes
• Agrega un feed RSS a tu sitio Astro usando historias de Storyblok
• ¿Cómo enviar cualquier dato en tu feed RSS? Una guía con Astro + RSS
• Agregando Contenido de RSS y Corrigiendo Rutas de Imágenes en Markdown en Astro

Animación

Sección titulada Animación

• Usando GreenSock Animation Platform (GSAP) en Astro
• Usando GreenSock Animation Platform (GSAP) en Astro con View Transitions
• Usando Animate On Scroll (AOS) en Astro: Una guía paso a paso

Imágenes

Sección titulada Imágenes

• Agrega imágenes de publicaciones de blog a tu feed RSS de Astro
• Genera imágenes de Open Graph para un blog de Astro

Herramientas de Editor

Sección titulada Herramientas de Editor

• Consigue que VSCode, ESLint y Prettier funcionen con Astro
• Integra Prettier con Astro y Tailwind CSS

Markdown

Sección titulada Markdown

• Construye una tabla de contenido desde los encabezados de Markdown en Astro
• Crea un plugin de Remark para eliminar runts de tus archivos Markdown
• Configura páginas de borrador de manera efectiva en Astro con autoría de contenido impulsada por configuración

Rendimiento

Sección titulada Rendimiento

• Mejora los tiempos de compilación de Astro: modifica los archivos HTML después de la compilación
• Configurando micro-frontends con Astro
• Cómo implementar la regeneración estática incremental (ISR) en Astro

Utilidades

Sección titulada Utilidades

• Usando tRPC en Astro
• Integrando Sentry con Astro
• Genera sitemaps localizados para tu proyecto Astro y Storyblok
• Agrega un sistema de búqueda a tu sitio con Pagefind
• Agrega un sistema de búsqueda a tu sitio con Fuse.js
• Agrega una sección de comentarios a tu blog de Astro usando Giscus
• Creando un component de paginación con Astro

Internacionalización y localización

Sección titulada Internacionalización y localización

• Como hacer hacer tu sitio web Astro multilingüe con Crowdin: guía de localización de Astro
• Traduce las rutas en Astro para colecciones de contenido y subpáginas

Astro DB

Sección titulada Astro DB

• Creando un libro de visitas con Astro DB
• Como crear un contador de visitas con Astro DB