Cambios en el blog - 2

Como ya expliqué en el anterior artículo, comentaba que había actualizado mi Blog / Página Web con un nuevo tema gracias a Jekyll y al final hice el cambio, con unos cuantos problemas pero lo hice. Y aquí podéis ver el resultado…

Pero aun así, había cosas que no acababan de funcionar y eran:

• El feed no se creaba correctamente porque las direcciones de los posts apuntaban a http://0.0.0.0:4000
  • Esta es la dirección por defecto del servidor de jekyll de desarrollo.
• En los artículos salía la opción de SHARE y aun desactivando las redes sociales, esta opción no desaparecía.

La parte más fácil fue la de hacer desaparecer la opción SHARE de los post. Hice una modificación al código para que a partir de una variable activase la opción de SHARE o no.

La primera modificación se tenía que hacer en el archivo _data/social.yml donde tenemos que añadir lo siguiente:

# add this new option:
# For share on general
share_buttons: false

Una vez realizada esta modificación, la siguiente modificación se tenía que hacer en _includes/social/share_buttons.liquid donde teníamos que añadir el siguiente código:

{% if site.data.social.share_buttons %}
...
{% endif %}

Y con esto se conseguía que los iconos de SHARE no se visualizaran.

Una vez realizada esta modificación, hablé con el creador del tema para plantearle esta modificación y que se lo añadiera al tema. Después de un pequeño problema de comunicación, al final nos entendimos los dos con respecto a lo que le estaba proponiendo y le pareció una buena idea y que no había ningún problema, que o yo hacía el PULL REQUEST, o sino tenía mucha prisa él se encargaría de hacer las modificaciones oportunas.

Le dije que mejor lo hiciera él, porque hacer los PR en código ajeno al mío no me hace mucha gracias, no vaya ser que la líe. Además no tenía prisa.

Y así quedó la cosa, con esta modificación a la espera, pero en mi caso, como ya la tenía, pues adelante. Pero pasado un día, el desarrollador del tema, me respondió a mi petición, indicando que esto ya lo hacía por defecto. A mi me extrañó mucho, porque yo lo había probado y no había pasado nada.

Él me puntualizó, que para activar esta funcionalidad, en el fichero _data/social.yml tenía que poner a false todas las redes sociales y con esto ya funcionaba lo que yo quería:

# For the share button options at the bottom of the articles
share:
  email: false
  facebook: false
  linkedin: false
  pinterest: false
  pocket: false
  reddit: false
  tumblr: false
  twitter: false
  wordpress: false

Así que lo probé y tenía razón. Lo que él decía funcionaba perfectamente.

Ahí fue cuando le pregunté, si ese fichero no es el que controla los iconos que aparecen en el footer de la web, y su respuesta fue, que no, ese fichero es el que controla la opción SHARE. El que controla el footer es _data/icons.yml. Entonces dije, tierra trágame.

Eso me pasa por no revisar concienzudamente el código para así entender lo que está haciendo, porque lo más fuerte es que el código es muy fácil de entender. Lo que hace estar fuera de este mundo durante un par de años. Que todo avanza muy rápidamente.

Así que deshice las modificaciones que había hecho y todo funcionó correctamente.

Pero ahora venía el problema más grave, como solucionar el tema del feed.yml que no apuntaba correctamente a la dirección de los artículos cuando se subía a github.com. Me pasé días y días intentando buscar la solución al problema. Mucha gente decía que si ponías en el fichero _config.yml, en la opción feed la opción url de la siguiente manera:

feed:
  url: https://tudominio.github.io

