Las páginas del Blog: /src/pages/blog/

*/blog u otras subcarpetas. Supondremos que la colección está en la carpeta blog para la explicación.

Astro utiliza un sistema de Enrutamiento basado en archivos (File-based routing). Esto significa que la estructura de carpetas dentro de src/pages/ determina directamente las URLs del sitio web. Este mismo sistema, lo aplica a las colecciones de contenido. Primero, comprendamos lo que hace el motor de Astro internamente:

1. Lectura de las páginas de la colección: getCollection('posts')

Para generar las páginas de un blog, Astro entra a la carpeta src/content/blog/, lee todos los archivos .md o .mdx y los convierte en un arreglo de objetos JavaScript con sus datos de Frontmatter (título, fecha, etc.) y su contenido bruto.

2. La generación de URLs: getStaticPaths()

Si por ejemplo, se tienen 3 archivos Markdown en src/content/blog/:

  • gato-bombay.md
  • gato-azul-ruso.md
  • gato-europeo.md

En la plantilla [id].astro, Astro ejecuta la función getStaticPaths() para crear tantas URLs (en el caso del ejemplo, 3) como haya, en la web final:

  • /blog/gato-bombay/
  • /blog/gato-azul-ruso/
  • /blog/gato-europeo/

3. El renderizado de los posts: await render(post)

En este paso ocurre la conversión real:

  1. Astro toma el texto plano en sintaxis Markdown de cada archivo concreto
    (por ejemplo, # Hola o **negrita**).
  2. Lo transforma en código HTML puro (<h1>Hola</h1>, <strong>negrita</strong>).
  3. Y entrega ese HTML empaquetado dentro de un componente especial llamado <Content/>.

3. El empaquetado final dentro del Layout

La etiqueta <Content/> se coloca dentro de tu plantilla visual ([id].astro), que a su vez está envuelta por tu Layout.

Las páginas principales del Blog

Dentro de la subcarpeta /src/pages/blog/ convive un trío fundamental de archivos que permite gestionar tanto vistas estáticas como rutas dinámicas: index.astro, [id].astro (antes [slug].astro) y [page].astro.

  • index.astro: La portada del blog

    Es la página principal del blog. Se encarga de consultar todos los archivos Markdown de la colección blog, ordenarlos (generalmente por fecha, de más reciente a más antiguo) y listarlos. Se puedes ser tan creativo como se desee en la portada del blog. Se puede mostrar el último post en grande y los tres anteriores a este más pequeños... hacer una introducción al mismo, etc.. Su url es https://tusitio.com/blog/

    → Código de referencia: index.astro


  • [id].astro: La Entrada Individual

    Los corchetes [id] le indican a Astro que el nombre de la URL cambiará según cada artículo. Un solo archivo .astro genera automáticamente cientos de páginas individuales HTML en tiempo de compilación.(pnpm build)

    → Código de referencia: [id].astro


  • [page].astro: Paginación de Entradas

    Permite dividir la lista de posts en varias páginas ordenadas usando la función paginate() de Astro.

    → Código de referencia: [page].astro


Otras rutas dinámicas

Adicionalmente, Astro, permite otras rutas Dinámicas: [tag].astro y [category].astro suponiendo que estos campos estén definidos. El propósito de estas páginas es crear vistas filtradas de todos los posts de una colección. Por ejemplo, si un usuario hace clic en el tag #astro, la página [tag].astro busca en el Frontmatter de todos los .md y lista únicamente los artículos que contengan ese tag en su arreglo tags: [...].

Ejemplo de un archivo [tag].astro

Siguiendo esta misma lógica, se puede generar el archivo [category].astro

Estructura de carpetas recomendada


   src/pages/blog/
   ├── index.astro          ← URL: /blog (El listado principal)
   ├── [id].astro           ← URL: /blog/mi-post (Entrada individual)
   ├── [page].astro         ←  URL: /blog/2 (Paginación)
   ├── tags/
   │   └── [tag].astro      ← URL: /blog/tags/astro (Filtrado por etiquetas)
   └── category/
       └── [category].astro ← URL: /blog/category/desarrollo (Filtrado por categorías)