Sempiterna Serendipia

Jekyll

Generador de sitios estáticos

El extraño caso de Dr. Jekyll y Mr. Hyde

—R. Louis Stevenson (1886)

Dr. Jekyll y Mr. Hyde

Te presento a Jekyll

I. Peterson: What are you going to do?
Dr. H. Jekyll: Something so simple. I’m going to put an end to all that confusion.
Mr. E. Hyde: You’re looking for a man named Hyde.
Dr. H. Jekyll: Hyde? I’M DR. HENRY JEKYLL!!

Jekyll es una aplicación de código abierto desarrollada por GitHub, y permite generar un sitio web estático a partir de un código fuente escrito en Markdown.

Hoy en día es importante la velocidad (venga, ¡cuéntame algo que no sepa!), y tener un sitio web estático es mucho más –pero mucho más– veloz que un sitio web dinámico (Wordpress etc.) Con Jekyll, Google te va a amar.

Pero claro, Jekyll sólo lo sabe usar el selecto club de los frik... desarrolladores <3.

Instalación

“Tengo una gran aversión a eso de hacer preguntas; se asemeja a la fatalidad del Juicio Final.”

En Ubuntu, simplemente:

$ sudo apt-get install jekyll

Configuración básica

“No, señor, tengo por norma que cuanto más sospechosa me parece una cosa, menos preguntas hago.”

Para crear un nuevo sitio llamado mysite (por lo que más quieras, ¡cambia ese nombre!):

$ jekyll new mysite
$ cd mysite

La configuración principal del sitio está en el fichero _config.yml. Edítalo a tu gusto:

title: Titulitis Titilante
email: roedor@ipfs.universe
description: "Esto te va a destruir"
[...]

Who is Mr. Hyde?

“…y bien entrada una infausta noche, combiné los elementos, observé cómo hervían y humeaban en la vasija, y cuando cesó la ebullición, en un inusitado arranque de valor, me bebí la pócima de un trago.”

Si quieres conocer a Mr. Hyde:

$ jekyll build

Jekyll se ha tomado su poción y se ha transformado en Mr. Hyde.

➜ Ejecuta jekyll build siempre desde el directorio principal del sitio!!! (el que creaste con jekyll new)

Se ha creado el directorio _site.
– Suena a que es donde se genera el sitio, ¿verdad?
– Es que es donde se genera el sitio.

Venga, venga. Abre el fichero _site/index.html con un navegador.
¿Ves? No muerde (aunque no te culpo: el verdadero Mr. Hyde sí).

Ahora, prueba esto:

  • Crea un nuevo fichero en el directorio principal del sitio, con extensión .md.
  • En las primeras líneas pon algo como lo siguiente para que Jekyll le aplique la plantilla correspondiente y lo transforme a HTML. 
    ---
layout: default
title: "Título de esta página"
---
  • Tras ello, escribe algo interesante en Markdown.
  • No, en serio, escribe algo menos aburrido que Holaaaaa zzz…
  • Ejecuta de nuevo jekyll build y comprueba que se ha creado en _site.

Es más, crea un nuevo fichero markdown dentro de una carpeta (en el directori principal, no en _site), pongamos DrJekyll/MrHyde.md. Vuelve a generar el sitio, et voilà! Ya puedes verla en HTML.

¿Pero qué ha ocurrido?

“Una cosa es mortificar la curiosidad, y otra vencerla.”

Este es el asunto:

  1. Creas un sitio en Jekyll (y lo configuras como quieras).
  2. Tú escribes en Markdown las cosas más mindblowing que se te ocurran.
  3. Jekyll te genera el sitio HTML estático, and life’s good.

Suena sencillo, pero lo puede ser aún más con lo siguiente.

Show me some action, please!

“Y si soy el mayor de los pecadores, soy también la mayor de las víctimas.”

Of course, just do this thing and watch the magic:

$ jekyll serve

Es importante leer, repito, leer la salida de los comandos que escribimos. ¿Ves algo interesante, digamos Server address: http://...?

➜ ¿Y qué haces que aún no lo has abierto?

Weehhh tampoco es que haga falta leer detalladamente todo lo que pare un comando. Con el tiempo aprendes a localizar lo que te puede interesar.

Espera, espera. ¿Recuerdas el fichero DrJekyll/MrHyde.md que creamos más arriba? Lo tienes en http://localhost:4000/DrJekyll/MrHyde.html.

Esto de jekyll serve es lo que nos permite realizar el desarrollo de la web en nuestro propio entorno. Cuando queramos subirlo a un servidor web, simplemente subimos los contenidos de _site.

  • Pruébalo en nginx
  • Y también en Windows Server

Publicar GitHub Pages

“…y en mi caso, ser tentado, aunque fuera levemente, suponía caer.”

En tu cuenta de GitHub, configura un repositorio como página de GitHub. Tras esto:

  • Puedes poner ficheros .html y .css para que se muestren.
  • Puedes usarlo como web de Jekyll.

Adivina cuál de los dos puntos anteriores vamos a hacer (guiño-guiño-codazo-codazo).

  1. Antes de nada, instala git en tu máquina: 
    $ sudo apt-get install git

  2. Crea en la página de GitHub un repositorio con el nombre que va a tener tu web <user-name>.github.io.

  3. Luego clona el respositorio de GitHub en tu máquina: 
    $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

  4. Con esto se crea un directorio con el nombre de tu repositorio. Copia en él todos los ficheros que tenías en el directorio que tenías con Jekyll.

  5. Comprueba que todo funciona en tu máquina local correctamente haciendo jekyll build y comprobando que no indique errores.

  6. Para subirlo a GitHub, realiza lo siguiente: 
    $ cd /ruta/de/tu/username.github.io
$ git add *
$ git commit -m "Mis cambios en la web"
$ git push

¡Y ya está! Con esto has subido tu página a uno de los mejores servidores de alojamiento web estático de la actualidad. Mira tu web en:

http://YOUR-USERNAME.github.io

Tras realizar cualquier cambio a tus ficheros en Markdown, sólo necesitas realizar los comandos del último paso, y la web se actualiza automáticamente. ¡Pruébalo!

Ornamento

“No es que pensara en resucitar a Hyde; la simple idea de hacer eso me asustaba hasta el paroxismo: no, era mi propia persona la que una vez más estaba tentada de jugar con mi conciencia; y a escondidas, como un vulgar pecador, fue como acabé cediendo a los asaltos de la tentación.”

Aquí damos por concluido este viaje por el mundo del Dr. Jekyll y Mr. Hyde, donde la dualidad de la naturaleza humana se nos muestra en un crudo semblante.

Créditos imagen: Jonathan Silva en Behance. Ornamento de Freepik.