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.

Ejemplo de estructura
src/pages/index.astro
src/pages/blog/index.astro
src/pages/blog/[slug].astro

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

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .