Mastodon, Jekyll y Github. Una combinación perfecta.

· 5 min · @Self-Hosting · #Docker #Hugo

Desde que di el salto de wordpress a Github, lo más lógico, si mi profesión, pasión hace referencia a la tecnología y que también influyó que wordpress empezaba a tener muchos problemas con la creación y gestión del blog.

Todo empezó a mediados del 2021 cuando cada vez tenía más problemas a la hora de crear artículos y subirlos a wordpress, aunque ahora le estoy dado otro uso, así que me puse a investigar y la mayoría de personas a las que sigo, lo tienen alojado en Github o Gitlab.

Investigué qué diferencia había entre los dos, pero no encontré ninguna a nivel de uso personal, así que lancé la moneda al aire y salió Github, me puse a ello. Después de investigar me creé mi repositorio.

Al principio me costó mucho entender cómo funciona Github, para que os hagáis una idea, me las tuve y deseé para crear mi primer repositorio, era dar un pasito hacia adelante y dos hacia atrás, si lo reconozco, no he leído la documentación del funcionamiento y uso de Github, pero bueno, creo que así he aprendido mucho más. Porque he tenido que aprender a lo bestia y descubrir las cosas que te puede ofrecer Github poco a poco. Y no me ha parecido mal.

Mis progresos han sido lentos, porque todo lo que hacía era la primera vez, e iba más a prueba y error y volver a repetir hasta que entendía lo que pasaba. Después de tener mi repositorio personal, fue tener en mi repositorio todos los ficheros del tema que iba a usar e ir subiendo o creando los ficheros markdown y ponerlos en donde indicaba la documentación del tema si entender bien qué pasaba.

Después entendí lo que hacía Github, que era compilar (si se le puede decir así) los archivos markdown y generar automáticamente el fichero html, seguí investigando a ver si eso se podía hacer en local y resultó que sí que se podía hacer, pero claro, para hacer eso, necesitabas tener un servidor Jekyll para que se realizase la compilación y solamente tener que subir los ficheros compilados y tener en mi poder, el código fuente del blog.

Sigo pensando que no me equivoqué, porque gracias a ello, aprendí cómo crear un docker (mi primer docker). Era un Docker que tiene un servidor jekyll para poder realizar las compilaciones de los markdown. También tengo que decir que no funciona muy bien, pero bueno, como primera experiencia en crear un docker, no me fue mal, porque entendí mejor cómo funcionan los docker.

Cuando vi que la cosa no funcionaba correctamente, la idea era interesante, pero el resultado no era muy satisfactorio, me puse a buscar un docker ya creado y que fuera mejor que el mío. Y di con él.

Su autor es bretfisher, tengo que informar que es un poco lioso de usar, porque tiene 2 contenedores:

El único que te tiene que importar es es el contenedor que hacer de jekyll-serve.

La configuración que tengo para usar la imagen de docker es la siguiente:

jekyll:
  image: bretfisher/jekyll-serve
  container_name: jekyll
  # port d'access a traves de la web
  ports:
    - 4000:4000
  # on esta el codi font del blog
  volumes:
    - ../blog:/site

Cuando ya tenía este contenedor en marcha, ya pude empezar con la creación de mis artículos y es aquí, después de esta pequeña historia, donde explico la idea principal de este artículo. Unir Jekyll, Mastodon y Github y todo lo que me podía ofrecer este último y una de estas posibilidades es la de publicar mis artículos a través de un bot.

Pero lo que echaba de menos, porque no se veía ninguna imagen en la publicación en Mastodon, cuando leí uno de los toots de Carlos M de elBlogdeLazaro, que sigo y que me ha dado el punto de inicio por donde empezar, se podía visualizar una imagen, o mejor dicho, el logo de su web.

Yo quería hacer lo mismo, pero no encontraba ninguna información donde se explicase cómo se tenía que hacer o cómo configurar Mastodon, después descubrí que las modificaciones necesarias las tenía que hacer en los archivos de mi blog, y gracias a una pista que, como ya he dicho, me dio Carlos. M conseguir descubrir cómo hacerlo.

La pista fue (Lázaro usa Hugo, otra alternativa a Jekyll), me comentó, que en su caso, esto es automático y que a través de :EXPORT_hugo_custom_front_matter+: :image /images/...... es la manera que se muestra el logo en las publicaciones de Mastodon, pero ya era algo.

Me puse a buscar todo lo referente a la pista que me había dado y que se podía hacer en Hugo y al final la encontré en esta pagina, encontré la gran pista que me llevaría hacia mi objetivo.

Todo consiste, en que Mastodon utiliza OpenGraph para todo el tratamiento de las publicaciones (seguramente es más complicado que esto), pero en mi caso me dio la pista definitiva que necesitaba. Lo que tenía que hacer, es buscar cómo poner en mi blog una imagen del tipo og:image en la pantilla. La solución la encontré en la siguiente pagina, donde se puede ver, el código necesario para usar imagenes og:

<meta content="site.url/assets/img/posts/page.image" property="og:image">

Gracias a este código y después de modificarlo para poderlo usar en mi plantilla, la modificación la he hecho en _layouts/default.html:

if site.lightavatar
  <meta content="site.lightavatar | relative_url" property="og:image">
else
  <meta content="site.darkavatar | relative_url" property="og:image">
endif

Conseguí hacer lo que yo quería, porque ahora, a falta de más pruebas, he conseguido que cada vez, que se envía una publicación a Mastodon a través del bot automático se puede ver el logo de mi pagina web. Un logo simple, pero es el que más me gusta, porque mezcla mis 2 grandes pasiones.

Egipto y GNU/Linux

◇ Referencia