Jekyll: Usar Colecciones
Si ya te sientes cómodo y entusiasmado utilizando Jekyll y el sistema de _posts/, ha llegado el momento de dar el siguiente paso: conocer las colecciones.
¿Qué es una colección en Jekyll?
Si bien el sistema de _posts/ en Jekyll es perfecto para manejar entradas de blog, llega un punto en que necesitarás algo más flexible para organizar otro tipo de contenido. Aquí es donde entran las colecciones.
Una colección te permite agrupar contenido por tipo, por ejemplo proyectos, tutoriales, cursos y gestionarlo de forma separada al blog. Cada colección puede tener su propia estructura, diseño, URLs y lógica de presentación, lo que te da mucho más control sobre cómo se organiza y muestra la información en tu sitio.
¿Cuándo usar colecciones?
En Jekyll, tanto los posts como las colecciones te permiten gestionar contenido dinámico, pero están pensados para distintos propósitos. Entonces, ¿Cuál es la diferencia?. Piensa en:
- Utilizar publicaciones cuando quieras escribir artículos independiente, con fecha de publicación. Los posts viven en la carpeta
_posts/y deben llevar fecha en el nombre del archivo (2022-01-02-mi-post.md). - Utilizar colecciones cuando quieras agrupar contenido relacionado, que pueda tener su propia página, pero la fecha no es importante. Las colecciones se definen en
_config.ymly cada una vive en su propia carpeta (como_proyectos/,_tutoriales/, etc.).
A continuación, podemos ver otras características a tener en cuenta entre los posts y las colecciones:
| Característica | Posts (_posts/) | Colecciones (_nombre/) |
|---|---|---|
| 📅 Organización por fecha | Sí (orden cronológico) | Opcional (no depende de la fecha) |
| 🔁 Uso típico | Entradas de blog, noticias | Proyectos, tutoriales, cursos, documentación |
| 🗂️ Carpeta | _posts/ | _coleccion/ (ej: _proyectos/) |
| 📄 Formato del nombre del archivo | Requiere fecha (AAAA-MM-DD-titulo.md) | Sin fecha necesaria (titulo.md) |
| 🔍 Soporte para categorías y etiquetas | Sí | Sí, pero debes configurarlo manualmente |
| 🧭 Paginación automática | Sí | No (requiere configuración manual si se necesita) |
🛠️ Configuración en _config.yml | No es necesaria | Sí (debes declarar cada colección) |
| 🖼️ Plantillas personalizadas | Generalmente usa la misma para todos | Puedes usar distintas por colección |
| 🌐 URLs personalizadas | Limitado | Totalmente personalizables |
Crear un nuevo proyecto
Si aún no tienes un sitio Jekyll andando, pone en marcha un nuevo proyecto con los siguientes comandos:
1
2
3
4
5
jekyll new nombre-sitio --blank
cd nombre-sitio
bundle init
bundle add jekyll
jekyll s
Demostración rápida:
Cómo crear y usar colecciones en Jekyll
Ya que hemos creado un proyecto de Jekyll y sabemos que una colección es un grupo de documentos relacionados, pero para que podamos usar colecciones, debemos indicarle a Jekyll ciertas configuraciones para que pueda reconocerla y procesarla correctamente.
1. Configura una colección
Primero, abre el archivo _config.yml que se encuentra en la raíz del proyecto, ya que en este archivo podemos configurar una o más colecciones:
1
2
3
4
collections:
proyectos:
output: true
permalink: /:collection/:name/
output: true: Le indica a Jekyll que debe generar páginas individuales por cada documento.permalink: Configura la URL en función del nombre de la colección y del documento.- Para más detalles sobre estas opciones, revisa en la documentación oficial de Jekyll sobre colecciones.
2. Crea carpetas por cada colección
Ahora, crea una carpeta en la raíz del proyecto con el nombre de la colección, precedido por un guion bajo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
├── 📄 _config.yml
├── 📁 _data
├── 📁 _drafts
├── 📁 _includes
├── 📁 _layouts
├── 📁 _posts
├── 📁 _proyectos # 👈 Aquí crea la carpeta
├── 📁 _sass
├── 📁 _site
├── 📁 assets
├── 📄 Gemfile
├── 📄 Gemfile.lock
└── 📄 index.md
No olvides que toda colección debe comenzar con guión bajo:
_proyectos/,_recursos/, etc.
Dentro de la carpeta, crea archivos con extensión .md por ejemplo _proyectos/nombre-proyecto.md y define algunos datos en el front-matter. Por ejemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
--- title: App Móvil cliente: Fundación Innova fecha: 2022-01-02 layout: proyecto --- Desarrollamos una app móvil híbrida con Ionic para mejorar la logística de distribución. El proyecto tenía como objetivo optimizar el seguimiento de entregas en tiempo real y reducir los errores humanos en el registro de datos. La aplicación permite a los repartidores escanear códigos QR, registrar entregas, capturar firmas digitales y enviar reportes automáticos al sistema central de la fundación. ### Funcionalidades clave - Escaneo de códigos QR para identificar paquetes - Registro de entregas con geolocalización - Captura de firmas digitales - Sincronización de datos en tiempo real con una API REST - Modo offline para zonas sin cobertura ### Tecnologías utilizadas - **Ionic Framework** (Angular + Capacitor) - **Firebase** (autenticación y base de datos en tiempo real) - **Node.js** para el backend de la API - **PostgreSQL** como base de datos principal ### Resultados Gracias a esta solución, Fundación Innova logró reducir en un 40% el tiempo promedio de distribución y mejorar la trazabilidad de sus envíos, beneficiando a más de 1,500 usuarios finales en zonas rurales. ### Capturas de pantalla  *Interfaz principal con el dashboard de entregas.*  *Funcionalidad para escanear paquetes.* ### Demo y código fuente - [Demo en vivo](https://demo.tusitio.com/app-movil) - [Repositorio GitHub](https://github.com/tuusuario/app-movil-innova)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
--- title: Plataforma Web - AgroConnect cliente: AgroSolutions S.A. fecha: 2023-07-15 layout: proyecto --- Creamos una plataforma web para conectar productores agrícolas con compradores locales y optimizar la cadena de suministro. El objetivo principal fue facilitar la comercialización directa, evitando intermediarios y mejorando los ingresos de los pequeños agricultores. La plataforma incluye módulos para gestión de inventarios, pedidos online, y chat en tiempo real entre vendedores y compradores. ### Funcionalidades clave - Registro y perfil personalizado para productores y compradores - Catálogo dinámico de productos agrícolas - Sistema de pedidos y pagos integrados - Chat en tiempo real para negociación y consultas - Panel administrativo con reportes y estadísticas ### Tecnologías utilizadas - **React.js** para la interfaz de usuario - **Express.js** y **Node.js** en el backend - **MongoDB** para almacenamiento de datos - **Socket.IO** para funcionalidades en tiempo real - **Stripe API** para procesamiento de pagos ### Resultados AgroSolutions S.A. incrementó en un 35% las ventas directas en seis meses, reduciendo costos y mejorando la comunicación entre productores y compradores en zonas rurales. ### Capturas de pantalla  *Interfaz amigable con listado de productos.*  *Comunicación directa entre usuarios.* ### Demo y código fuente - [Demo en vivo](https://demo.tusitio.com/agroconnect) - [Repositorio GitHub](https://github.com/tuusuario/agroconnect)
3. Crear un layout personalizado
Es una buena idea tener un layout personalizado para las colecciones. Por ejemplo, tener algo así:
1
2
3
4
5
6
7
8
9
10
---
layout: default
---
<article>
<h1>{{ page.title }}</h1>
<p><strong>Cliente:</strong> {{ page.cliente }}</p>
<p><strong>Fecha:</strong> {{ page.fecha | date: "%B %Y" }}</p>
<div>{{ content }}</div>
</article>
Por último, crea una página para mostrar los artículos:
1
2
3
4
5
6
7
8
9
<h2>Poryectos realizados</h2>
<ul>
{% for proyecto in site.proyectos %}
<li>
<a href="{{ proyecto.url }}">{{ proyecto.title }}</a>
- {{ proyecto.fecha | date: "%d/%m/%Y" }}
</li>
{% endfor %}
</ul>