Rutas y páginas en Astro

Aprende cómo Astro convierte archivos en rutas para construir arquitectura web ordenada.

En Astro, el sistema de rutas nace de la estructura de archivos en src/pages.

Esto simplifica la navegación y ayuda a que cualquier persona del equipo entienda el proyecto rápido.

También podrás crear rutas dinámicas para contenidos como blog, docs o fichas de producto.

Si dominas rutas desde el principio, escalar el sitio es mucho más fácil.

  • Archivo = ruta. Simple y potente.
  • src/pages/index.astro genera la raíz del sitio.
  • src/pages/contacto.astro genera /contacto.
  • Puedes agrupar secciones con carpetas para mantener orden semántico.
  • Ideal para páginas generadas desde datos.

File-based routing

Archivo = ruta. Simple y potente.

src/pages/index.astro genera la raíz del sitio.

src/pages/contacto.astro genera /contacto.

Puedes agrupar secciones con carpetas para mantener orden semántico.

Rutas dinámicas con [slug]

Ideal para páginas generadas desde datos.

  • Usa nombres entre corchetes para parámetros.
  • Combina con contenido markdown o API propia.
  • Mantén slugs limpios y consistentes para SEO.
Astro
03

Rutas y páginas en Astro

Aprende cómo Astro convierte archivos en rutas para construir arquitectura web ordenada.

Código del tema: Componentes Astro + render hibrido

📘 Teoría

File-based routing

Archivo = ruta. Simple y potente.

1

src/pages/index.astro genera la raíz del sitio.

2

src/pages/contacto.astro genera /contacto.

3

Puedes agrupar secciones con carpetas para mantener orden semántico.

Rutas dinámicas con [slug]

Ideal para páginas generadas desde datos.

  • Usa nombres entre corchetes para parámetros.
  • Combina con contenido markdown o API propia.
  • Mantén slugs limpios y consistentes para SEO.

🧪 Aprende probando

Ejemplo Mapa básico de navegación HTML simple para visualizar estructura de páginas.

🏁 Retos

Reto Reto: crear ruta dinámica Define la ruta para artículos de blog por slug.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com