Cómo personalizar nuestro sitio Jekyll con gemas

Cómo cambiar la apariencia o conseguir funcionalidad adicional en nuestro sitio

Por

22 marzo, 2017

2443

En mi última aparición por estos lares montamos una página web con Jekyll. Desde entonces seguro que ya habéis investigado por vuestra cuenta y os habéis montado una página de lo más chula. Hoy vengo a hablar de cómo añadirle personalidad extra usando gemas de Ruby. Para ello, primero hablaremos un poco del fondo del asunto, desde mi punto de vista ajeno a Ruby y a la programación en general. Luego veremos dos casos concretos, el de los temas y el de los plugins.

Un poco de teoría

Dijimos el otro día que Jekyll era una gema de Ruby, pero no entramos más en detalle sobre lo que era una gema o para qué servía.

En esencia, las gemas son el modo en que se distribuye el código de Ruby. Del mismo modo que tenemos paquetes y APT para Debian, tenemos gemas y RubyGems para Ruby. Siguiendo con la analogía, tal y como tenemos apt-get para gestionar los paquetes, para el caso de Ruby tenemos gem.

Esto nos interesa porque podemos usar Jekyll conjuntamente con diversas gemas para cambiar la apariencia o conseguir funcionalidad adicional en nuestro sitio. Para ello necesitamos dos cosas: el programa Bundler y un archivo Gemfile.

Bundler

Bundler es el programa que gestionará e instalará las gemas que vayamos a usar un nuestra página. Es una especie de gestor de paquetes, comprueba si los paquetes necesarios están instalados en las versiones requeridas y, si no es así, los instala. Luego nos ayuda a montar el sitio haciéndose cargo de las dependencias y demás asuntos internos que a mí se me escapan por completo.

El propio Bundler es una gema y podemos, por lo tanto, instalarlo con gem:

gem install bundler

Bundler nos proporciona los comandos que empiezan porbundle. Para nuestros propósitos, los más importantes son estos dos:

bundle install: instala las gemas necesarias para el proyecto en cuestión.
bundle exec: hace que el comando al que precede se ejecute con las gemas especificadas en el Gemfile. De este modo, jekyll serve se convierte en bundle exec jekyll serve y jekyll build en bundle exec jekyll build cuando nuestro sitio hace uso de alguna gema.

El archivo `Gemfile`

Para que Bundler haga su trabajo, hace falta que escribamos en un archivo llamado Gemfile una lista de las gemas que vamos a usar, con sus correspondientes versiones. Por ejemplo, el Gemfile del sitio de prueba que nos crea Jekyll al hacer jekyll new tiene esta pinta (le he reducido los comentarios para mejorar la legibilidad):

source "https://rubygems.org"
ruby RUBY_VERSION

# This will help ensure the proper Jekyll version is running.
gem "jekyll", "3.3.1"

# This is the default theme for new Jekyll sites.
gem "minima", "~> 2.0"

# If you have any plugins, put them here!
group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.6"
end

Este Gemfile nos dice:

Dónde debe buscar Bundler las gemas cuando no estén en
nuestro ordenador.
Cuál es la versión de Ruby necesaria para crear el sitio.
Qué gemas hacen falta para crear la página. En este caso son jekyll, minimay jekyll-feed, siendo minima un tema y jekyll-feed un plugin.

Cuando Bundler lee el Gemfile, instala las gemas necesarias y crea un archivo Gemfile.lock en el que se guarda la información de todas y cada una de las gemas de las que depende nuestro proyecto con su respectiva versión. Esto nos garantiza que nuestro sitio puede generarse sin problemas en cualquier sistema mientras se respeten las exigencias del Gemfile.lock.

Vamos a ver ahora dos casos concretos para lo que las gemas son útiles: modificar la apariencia de nuestro sitio mediante un tema y añadir funcionalidades con plugins. Hay temas y plugins que no se distribuyen como gemas, pero los dejamos para otro día.

Modificar la apariencia: temas

Los temas nos permiten modificar la apariencia de nuestra página con tan solo instalar una gema. En RubyGems tenemos montones de temas entre los que elegir para que podamos centrarnos en el contenido de nuestra página y despreocuparnos de su aspecto.

Una vez localizado un tema, para usarlo en nuestro sitio, simplemente, añadimos la gema correspondiente al Gemfile, como hemos visto en el apartado anterior:

gem "TEMA"

Aparte, le decimos a Jekyll que vamos a usar un tema en el archivo de configuración del sitio _config.yml mediante la clave theme:

theme: TEMA

Donde TEMA es el nombre del tema en cuestión. Ahora no nos queda más que crear nuestra página:

# Instalar las gemas necesarias
bundle install
# Crear el sitio en localhost:4000
bundle exec jekyll serve

Añadir funcionalidad: plugins

Las gemas también nos sirven para añadir funcionalidad a nuestro sitio mediante plugins. Los hay para todos los gustos: para crear un feed automáticamente, para usar Pandoc para la construcción de la página e, incluso, para incrustar vídeos de Asciinema, entre otros muchos.

Para usarlos no tenemos más que añadir al Gemfile la lista de plugins que vamos a usar, del mismo modo que veíamos en el ejemplo inicial:

group :jekyll_plugins do
  gem "un-plugin"
  gem "otro-plugin"
end

Los agrupamos para que el Gemfile sea más fácil de leer pero podríamos ponerlos exactamente igual que hemos hecho con el tema. Creamos la web exactamente igual que para el caso de los temas, primero instalando las gemas correspondientes y luego ejecutando bundle exec jekyll serve.

Espero que os resulte interesante el tema de las gemas. Os dejo unos enlaces para que sigáis profundizando. También he añadido un tema y un plugin a mi sitio Jekyll de prueba porque siempre se entiende todo mejor con un ejemplo.