Configuración inicial del tema Minimal Mistakes

En el anterior artículo de la serie nos centramos en la instalación del tema Minimal Mistakes para nuestro sitio web, quedando pendiente la edición de los valores por defecto que acompañan a dicho proceso. Ese será precisamente el foco del presente documento, que lidiará con la modificación de gran parte del contenido del conocido archivo _config.yml.

Así pues, utilizando nuestro editor de texto plano favorito (actualmente Sublime Text 3 en mi caso, pero opciones como Notepad++ o Atom son también más que recomendables), procedamos a abrir el mencionado fichero, que se encuentra en el directorio raíz del sitio web.

El primer bloque de líneas, bajo la cabecera denominada # Site Settings, se ocupa de la configuración de los datos básicos de nuestra página, tales como su título, descripción o url, presentando el siguiente aspecto:

# Site Settings
locale                   : "en"
title                    : "Site Title"
title_separator          : "-"
name                     : "Your Name"
description              : "An amazing website."
url                      : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl                  : # the subpath of your site, e.g. "/blog"
repository               : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
# breadcrumbs            : false # true, false (default)
words_per_minute         : 200

No requieren demasiadas explicaciones la mayor parte de las líneas ahí presentes, con la salvedad quizá de:

  • teaser: esta variable configura la ruta de acceso hacia la imagen que, por defecto, aparecerá para los elementos que figuren en el bloque de Entradas relacionadas que se ubica al final de nuestros artículos. En mi caso, no voy a hacer uso de este recurso, aunque recomendaría a toda persona interesada en esta característica declarar individualmente, para cada entrada, una imagen concreta, en lugar de utilizar una de manera genérica. Tenemos más información al respecto en esta sección de la documentación oficial.
  • breadcrumbs: si nuestro sitio web va a caracterizarse por una considerable profundidad en la organización de sus contenidos, quizá sea conveniente que activemos este sistema de navegación, quitando el símbolo de comentario (#) que antecede la línea y declarando su valor como true. En este apartado de la documentación oficial podemos encontrar más detalles sobre esta funcionalidad del tema.
  • words_per_minute: el valor de esta variable permite estimar el tiempo de lectura de un artículo. Dependiendo de la temática de nuestra página, seguir un ritmo de doscientas palabras por minuto me parece ciertamente complicado, pero aquí ya entramos más en el terreno de las opciones personales que en el de los estudios científicos. En mi caso, no he alterado el valor, y eso que considero que mi estilo de escritura es denso como él solo.

Para Infinitos Contrastes, el anterior bloque ha quedado finalmente como sigue:

# Site Settings
locale                   : "es-ES"
title                    : "Infinitos Contrastes"
title_separator          : "-"
name                     : "Alexis Sáez"
description              : "Laboratorio de experimentos de un matemático apasionado por la estadística."
url                      : "https://imalexissaez.github.io"
baseurl                  : # the subpath of your site, e.g. "/blog"
repository               : "ImAlexisSaez/ImAlexisSaez.github.io"
teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
# breadcrumbs            : false # true, false (default)
words_per_minute         : 200

La siguiente parada la llevaremos a cabo en el mismo bloque, pero centrándonos en el apartado dedicado a la gestión de comentarios que, inicialmente, presenta el siguiente aspecto:

comments:
  provider               : # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
  disqus:
    shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
  discourse:
    server               : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
  facebook:
    # https://developers.facebook.com/docs/plugins/comments
    appid                :
    num_posts            : # 5 (default)
    colorscheme          : # "light" (default), "dark"
staticman:
  allowedFields          : ['name', 'email', 'url', 'message']
  branch                 : "master"
  commitMessage          : "New comment."
  filename               : comment-{@timestamp}
  format                 : "yml"
  moderation             : true
  path                   : "docs/_data/comments/{options.slug}" # "/_data/comments/{options.slug}" (default)
  requiredFields         : ['name', 'email', 'message']
  transforms:
    email                : "md5"
  generatedFields:
    date:
      type               : "date"
      options:
        format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
atom_feed:
  path                   : # blank (default) uses feed.xml

A la hora de escribir estas líneas, podemos optar por los siguientes proveedores:

  • Disqus,
  • Discourse,
  • Facebook, y
  • Staticman.

En mi caso, viendo que a día de hoy casi todo blog o página que sigo utiliza Disqus, esa es la opción por la que finalmente me he decantado. Además, al final del anterior bloque de instrucciones aparece una línea dedicada a la sindicación de contenidos, donde debemos indicar la ruta de acceso si vamos a utilizar un servicio externo (como, por ejemplo, FeedBurner).

Para Infinitos Contrastes, el anterior bloque ha quedado finalmente como sigue:

comments:
  provider               : "disqus"
  disqus:
    shortname            : "infinitos-contrastes"
  discourse:
    server               : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
  facebook:
    # https://developers.facebook.com/docs/plugins/comments
    appid                :
    num_posts            : # 5 (default)
    colorscheme          : # "light" (default), "dark"
staticman:
  allowedFields          : ['name', 'email', 'url', 'message']
  branch                 : "master"
  commitMessage          : "New comment."
  filename               : comment-{@timestamp}
  format                 : "yml"
  moderation             : true
  path                   : "docs/_data/comments/{options.slug}" # "/_data/comments/{options.slug}" (default)
  requiredFields         : ['name', 'email', 'message']
  transforms:
    email                : "md5"
  generatedFields:
    date:
      type               : "date"
      options:
        format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
atom_feed:
  path                   : # blank (default) uses feed.xml

Tiempo ahora de editar el bloque dedicado a las redes sociales, que, inicialmente, presenta el siguiente aspecto:

# Social Sharing
twitter:
  username               :
facebook:
  username               :
  app_id                 :
  publisher              :
og_image                 : # Open Graph/Twitter default site image
# For specifying social profiles
# - https://developers.google.com/structured-data/customize/social-profiles
social:
  type                   : # Person or Organization (defaults to Person)
  name                   : # If the user or organization name differs from the site's name
  links: # An array of links to social media profiles

En mi caso, Twitter y, sinceramente, no mucho, que, como me descuide, las redes sociales absorben una cantidad desorbitada del poco tiempo libre del que dispongo.

Así pues, para Infinitos Contrastes, el anterior bloque ha quedado finalmente como sigue:

# Social Sharing
twitter:
  username               : "ImAlexisSaez"
facebook:
  username               :
  app_id                 :
  publisher              :
og_image                 : # Open Graph/Twitter default site image
# For specifying social profiles
# - https://developers.google.com/structured-data/customize/social-profiles
social:
  type                   : # Person or Organization (defaults to Person)
  name                   : # If the user or organization name differs from the site's name
  links: # An array of links to social media profiles
    - "https://twitter.com/ImAlexisSaez"

Seguimos ahora con el bloque dedicado a la analítica de nuestro sitio web, que originalmente presenta el siguiente aspecto:

# Analytics
analytics:
  provider               : false # false (default), "google", "google-universal", "custom"
  google:
    tracking_id          :

Editamos la información allí presente con los datos que nos proporciona Google, de forma que, para Infinitos Contrastes el anterior bloque presenta el siguiente aspecto:

# Analytics
analytics:
  provider               : "google"
  google:
    tracking_id          : "UA-88993800-1"

Tiempo de rellenar un poco de información sobre nosotros en el bloque encabezado por # Site Author: nombre, foto (avatar), descripción, residencia, un sinfín redes sociales, repositorios de código, ciertos portales y algunas líneas que, sinceramente, desconozco a qué hacen referencia. No será por falta de opciones, no.

# Site Author
author:
  name             : "Your Name"
  avatar           : # path of avatar image, e.g. "/assets/images/bio-photo.jpg"
  bio              : "I am an amazing person."
  location         : "Somewhere"
  email            :
  uri              :
  bitbucket        :
  codepen          :
  dribbble         :
  flickr           :
  facebook         :
  foursquare       :
  github           :
  gitlab           :
  google_plus      :
  keybase          :
  instagram        :
  lastfm           :
  linkedin         :
  pinterest        :
  soundcloud       :
  stackoverflow    : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username)
  steam            :
  tumblr           :
  twitter          :
  vine             :
  weibo            :
  xing             :
  youtube          : # "https://youtube.com/c/MichaelRoseDesign"

