Cómo crear una página web sencilla con Jekyll

En mi primera colaboración con el Colaboratorio os voy a hablar de algo con lo que he estado jugando últimamente y que permite que alguien como yo, sin conocimiento alguno de HTML o CSS, pueda montar una página web desde cero en cuestión de un par de horas: el generador de sitios estáticos Jekyll.

¿Qué es Jekyll?

Jekyll es un generador de sitios estáticos simple, escrito en Ruby y que se distribuye con licencia libre. Es especialmente conocido por ser la herramienta que GitHub Pages utiliza a la hora de crear sus páginas.

Yo, desde mi punto de vista ajeno a los entresijos de Internet, le veo las siguientes ventajas:

• Nos permite escribir en Markdown o Textile, lenguajes de marcado que se aprenden en 10 minutos.
• Utiliza plantillas Liquid, que permiten crear una lista de artículos o una barra de navegación fácilmente.
• Podemos crear y ver nuestra página localmente.
• Es lo que ellos denominan blog-aware, nos da facilidades para crear un blog a nuestro gusto.
• Combinándolo con servicios como GitLab Pages o GitHub Pages podemos tener una página de proyecto en el mismo repositorio que el código, con la ventaja añadida de que la página estará bajo control de versiones.

Instalación y uso

Veamos ahora, entonces, cómo lo ponemos en marcha. Como es una gema de Ruby, lo más fácil es instalarlo directamente con gem:

gem install jekyll

Si tenéis algún problema o necesitáis más información podéis acudir a la documentación sobre la instalación.

Ahora podemos seguir dos caminos:

Opción 1: Decirle a Jekyll que nos instale un blog de ejemplo

Es una buena opción para tener algo listo rápidamente. Para ello seguimos los siguientes pasos:

# Instalar bundler
gem install bundler

# Crear una página con Jekyll en ./ejemplo
jekyll new ejemplo

# Entrar en la carpeta de la página
cd ejemplo

# Crear la web en localhost:4000
bundle exec jekyll serve

Nos creará algo con esta pinta:

Podemos modificar los archivos y la página se irá actualizando en concordancia.

Opción 2: Montarnos nosotros el sistema de archivos y carpetas

No dejan de ser dos carpetas y tres archivos y, aunque no nos va a quedar de inicio tan bonito, nos ayudará a aprender. En este segundo caso, podemos crear la página web localmente de dos maneras:

• jekyll build: nos creará en la carpeta _site/ (o donde le digamos con la opción --destination) todos los archivos HTML correspondientes
• jekyll serve: nos mostrará la página resultante en localhost:4000 y actualizará la página automáticamente cuando realicemos algún cambio.

Ejemplo de uso: un blog desde cero

Voy a suponer que queréis crear un blog desde cero y os voy a contar qué archivos necesitamos y cómo los tenemos que ordenar. La contrapartida de que podamos crear una página fácilmente es que Jekyll es bastante maniático con la estructura. En esta imagen podemos ver la estructura completa de una página web creada con Jekyll:

Para el caso más sencillo necesitaremos el archivo index.html o index.md, la carpeta _posts/ y la carpeta _layouts/. El resto de archivos y carpetas, como el archivo de configuración _config.yaml o la carpeta de borradores _drafts/, aunque útiles, no son obligatorios, así que los dejamos a un lado de momento.

El archivo index.html o index.md

Será la página de inicio de nuestro blog. Debe llevar al inicio un bloque YAML donde se indique el estilo de la página y el resto de variables necesarias. Por ejemplo, en este bloque YAML se le indica a Jekyll que use el estilo default y que el título de la página es Inicio:

---
 layout: default
 title: Inicio
 ---

La carpeta _posts/

Aquí guardaremos los artículos que vayamos escribiendo. Si queremos aprovechar los trucos de Jekyll, les pondremos como nombre de archivo la fecha de publicación seguida del nombre, es decir, seguiremos la estructura AAAA-MM-DD-nombre.ext. Dependiendo del lenguaje de marcado que estemos utilizando, la extensión puede ser o bien md o markdown, html o textile.

Al igual que la página de inicio, los artículos tienen dos bloques diferenciados, un bloque YAML superior en el que se definen variables, seguido del contenido propiamente dicho.

La carpeta _layouts/

Esta carpeta contiene los diferentes estilos de las páginas, por ejemplo, un estilo general y uno específico para los artículos. Estos estilos son lo único que tiene que estar escrito en HTML.

Para los que, como yo, no sepáis HTML, el estilo más simple podría llamarse default.html y parecerse al trocito de código que muestro debajo. Se usa la variable {{ content }} para indicar el punto en el que Jekyll debe insertar el contenido y {{ page.title }} para hacer referencia al título de la página (sorprendentemente).

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
   </head>
   <body>
    {{ content }}
   </body>
</html>

Podemos, por supuesto, enlazar un CSS o complicar esto tanto como queramos (o sepamos).

Espero que todo esto os resulte útil. Como se aprende mejor haciendo que leyendo, os dejo con una lista de páginas creadas con Jekyll para que investiguéis en el código y con una página de prueba que creé yo misma en un rato para probar diferentes funcionalidades.

Las imágenes han sido extraídas de la documentación de Jekyll, que tiene licencia MIT. Para el caso de la página de ejemplo se ha generado siguiendo los pasos mostrados.