De casualidad me topé con Eleventy y decidí utilizarlo para resolver un problema. Verán, cuando Google+ cerró en 2019, comunidades enteras desaparecieron repentinamente. Había una opción para descargar un respaldo, pero era muy deficiente. La historia completa la puedes leer en Torreón antiguo una comunidad de Google Plus.
En aquel entonces hice un respaldo usando la herramienta HTTrack que hizo un buen trabajo. Sin embargo, también se trajo mucha «basura». Conservó el aspecto de Google plus, pero también incluyó un montón de enlaces rotos.
En este artículo …
El objetivo.
Desde hace tiempo tenía la idea de conservar solamente lo más esencial de cada artículo publicado. El título, las imágenes, el texto, fecha de publicación y el nombre del autor.
Para extraer esa información hice un pequeño programa en Python que buscaba esa información y la almacenaba en un archivo JSON con la siguiente estructura:
{
"titulo": titulo,
"autor": autor,
"fecha": fecha_formateada,
"imagenes": imagenes,
"texto": texto
}Con esa información, poder construir un sitio web estático mucho más rápido y mejor estructurado.
Gracias a las IA’s pude meterle turbo al proyecto y en unos días ya estaba haciendo pruebas. Pero no todo fue miel sobre hojuelas. Las IAs son un buen comienzo, pero no resuelven todo.
Eleventy
Al preguntar que herramienta era la indicada surgieron 3 nombres. Eleventy, Jekill y Hugo. Elegí el primero porque se lleva bastante bien con los archivos JSON como fuente de información.
Eleventy (11ty) es un generador de sitios estáticos (static site generator) rápido y sencillo, escrito en JavaScript. Está diseñado para ser flexible y minimalista, permitiendo crear sitios web usando plantillas en diversos formatos como Markdown, HTML, JavaScript, Nunjucks, Liquid, entre otros.
¿Cómo funciona?
De una forma muy, pero muy simplificada, Eleventy:
- Toma archivos de plantillas (ej:
.md,.njk,.html). - Procesa el contenido combinando datos con las plantillas.
- Genera archivos estáticos (HTML, CSS, JS) listos para desplegar en cualquier servidor web.
Siendo sincero, me quedé asombrado de lo rápido que genera los archivos HTML. Más de 400 artículos en unos pocos segundos.
No voy a explicar como hacer un sitio web básico con Eleventy, hay una buena cantidad de videos y tutoriales que explican paso a paso como hacerlo, pero les puedo recomendar los siguientes sitios para comenzar:
- La documentación de Eleventy es el mejor sitio para empezar.
- 11ty Rocks! Que tiene una buena cantidad de ejemplos paso a paso.
- Otro buen sitio con ejemplos es 11ty Recipes
Lecciones aprendidas
La indentación puede ser importante.
Me tardé mucho tiempo en entender que la indentación era importante en la cabecera de una plantilla.
Y es que repasé mucha información de la documentación para intentar entender por qué Eleventy no generaba los archivos HTML de los artículos.
Por pura casualidad me di cuenta de que VSCode estaba formateando el archivo eliminando una indentación que al parecer era necesaria.
Cuando corregí eso ¡PUUUM! La carpeta de salida se llenó de pequeños archivitos HTML.
Agregar un favicon
El favicon es esa pequeña decoración que aparece a un lado del título de la página en la pestaña del navegador. Es un pequeño toque que le da personalidad al sitio.
Es fácil hacerlo en HTML, pero hacerlo en Eleventy requiere unos cuantos pasos adicionales.
Por ejemplo, me di cuenta de que podía copiar todos los archivos de una carpeta y copiarlos en la carpeta raíz del proyecto de salida.
En el archivo de configuración .eleventy.js agrego esta línea.
eleventyConfig.addPassthroughCopy({ "./src/favicon": "/" });De ese modo tengo cierto orden y no revuelvo archivos.
Del mismo modo, puedo mantener carpetas separadas para luego copiarlas en su destino final como la carpeta de imágenes.
Paginación
La paginación fue la cereza final del pastel. Unos pequeños enlaces al final de cada artículo, dirigiéndose al artículo siguiente o al anterior.
<nav aria-label="pagination">
{% if pagination.href.previous %}<a href=".{{ pagination.href.previous }}">← Anterior</a>{% else
%}<span> </span>{% endif %}
{% if pagination.href.next %}<a href=".{{ pagination.href.next }}">Siguiente →</a>{% else %}<span> </span>{%
endif %}
</nav>URL Canónica
No estoy muy seguro si hice algún tipo de chapuza, pero funciona. Para agregar la URL canónica utilicé una instrucción if .
Sí existe un titulo hace un enlace canónico, de lo contario es la raíz del proyecto.
{% if articulo.titulo %}
<link rel="canonical" href="https://linuxmanr4.com/torreon/{{ articulo.titulo | slugify }}.html">
{% else %}
<link rel="canonical" href="https://linuxmanr4.com/torreon/">
{% endif %}Conclusiones
Trabajar con Eleventy fue una experiencia interesante y divertida. Una vez que entiendes el funcionamiento, avanzas rápidamente. Sin embargo, algunas tareas pueden ser algo desafiantes.
Actualmente, el proyecto funciona y lo pueden ver en Torreón Antiguo. Probablemente, jugaré un poco con el tema de los plugins. Quizás comience con el de Image para optimizar las imágenes.
¿Prefiero Eleventy a Pelican? No estoy muy seguro. Los puedo considerar casi como equivalentes. Todo depende de con que lenguaje te sientas cómodo. Nuevamente es un tema de gustos.
¿Ustedes tienen un generador de webs estáticas favorito? Los leo en los comentarios.