Es en estos momentos cuando un servidor es consciente del increíble número de tecnologías o servicios que no utiliza y a los que, posiblemente, tendría que echar un vistazo por encima. Así pues, para Infinitos Contrastes, el anterior bloque de código presenta este básico aspecto:

# Site Author
author:
  name             : "Alexis Sáez"
  avatar           : "/assets/images/bio-photo.jpg"
  bio              : "Matemático. Apasionado de la Estadística y la Ciencia de Datos."
  location         : "Ibi, Alicante (España)."
  email            : "imalexissaez@gmail.com"
  uri              : "https://imalexissaez.github.io/"
  bitbucket        :
  codepen          :
  dribbble         :
  flickr           :
  facebook         :
  foursquare       :
  github           : "ImAlexisSaez/"
  gitlab           :
  google_plus      :
  keybase          :
  instagram        :
  lastfm           :
  linkedin         :
  pinterest        :
  soundcloud       :
  stackoverflow    : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username)
  steam            :
  tumblr           :
  twitter          : "ImAlexisSaez"
  vine             :
  weibo            :
  xing             :
  youtube          : # "https://youtube.com/c/MichaelRoseDesign"

Finalmente, nos desplazamos hasta la última sección del archivo _config.yml, encabezada por # Defaults, ya que, por defecto, los posts que generemos tienen desactivada la opción de permitir comentarios, puesto que el mencionado bloque de código presenta el siguiente aspecto:

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true

Simplemente hemos de suprimir el símbolo de comentario (#) que aparece en la línea encabezada por comments:, declarando así su valor como true. De esta manera, para Infinitos Contrastes, el anterior bloque de código presenta el siguiente aspecto:

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true
      share: true
      related: true

En el tintero han quedado diversas secciones del fichero _config.yml que iremos editando a medida que la necesidad lo precise. Para una primera pasada por los contenidos de dicho archivo, considero que los cambios que hemos examinado son más que suficientes para que el sitio web “empiece a rodar”.

En este momento, deberíamos ser capaces de revisar localmente el sitio web, escribiendo en Git Bash:

bundle exec jekyll serve

Y, una vez compile, abriendo en nuestro navegador la siguiente dirección: http://127.0.0.1:4000/. Presentará el siguiente aspecto:

Aspecto del sitio web tras la configuración inicial

Si estamos contentos con las modificaciones llevadas a cabo, no sería mala idea actualizar el repositorio que contiene la web. Para ello, en Git Bash teclearemos:

git add .
git commit -m "Mensaje significativo sobre los cambios realizados"
git push origin master

Siendo este proceso a seguir idéntico cada vez que hagamos algún tipo de modificación en la web.

En el siguiente artículo de la serie exploraremos cómo solucionar cierto mensaje de error que aparece en la consola, relacionado con el favicon de la web.

Nota: cualquier comentario relacionado con el texto precedente se puede llevar a cabo a través de su correspondiente entrada en el blog.

Publicado: