No tengo intención de que esto se convierta en un blog técnico de modo alguno, pero me ha ayudado mucho ver en otros blogs posts que contaban cómo estaban hechos, así que quiero devolver el favor contando un poco por encima cómo tengo esto montado.

Web estática

A la hora de hacer el blog buscaba algo simple, con pocas dependencias para que el mantenimiento fuese mínimo, que fuese rápido a la hora de cargar, que cambiar la web de hosting fuese sencillo y que me permitiese centrarme en escribir y no preocuparme de más cosas. Así fue que llegué a los generadores de webs estáticas, en concreto a Jekyll.

El proceso de crear nuevas páginas en el blog es sencillo: Escribo en ficheros Markdown las páginas de la web, ejecuto Jekyll que transforma esos ficheros en html y ya tengo la web lista en una carpetita para subir a cualquier hosting, sin preocuparme de ningún tipo de base de datos para el contenido de la web.

Los comandos que seguí para instalar y para ejecutar Jekyll cada vez los podéis ver en el README del repositorio.

Tema

Aunque estuve barajando otros con más elementos acabé decidiéndome por Minima que es el tema por defecto de Jekyll. Por defecto se usa la versión 2.5.2 que es la última release que se hizo hace 2 años. Como me interesaba usar la 3.0.0 y todavía no está publicada seguí las instrucciones del repositorio para fijar la versión al último commit de la rama master.

Los puntos de extensión que tiene el tema son las carpetas _includes (fragmentos de código html reutilizables), _layouts (permite modificar o añadir nuevos tipos de layout a las páginas) y _sass (para modificar el css de la web).

  • Añadí los favicon creando un custom-heads.html dentro de la carpeta _includes.
  • Modifiqué el layout de los post para que encajara con los comentarios.
  • Añadí al _config.yml la configuración del tema y toda la info de la web (nombre, descripción, redes…)

Comentarios

He añadido al blog un apartado de comentarios basado en respuestas de Mastodon, es la razón por la que esté escribiendo esta entrada. A partir de ahora el proceso de publicación será el siguiente:

  1. Escribir y publicar una entrada del blog.
  2. Poner un tuit en Mastodon.
  3. Enlazar el tuit en el Front Matter de la entrada y volver a publicar.

La implementación lo que hace es que el navegador al abrir la entrada hará una llamada a Mastodon para pedirle toda la información de las respuestas al tuit enlazado y maquetará esa información para mostrarla en forma de comentarios. El motivo de usar esto es porque no me apetecía hostear una solución propia, usar una de terceros que tuviese que pagar, incluyese cookies o anuncios. Pero sobre todo porque me hizo bastante gracia cuando lo vi, aunque se limita mucho la gente que vaya a comentar a lo mejor así os animo a venir, que yo me lo paso mu bien ahí.

El código que se puede ver en comments.html es un poco frankenstein que he sacado de tres implementaciones distintas y luego personalizado a mi gusto:

  • Maquetación y código del que partí de Joel Chrono
  • Diálogo y botón de añadir comentario de Michael Thomas
  • Features como el formato de las fechas, inserción de emojis personalizados y gifs (todavía no las he implementado todas) de Cassidy James

Hosting

Codeberg pages permite almacenar webs estáticas cuyo código esté en sus repositorios de forma pública. En publish.yml tengo un workflow de forgejo que me permite automatizar la publicación de los cambios en la web. Cada vez que realizo un push a la rama main se comprueba si el último commit realizado comienza por la palabra publish y en caso afirmativo una máquina alojada en Codeberg hace checkout del proyecto, instala las dependecias, construye la web y la publica.

Alternativas

Aunque estas han sido las herramientas que he decidido usar porque consideraba que se adecuaban más a mis gustos, necesidades y filosofía estuve investigando muchas opciones, dejo por aquí unas cuantas:

Generador de web estáticas

Temas

Comentarios

Hay muchísimas alternativas, al final del README de este repo hay una lista que me sirvió bastante, pero hay muchas más. Dejo por aquí las principales que estuve barajando.

Hosting

Tengo ciertas reticencias a seguir usando Github