Funcionaba sin ningún problema. Pero no era mi caso. Y era muy frustrante no conseguir hacer funcionar el feed correctamente. Así que si no puedes con él, hazte uno propio y fue lo que hice, construir mi propio feed, para que a la hora de generar el sitio en github se creara automáticamente. El código que usé era el siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
  <channel>
    <title>{{ site.name | xml_escape }}</title>
    <description>{% if site.description{{ site.description | xml_escape }}{% endif</description>
    <sy:updatePeriod>{{ site.feed_update_period | default: "daily" | xml_escape }}</sy:updatePeriod>
    <sy:updateFrequency>{{ site.feed_update_frequency | default: 1 | xml_escape }}</sy:updateFrequency>
    <link>{{ site.url }}</link>
    <atom:link href="{{ site.url }}/{{ page.path }}" rel="self" type="application/rss+xml" />
    <lastBuildDate>{% for post in site.posts limit:1{{ post.date | date_to_rfc822 }}{% endfor</lastBuildDate>
    {% assign feed_items = site.feed_items | default: 10
    {% for post in site.posts limit:feed_items
      <item>
        <title>{{ post.title | xml_escape }}</title>
        {% if post.author.name
          <dc:creator>{{ post.author.name | xml_escape }}</dc:creator>
        {% endif
        {% if post.excerpt
          <description>{{ post.excerpt | xml_escape }}</description>
        {% else
          <description>{{ post.content | xml_escape }}</description>
        {% endif
        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
        <link>{{ site.url }}{{ post.url }}</link>
        <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
        </item>
    {% endfor
  </channel>
</rss>

Como cogía la información del fichero _config.yml para la creación de los links, pues no había problema.

Pero yo no quería esta chapuza, por llamarlo de alguna manera. Yo quería utilizar todo el potencial de jekyll y que fuera él, el que me creara el feed, porque sino, para eso, me hago yo el tema. Lo único que me quedaba, era preguntar directamente a la fuente, donde expliqué el problema y como hacía para construir el sitio y después subirlo a GitHub.

Aquí fue donde expliqué que usaba un archivo sh, este en concreto que hacía las siguientes funciones:

• Construir el sitio añadiendo los nuevos posts, recordar que yo todo esto lo tengo en docker:

docker exec jekyll bundle exec jekyll serve build

• Subir los archivos html a GitHub.

La primera respuesta que me dieron, que tienen mucha razón, fue, porque hacía eso, si eso lo podía hacer GitHub directamente y tienen toda la razón, pero les dije, que no me hacía mucha gracias subir todo el codigo fuente de mi web. Que prefería, en mi caso, tener el control del código fuente y subir solamente el código html final.

Hay fue donde me dijeron que entonces, el problema lo tenía yo, porque no entendía bien como funcionaba jekyll, 😭 lo que siempre me pasa por no leer y comprender el funcionamiento de las cosas, y en este caso de jekyll. Entonces me explicaron, que la instrucción que yo estaba usando, lo que hacía era:

• serve es crear, más o menos, con lo parámetros del servidor de docker y mostrarme el resultado, pero sino ninguna modificación.
  • O sea usando por defecto la dirección del servidor http://0.0.0.0:4000
• build lo que hace es construir el sitio usando la configuración del fichero _config.yml.

Lo que yo estaba haciendo a parte de no tener sentido era crear y construir el sitio con los valores por defecto del servidor y por eso, el feed no se creaba correctamente. Que lo correcto, era usar jekyll build. Y así que me fue.

Lo que puede pasar por no entender lo que haces. Y funcionó 🥲. Al usar build el feed y todo el resto de ficheros, sitemap.yml, robots.txt, se creaban usando los valores de _config.yml.

Pues ya estaba todo. Por fin tenía todo el tema funcionando correctamente y lo más importante, sin necesidad de utilizar ninguna funcionalidad externa a jekyll, para que así, en un futuro, espero que lejano, si quiero cambiar de nuevo de tema, no tener que volver a pelearme con el código para conseguir que funcione correctamente.

Aunque esto no es del todo cierto, porque cada tema, tiene su manera particular de crear los posts, pero bueno, eso es otro tema.

Hasta aquí hemos llegado. Con mi sitio con un tema nuevo y a pleno rendimiento y con tiempo para decidir a otras cosas que tengo pendientes y sin tener que preocuparme por su funcionamiento. Lo único que me queda, si, nunca se puede decir que todo está perfecto, es, como el tema tiene esa posibilidad, la de añadir alguna imagen de cabecera de los artículos. Pero eso ya se verá.

◇ Referencia

• Modificar opción SHARE
• Jekyll always 0.0.0.0:4000