Continuando con esta serie de artículos sobre como pasé de WordPress a Jekyll, llegó el momento de dejarnos de teoría y pasar a la práctica.
Estoy describiendo los pasos de configuración en el sentido que yo los hice. El primer archivo a editar es config.yml. En este encontramos la configuración por defecto del sitio. A cada post o página en particular se le puede asignar una configuración diferente. Pero, en caso de que no lo hagamos, se asignará la establecida en este archivo.
Recuerden que en el artículo anterior habiamos descargado un tema y nos estamos basando en él para la creación de nuestro sitio.
La extensión .yml indica que el documento está escrito utilizando YAML. Este lenguaje permite establecer jerarquías entre datos de una manera que sea entendible tanto para las computadoras como los seres humanos. Jekyll lo utiliza para dar coherencia a los diversos componentes de un proyecto.
Cómo configurar el sitio usando YAML
Un proyecto básico de Jekyll presenta un archivo config.yml que nos permite definir algunos parámetros.
Estos parámetros se representan con el formato
Categoría: ”contenido” Cabe mencionar que lo precedido por el signo # se ignora, por lo que si queremos que Jekyll utilice ese parámetro debemos eliminarlo.
En nuestro archivo config.yml veremos algo así:
title: El título del sitio
email: El correo electrónico del sitio
description: Una descripción del objeto del sitio para que muestren los buscadores
baseurl: Si el blog es parte de otro sitio y se le asigna una carpeta específica, se indica acá
url: El dominio principal del sitio.
Además hay otras dos catégorias.
twitter_username
github_username:
Estos dos parámetros muestran enlaces a las cuentas de usuarios de Twitter y Github.
Más abajo se indica a Jekyll que tema se va a utilizar y que complementos.
Config.yml en Minimal mistakes
Nosotros vamos a utilizar un tema con muchas más opociones y, que por lo tanto requiere un config.yml más completo. Lo más práctico es copiar el archivo desde el proyecto del tema y pegarlo en el nuestro en lugar de su conenido. Una vez hecho esto editamos los siguientes parámetros
Recuerden que nuestro proyecto de ejemplo era un blog de jardinería.
Lo primero que tenemos que hacer en establecer el tema. En esta línea
# theme : "minimal-mistakes-jekyll» borramos el símbolo del numeral “#”
Este tema ofrece distintas variantes. A mi me gusta la llamada Aqua. Comentamos “default” poniendo el símbolo #d elante del nombre y descomentamos “aqua
Locale indica el idioma del sitio web en el formato idioma_VARIANTE. Por ejemplo, como yo estoy en Argentina es
locale : "es-AR»
Puedes encontrar el listado de idiomas en esta página
Indicamos el título del sitio
title : "Blog de jardinería"
Elegimos un separador entre el título del sitio y el del post para que se visualice correctamente en los buscadores.
title_separator : "-"
Podemos agregar un subtítulo
subtitle: “Llevamos la naturaleza a tu computadora”
Indicamos el nombre del responsable del sitio
name : "Rosendo Margarito Flores"
Completamos la descripción del sitio para mostrar en los buscadores y en la página principal
description : "Un blog para difundir el auto cultivo de vegetales y flores entre aquellos que no tienen la menor idea de cómo se hace."
Los dos parámetros que vienen a continuación son dos viejos conocidos, pero en orden inverso.
En el primer caso indicamos el dominio del sitio
url : «https://desdeeljardin.flor»
Supongamos que nuestro blog fuera parte de una tienda de venta de semillas. Podemos querer asignarle su propia dirección tipo desdeeljardin.flor/blog.
Entonces hacemos
baseurl : "/blog"
Por algún motivo, los post con imágenes tienen más visitas que los que no las tienen. En caso que no les hayas asignado una, puedes hacer que se muestre una por defecto activando este parámetro.
teaser : "/assets/images/500x300.png"
Para evitar confusiones, yo voy a mantener la estructura de archivos original del tema. Por lo tanto, en nuestra carpeta del proyecto debemos crear una carpeta llamada assets, dentro de ella una llamada images, y en el interior de esta una de 500×300 pixeles llamada 500×300.png
También podemos elegir el logo del sitio. Repetimos el procedimiento de crearlo y guardarlo en las mismas carpetas y completamos el parámetro:
logo : "/assets/images/88x88.png"
Podemos elegir un título diferente al del sitio para que se muestre en la parte superior del navegador
masthead_title: “¡Feliz primavera!”
En el próximo artículo vamos a seguir repasando las opciones de configuración. Pero, aprovecho para aclarar que no tengo la menor idea sobre jardinería. Por lo tanto no me hago responsable de lo que diga el blog de ejemplo.