Configuración básica del sitio web

A continuación, exploraremos cómo establecer los valores básicos de configuración para un sitio web, tales como autor, título de la página, enlaces a redes sociales, plataforma de comentarios o sistema de analítica web. Para ello, utilizando nuestro editor de texto plano favorito, abrimos el archivo _config.yml, que se encuentra ubicado en la raíz del directorio donde hayamos almacenado el sitio web.

Nota: en lo que sigue, supondré que el proceso de selección e instalación de un tema para el sitio web ya ha tenido lugar, bien siguiendo las instrucciones que detallé en el artículo anterior de la serie, bien a través de las indicaciones que figuran en la documentación oficial. Aunque los párrafos que acto seguido aparecen lidian con aspectos particulares del tema Hooligan, las ideas se pueden extrapolar fácilmente a otros distintos.

El fichero está repleto de comentarios que suponen una valiosa ayuda de cara a guiarnos acerca del significado de todas y cada una de las variables recogidas en el código. Se identifican fácilmente, puesto que vienen precedidos por el símbolo #, que es, curiosamente, tal y como estamos acostumbrados a escribir comentarios en los scripts de los lenguajes de programación Python y R.

Así pues, teniendo en cuenta lo escrito en el párrafo anterior, la primera línea que podemos editar, de cara a configurar nuestro sitio web, es la correspondiente al enlace permanente (permalink) que, por defecto, viene dado como:

permalink: /:categories/:year/:month/:day/:title

En mi caso particular, por los argumentos que desarrollo en este artículo, la parte del enlace permanente correspondiente a las categorías la he suprimido, quedando entonces

permalink: /:year/:month/:day/:title

No obstante, dicha modificación está justificada en el mencionado artículo por el tratamiento que en Jekyll reciben los caracteres “extraños” a ojos del alfabeto inglés. Si esta situación sospecháis que no os puede afectar, personalmente recomendaría no alterar el valor de la variable permalink.

Si ahora seguimos explorando el contenido del fichero _config.yml, un par de líneas abajo encontramos la variable que declara la herramienta de resaltado de código fuente en nuestro sitio web. Por defecto, su valor está declarado como pygments, es decir, en el archivo original la línea presente es

highlighter: pygments

Todavía recuerdo el intenso dolor de cabeza que, durante el proceso de instalación, me provocó todo el tema asociado a pygments. Como bien comenté en su momento, por desgracia, GitHub Pages no soporta pygments como herramienta de resaltado de código fuente, sino Rouge. De esta manera, si no queremos estar recibiendo continuos mails que nos avisen de este hecho cada vez que modifiquemos y publiquemos de nuevo el sitio web, conviene que declaremos adecuadamente el valor de la variable highlighter como sigue

highlighter: rouge

A continuación, llegamos a la sección que nos permite personalizar el título de la página, su autor y declarar los enlaces a ciertas redes sociales de interés (así como a un gestor de RSS). Me refiero al siguiente bloque que aparece en el archivo _config.yml

title : Jekyll Bootstrap
tagline: Site Tagline
author :
  name : Name Lastname
  email : blah@email.test
  github : username
  twitter : username
  feedburner : feedname

El nombre de la mayoría de variables escogidas explica, de manera bastante satisfactoria, el contenido que configuran. Quizá la única que podamos encontrar con un halo más misterioso sea tagline, que vendría a declarar una especie de subtítulo o slogan para nuestro sitio web (línea que podemos directamente suprimir si queremos prescindir de este recurso).

En mi caso concreto, he eliminado la línea correspondiente a feedburner y declarado el valor de las restantes como sigue

title : Infinitos Contrastes
tagline: Pensando para escribir, escribiendo para pensar
author :
  name : Alexis Sáez
  email : imalexissaez@gmail.com
  github : ImAlexisSaez
  twitter : ImAlexisSaez

