Rápida, sencilla y fiable: Jekyll

Cuando decidimos que necesitábamos rehacer la web de itnig desde cero, conseguimos sintetizar nuestras necesidades en tres palabras.

Rápida, sencilla y fiable.

¿Hay algo más rápido, sencillo y fiable que un html estático? Escribir una página html estática en el mundo dinámico en el que vivimos estaba fuera de cuestión, pero necesitábamos algo que nos permitiera hacerlo de forma sencilla. Ahí fue cuando encontramos Jekyll.

Jekyll te permite generar un sitio html estático a partir de componentes dinámicos como plantillas, partials, código liquid, markdown, etc.

Estructura de datos

Las clases de datos se estructuran en Collections, siendo cada colección una carpeta donde cada instancia se representa mediante un archivo. Cada uno de estos archivos empieza con lo que llaman Front Matter, una cabecera donde se definen todos los atributos de la instancia. Este Front Matter es lo que permite las relaciones entre clases, el filtrado, las consultas, etc.

Las clases que no necesitan una representación en página html se almacenan usando Data Files (un típico archivo CSV) en lugar de representarse mediante un archivo en una colección. En nuestro caso, los usamos para almacenar a las personas que trabajan en nuestras startups.

Sourcing de datos

Podríamos crear manualmente un archivo en la colección _jobs cada vez que tenemos una nueva oferta de trabajo, o un nuevo archivo en la colección _events cada vez que tenemos un nuevo evento, pero nos encanta optimizar nuestro tiempo, y ya actualizamos nuestras ofertas de trabajo en Workable y nuestros eventos en Meetup, así que ¿por qué no usar sus APIs? Pues eso es exactamente lo que hacemos. Ejecutamos periódicamente un script que recupera todos los trabajos de Workable creando un archivo para cada uno que luego se almacena en la colección _jobs. Hacemos lo mismo con los próximos eventos y también usamos la API de Google Drive para recuperar la última versión del archivo CSV de personas.

Diseño

Una vez definida la estructura y creados algunos datos, puedes empezar a trabajar en el diseño. Puedes definir algunas propiedades y atributos en cualquier archivo usando el Front Matter, y obtener y jugar con los datos previamente creados usando Liquid (un motor de plantillas creado por Shopify), para finalmente mostrarlo usando HTML.

Conclusiones

Después de trabajar en y mantener un sitio Jekyll durante un par de meses, puedo decir que cumple con nuestras expectativas, pero hay un par de inconvenientes que debes tener en cuenta antes de decidir adoptarlo.

El primero es precisamente lo que lo hace rápido y fiable, es decir, la falta de un backend. Antes de elegir Jekyll tendrás que preguntarte si tu proyecto es lo bastante sencillo como para evitar el registro de usuarios y un modelado complejo de clases y base de datos. Si es así, adelante.

El segundo es la falta de un “backoffice” para personas no técnicas. Cada vez que actualizamos manualmente el contenido de un archivo (añadiendo por ejemplo la url del vídeo de un evento una vez está online) hay que sincronizarlo con el repositorio usando git, y desplegarlo al servidor donde está alojado el sitio. Esto puede parecer simple y limpio desde la perspectiva del desarrollador, pero cuando el contenido tiene que ser actualizado por usuarios no técnicos, esto puede ser un problema. Tendrás que asegurarte de que la persona encargada del contenido conoce o está dispuesta a aprender git.