Aprende Astro desde cero
Del SSG al SSR: tu guía completa para dominar Astro con buenas prácticas
Aprende Astro desde cero 🚀
¿Quieres crear sitios web ultra rápidos, modernos y optimizados sin complicarte?
Este curso es para ti.
Enlaces a las lecciones del video tutorial
01 Conceptos
En esta lección veremos los conceptos básicos de Astro: SSG, SSR, Islands e integración con frameworks.
02 Presentamos el proyecto de ejemplo
Presentamos el ejemplo del tutorial: un mini campus online con cursos, lecciones y video.
03 Creando un proyecto Astro desde cero
Creamos el proyecto Astro desde cero: setup inicial, Prettier, Tailwind y alias para imports.
04 Definiendo el layout
Creamos un layout base en Astro con , cabecera reutilizable y título personalizable por props.
05 Setup Content Island (HCMS)
Integramos Content Island (HCMS) en Astro para gestionar cursos y lecciones vía API de forma flexible y escala
06 Listado de cursos (versión básica)
Mostramos un listado básico de cursos desde Content Island usando Astro y TypeScript.
07 Listado de cursos (diseño, tailwind)
Mejoramos el listado de cursos con diseño: tarjetas con Tailwind, lecciones completas y enlaces a la primera l
08 Detalle de un curso (versión básica)
Creamos páginas dinámicas para cada lección usando rutas [trainingSlug]/[lessonSlug] y mostramos su contenido
09 Detalle de un curso (diseño, tailwind)
Diseñamos la página de lección: video, listado de lecciones y contenido, todo con componentes y estilos
10 Mostrando Markdown
Procesamos el contenido Markdown de las lecciones con marked, añadimos syntax highlighting con highlight.js
11 Client Router
Activamos la navegación fluida en Astro con para transiciones suaves sin recarga de página.
12 Integrando React
Integramos React en Astro con @astrojs/react y usamos client:load para ejecutarlo en el navegador
13 Server Actions
Creamos Server Actions en Astro para manejar likes desde el servidor (con Node), conectándolos a un componente
14 Server Islands
🧠 ¿Qué aprenderás?
- Cómo crear y configurar un proyecto con Astro desde cero
- Uso de layouts reutilizables y organización por componentes
- Estilizar tu proyecto con Tailwind CSS
- Cargar contenido dinámico usando Markdown
- Integrar un Headless CMS (Content Island)
- Crear rutas dinámicas con
getStaticPaths - Implementar navegación fluida tipo SPA con transiciones suaves
- Añadir componentes React dentro de Astro
- Usar Server Actions para lógica del lado del servidor
- Implementar Server Islands y streaming de HTML para mejorar el rendimiento
🛠 Tecnologías que usarás
- Astro
- Tailwind CSS
- Markdown
- React
- Content Island (HCMS)
- Node.js / SSR
🎯 Requisitos
- Conocimientos básicos de HTML, CSS y JavaScript
- Ganas de aprender una forma moderna de construir sitios web
💡 Ideal para...
- Desarrolladores frontend que quieran salir del ecosistema SPA
- Quienes buscan velocidad, simplicidad y buena performance
- Personas interesadas en SSG, SSR o contenido dinámico bien estructurado