Si no estamos acostumbrados a los sistemas de enrutado estático por carpetas, quizás nos resulte extraño el sistema que tiene Astro para crear páginas de nuestro sitio, ya que se basa en esa filosofía. Realmente es muy sencilla y nos proporciona una serie de ventajas y comodidad muy grande, así que vamos a aprender sus detalles.
La carpeta pages
En el interior de la carpeta src encontraremos una carpeta pages. Este es el lugar donde debemos colocar nuestras páginas para poder navegar por nuestro sitio web. Los ficheros .astro que creemos, se convertirán en páginas index.html estáticas y las rutas dependerán del nombre de la carpeta y el fichero definido.
Veamos algunos ejemplos:
- 1️⃣ La primera columna es el fichero que nosotros creamos
- 2️⃣ La segunda columna es la ruta (por ficheros) que usaríamos en un enlace
- 3️⃣ La tercera columna es la ruta (por carpetas, recomendada) que usaríamos en un enlace
Fichero en src/pages/ | Ruta por ficheros | Ruta por carpetas |
|---|---|---|
| Creando ficheros | ||
src/pages/index.astro | /index.html | / |
src/pages/about.astro | /about/index.html | /about/ |
src/pages/services.astro | /services/index.html | /services/ |
| Creando carpetas | ||
src/pages/index.astro | /index.html | / |
src/pages/about/index.astro | /about/index.html | /about/ |
src/pages/services/index.astro | /services/index.html | /services/ |
Esto es lo que se denomina rutas estáticas. Más adelante veremos las rutas dinámicas.
Puedes elegir crear ficheros o carpetas. Por ficheros suele ser más simple y directo, pero por carpetas suele ser mejor en casos con más rutas o más complejas.
Ahora, si estamos en la página del fichero src/pages/index.astro y queremos ir a la página del fichero src/pages/about.astro tendremos que colocar un enlace que nos lleve a la ruta /about/.
Todos los ficheros
.astroque tengamos en el interior de nuestra carpetasrc/pages/se convertirán en una ruta. Si quieres evitar que alguna se convierta, puedes hacer que el nombre de la carpeta o fichero empiece por_. Estos ficheros o carpetas no se convertirán a rutas.
Páginas especiales
Es posible crear una página src/pages/404.astro que generará una página 404.html que podremos utilizar como página de error personalizada cuando el usuario acceda a una ruta que no exista. Esto es compatible con la mayoría de servicios de despliegue como Netlify, Vercel, GitHub Pages o incluso, con algo de configuración, en servidores propios personalizados.
Reutilizar contenido
Sin embargo, y a pesar de que es muy fácil crear páginas independientes con los ficheros .astro colocados en las carpetas src/pages/, se recomienda seguir un patrón para reutilizar contenido, que es el de crear componentes. Vamos a profundizar en ello en el siguiente artículo.