La siguiente parada que llevaremos a cabo en el recorrido del fichero _config.yml será en el apartado asociado a la variable production_url, que es interesante la declaremos de forma adecuada de cara a la correcta creación de ciertos apartados del sitio web. En nuestro caso, como estamos utilizando GitHub Pages para hospedar la página y no vamos a emplear dominio alternativo al que nos ofrecen allí, cambiaremos

production_url : http://username.github.io

por la dirección personal correspondiente (https://imalexissaez.github.io/ para mí, por ejemplo).

Seguimos ahora desplazándonos por el archivo _config.yml hasta llegar al siguiente bloque de líneas

archive_path: /archive.html
categories_path : /categories.html
tags_path : /tags.html
atom_path : /atom.xml
rss_path : /rss.xml

Aquí se establecen las rutas para ciertas páginas de interés que luego se utilizan para generar, de manera automática, contenido en nuestro sitio web. Por ejemplo, si para un post declaramos una etiqueta (tag) particular, Jekyll mirará aquí cuál es la ruta correspondiente a la página de etiquetas, tags.html en esta ocasión, y creará los enlaces entre el post y la mencionada página de forma correcta, sin necesidad de que nosotros llevemos a cabo acciones adicionales.

Recuerdo que el primer día renombré, sin apenas justificación alguna, el fichero archive.html a blog.html, ya que era la página donde pretendía alojar los artículos correspondiente al blog del sitio web. Esto provocó que tuviese que declarar el valor para archive_path de manera coherente con el mencionado cambio. No obstante, a medida que empecé a conocer un poco mejor el funcionamiento de Jekyll, me di cuenta de que el cambio era totalmente innecesario y simplemente bastaba con haber configurado adecuadamente el archivo archive.html.

Pasemos ahora a la sección que gestiona los comentarios para nuestro sitio web, cuyo bloque de código asociado es el siguiente:

comments :
    provider : disqus
    disqus :
      short_name : jekyllbootstrap
    livefyre :
      site_id : 123
    intensedebate :
      account : 123abc
    facebook :
      appid : 123
      num_posts: 5
      width: 580
      colorscheme: light
    duoshuo :
      short_name : jekyllbootstrap

Aquí tenemos dos opciones disponibles:

  • Desactivar globalmente los comentarios, declarando provider : false, si no queremos que nuestro sitio web incluya este recurso.
  • Escoger una herramienta o plataforma de comentarios de entre la que se ponen a nuestra disposición: disqus, livefyre, intensedebate, facebook o duoshuo. Crearemos una cuenta en una de ellas y en el panel de configuración correspondiente nos haremos con los datos necesarios que debemos declarar en el archivo _config.yml.

Como la mayoría de blogs que sigo utilizan la plataforma disqus, esa es precisamente la herramienta que he escogido para gestionar los comentarios de este sitio web. Cabe destacar que es bastante sencillo el proceso de creación de la cuenta y administración de sus opciones.

En cualquier caso, aunque optemos por una plataforma de comentarios concreta, siempre podremos desactivar los comentarios para un post en particular sin más que escribir en su cabecera (en el apartado delimitado por ---) comments : false.

Finalmente, encontramos el bloque correspondiente a la analítica web

analytics :
    provider : google
    gauges :
        site_id : 'SITE ID'
    google : 
        tracking_id : 'UA-123-12'
    getclicky :
      site_id : 
    mixpanel :
        token : '_MIXPANEL_TOKEN_'
    piwik :
        baseURL : 'myserver.tld/piwik' 
        idsite : '1'                   

El proceso aquí es muy similar al que acabamos de detallar para los comentarios. Tenemos la opción de desactivar este recurso globalmente, declarando provider : false (y localmente en un post tecleando analytics : false en su cabecera), o bien escoger una de entre las opciones que nos ofrecen (gauges, google, getclicky, mixpanel o piwik), crear la correspondiente cuenta e introducir arriba los datos asociados a ella.

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

Publicado: