Jekyll: el generador de webs estáticas que se aloja en GitHub

Para muchos, WordPress es la primera idea que les viene a la cabeza al crear un nuevo blog o una página corporativa sencilla. No en vano, el popular sistema de gestión de contenidos está considerado desde hace tiempo una herramienta fiable tanto para legos como para profesionales. No obstante, y debido a la evolución que lo ha convertido en un potente sistema todoterreno, se dan situaciones en que WordPress, con sus múltiples funciones, excede las propias necesidades de los desarrolladores. Esta es la problemática que algunas opciones alternativas más ligeras, como el programa Jekyll, han querido resolver. Reducido a los componentes esenciales, este generador de páginas web permite administrar páginas web sin necesidad de una base de datos o un software especial.

Nacimiento y desarrollo de Jekyll

Tom Preston-Werner, uno de los cuatro fundadores de la plataforma GitHub, publicó en noviembre de 2008 el generador de páginas web Jekyll bajo una licencia de código abierto MIT. Escrito en Ruby, el programa recurre para su funcionamiento a un directorio de plantillas que contiene un conjunto de archivos de texto estructurados y estáticos en diversos formatos, los llamados markdowns, que son los que determinan tanto el diseño como el contenido del proyecto y pueden, por ello, personalizarse. Sin embargo, el programa no ofrece un editor WYSIWYG como sí hacen otros programas (WordPress, Drupal, etc.), sino que requiere trabajar con líneas de código. Para ello puede ser útil el editor de contenidos Prose, ya que simplifica la edición en lenguaje markdown y está optimizado para Jekyll.

Antes de incorporar los cambios realizados en el código a la versión en línea de la aplicación web, pueden comprobarse con ayuda del propio servidor de desarrollo de Jekyll. La conversión de los archivos de texto en una página web estática que pueda servirse con cualquiera de los servidores web habituales es tarea del motor de renderizado Liquid, que genera en un segundo plano el código HTML cada vez que los archivos se modifican.

Para poder utilizar Jekyll, el usuario tiene dos opciones: descargar el software alojarlo en su propio equipo, o alojarlo en GitHub Pages, una alternativa de gran utilidad ya que el servidor de GitHub no solo se hace cargo del renderizado de HTML, sino también del mismo alojamiento del proyecto. De hecho, este servicio gratuito de alojamiento de páginas-proyecto, blogs o webs en los servidores de GitHub está basado precisamente en Jekyll.

Ventajas y desventajas de Jekyll

Utilizar Jekyll para blogs o cualquier otro tipo de webs estáticas representa una opción alternativa a los CMS o site generators más conocidos que bien cabe considerar. Una de sus mayores ventajas es la simplicidad que caracteriza tanto al trabajo en sí con el programa como al proyecto final. Como funciona sin base de datos no hay que ocuparse de su instalación y configuración. Asimismo, no es necesario acceder a la base de datos, lo que sí se requiere para el buen funcionamiento de las páginas dinámicas, con lo que la página se carga más rápidamente. La sencillez del código que caracteriza a los Jekyll themes, reducido a las funciones y características más importantes, también contribuye a su buen rendimiento y hace que los proyectos sean muy fáciles de desarrollar y mantener.

Jekyll también convence en cuestiones de estabilidad y seguridad, pues como el servidor web solo entrega archivos de texto, la probabilidad de error en estas páginas es mucho más reducida que en páginas que funcionan por la combinación de varios componentes diferentes. El código no necesita actualizarse regularmente y esta solidez es la que garantiza la elevada disponibilidad de la página a largo plazo. Jekyll tampoco presenta las vulnerabilidades derivadas de las bases de datos y de los scripts con elementos dinámicos (PHP, JavaScript) porque no los necesita, superando así en seguridad a otras opciones.

Por otro lado, mientras que su simplificada programación no supone un gran obstáculo para los profesionales, es probable que los menos habituados a trastear con código se vean ante algunas dificultades. La versión estándar de Jekyll no cuenta con interfaz gráfica, lo que significa que su instalación y configuración se lleva a cabo en la consola de comandos. Así, si no se tienen los conocimientos requeridos será necesario recurrir a la interfaz de usuario de otro programa. También en lo que respecta a la diversidad de temas se encuentra Jekyll en desventaja frente a otros CMS o herramientas de desarrollo web, para las cuales suelen existir cientos o incluso miles de plantillas de diseño. Lo mismo puede decirse de la asistencia, más bien simbólica dado el reducido tamaño de su comunidad y su escasa popularidad.

La tabla que sigue presenta las principales ventajas y desventajas de Jekyll:

Ventajas Desventajas  
La web final se carga rápido Sin interfaz gráfica de usuario por defecto  
No es necesario instalar y mantener una base de datos y un CMS Tarda mucho en compilar los archivos  
Casi no tiene vulnerabilidades Reducido número de temas y plugins disponibles  
No necesita actualizarse regularmente Comunidad pequeña  
Gran margen de maniobra en la programación (puede elegirse libremente la GUI y el editor) No incluye ningún programa de edición de imagen  
No depende de ciertos formatos o herramientas extra No soporta los scripts del lado del servidor (p.ej., para formularios)  
Alojamiento propio o en los servidores de GitHub (gratis)    
Cuenta con un servidor de desarrollo propio    

Jekyll y GitHub: la simbiosis perfecta

En el ámbito del desarrollo web, GitHub ha logrado hacerse con una sólida posición, porque simplifica considerablemente la gestión de proyectos y la publicación de códigos, sobre todo cuando están implicados diferentes programadores. En la actualidad la aplicación web, basada en el software libre Git desarrollado por Linus Thorvald y su equipo, cuenta con más de 24 millones de usuarios. El creador de Linux publicó este programa de gestión de versiones en 2005 como alternativa a BitKeeper (propietario). GitHub lo utiliza para poder gestionar códigos libres en sus servidores que están almacenados en directorios independientes.

En la plataforma, cuando un desarrollador quiere trabajar en un proyecto alojado en ella, crea un fork (bifurcación) del mismo. Al finalizar, el autor del fork envía una petición (pull request) al propietario del original para que decida si los cambios realizados en el fork se añaden al código original o no.

Con GitHub Pages, la plataforma provee un servicio opcional de alojamiento de archivos, como si fuera una página web, en los servidores de GitHub, con la peculiaridad de que la base de código la proporciona Jekyll. Blogs o páginas web: cualquier proyecto se crea con la misma facilidad y, mejor aún, se aloja de forma gratuita. GitHub Pages actúa entonces como un sencillo CMS que permite, entre otras cosas, seleccionar un tema y utilizar el editor propio de la plataforma para escribir el contenido. Guardar localmente el repositorio de GitHub requiere clonarlo, proceso posible desde la consola o con un cliente de escritorio (disponible para Windows y macOS).

¿Qué diferencia a Jekyll de otros generadores?

El factor que más aleja a Jekyll de los CMS estándar ya se ha mencionado: con el generador se pueden crear páginas que funcionan sin base de datos. Lógicamente, como contrapartida, no permite integrar elementos dinámicos, de ahí que con Jekyll solo puedan crearse páginas estáticas.

Hay también algunos CMS sin base de datos que también están concebidos exclusivamente para proyectos del lado del cliente, pero son mucho más complejos que Jekyll. Con características como backends, gestión de usuarios y numerosas extensiones, estos programas ofrecen un mayor confort, pero es esto mismo lo que los hace más vulnerables a fallos y problemas de seguridad.

Si lo comparamos con otros generadores de páginas estáticas como Hugo o Middleman, Jekyll les supera sobre todo por las ventajas resultantes de su vínculo con GitHub, como son el control de versiones con Git o el servicio de alojamiento gratuito.

Jekyll: tutorial para crear una web con GitHub Pages

En GitHub, cada usuario (o cada empresa) puede crear una página web por cuenta, si bien cada web puede contener un número ilimitado de subpáginas. El tamaño de los proyectos se limita a un gigabyte, lo que, debido a la ausencia de elementos dinámicos, es suficiente, del mismo modo que el límite mensual de ancho de banda de 100 gigabytes es también generoso para operar un blog o una página sencilla. Si, aun así, el proyecto necesita más recursos, cabe la posibilidad de dirigirse a la comunidad para elaborar una solución personalizada empleando una CDN, por ejemplo.

Si hemos despertado tu curiosidad, aprende paso a paso en el siguiente tutorial cómo puedes utilizar Jekyll en GitHub Pages.

Primer paso: crea una cuenta en GitHub

Para trabajar en GitHub Pages es necesario tener una cuenta en la plataforma principal. Si no la tienes, este sería el primer paso. Abre la página de GitHub e introduce una dirección electrónica válida, un nombre de usuario y una contraseña.

A continuación selecciona el plan, bien la variante gratuita, con un número ilimitado de ficheros públicos, o la de pago, con un número ilimitado de directorios privados (la gratuita es suficiente para nuestros fines). Opcionalmente puedes indicar tus conocimientos en programación o tus intereses. Cuando recibas el correo de confirmación de GitHub pulsa el enlace para activar tu cuenta.

Segundo paso: crea un repositorio para el proyecto

Ahora que tienes una cuenta puedes entrar en GitHub. En el panel de usuario aparece la vista general de la lista de directorios, si bien al comienzo no contiene ninguna información. Lo primero que vamos a hacer es crear un nuevo repositorio, que es el que permitirá utilizar GitHub Pages.

Clica en el signo aritmético de + en la barra de la parte superior y selecciona “New Repository” (Nuevo repositorio). A la hora de renombrarlo es importante que sigas el esquema “nombredeusuario.github.io” porque en caso contrario no será posible convertirlo más tarde en el directorio de tu página web.

Tercer paso: selecciona un tema de Jekyll

Una vez creado, puedes acceder al repositorio en cualquier momento desde el menú de inicio haciendo clic en “Repositories”. Este fichero es un directorio de proyecto normal y corriente. Para transformarlo en tu repositorio web, navega hacia la sección de GitHub Pages y selecciona un Jekyll theme. Para ello abre el directorio y seguidamente los ajustes en “Settings”.

Si te desplazas hacia abajo encuentras el apartado “GitHub Pages”. Pinchando en “Choose a theme” (Escoge un tema), se abre el gestor de Jekyll templates, donde puedes optar por uno de los 12 temas disponibles. Haciendo clic en “Select theme” confirmas tu selección.

Cuarto paso: publica tu primera página

Al escoger el tema se crean automáticamente el archivo de configuración (config.yml) y la página de inicio (index.md), que constituye la vista previa del tema seleccionado, de ahí que ya tenga el formato markdown. Tanto esta página como el archivo de configuración se editan pulsando en el símbolo del lápiz de cada archivo.

Para incluir tu propio texto debes borrar primero el código existente. Hecho esto, ya puedes incluir un saludo personal para tu página web, por ejemplo:

## ¡Bienvenido a mi página web!

Confirma el mensaje que has escrito clicando en “Commit changes” (confirma los cambios). Ahora puedes abrir tu página de inicio siempre que quieras utilizando el nombre del repositorio que seleccionaste en el segundo paso y que constituye también el URL de tu página web.

Nota

Si lo que quieres es jugar con la herramienta, nada impide que utilices el código predeterminado, pero tu página de inicio será entonces idéntica a la página de muestra del tema.

Quinto paso: escribe tu contenido

Si hasta ahora todo ha funcionado correctamente, ya puedes comenzar a diseñar tu proyecto. En la tecla “Create new file” (crea nuevo archivo) puedes crear todos los archivos que necesitas, como las hojas de CSS o los códigos de JavaScript. De esta forma es también como se crean las subpáginas del proyecto. En “Upload files” también es posible cargar los archivos desde tu equipo, bien seleccionando el lugar donde están guardados o arrastrándolos desde la carpeta en que se encuentren.

Sexto paso: descarga un cliente de escritorio

Si bien es perfectamente posible administrar una página Jekyll en la interfaz web de GitHub, con el cliente de escritorio para Windows y macOS que hemos mencionado anteriormente dispones también de una solución offline. Para instalarlo, pulsa en el botón del repositorio “Set up in Desktop” (inicia en escritorio), que te lleva a la página de descarga.

Séptimo y último paso: cómo clonar un repositorio

Después de descargar e instalar el programa cliente puedes utilizarlo para crear una copia local de la página, entre otras cosas. Para ello, selecciona el punto “Clone a repository” (clona un repositorio) en el menú de inicio, donde indicas qué repositorio se debe clonar. En “Local path” (ruta local) defines en qué carpeta de tu equipo se va a guardar.

Documentación adicional sobre Jekyll

Este manual demuestra que crear y hospedar una web en GitHub Pages es un proceso bastante simple, pero pueden surgir problemas. En este caso puedes dirigirte al equipo de asistencia de la plataforma o incluso consultar los diferentes manuales que se ponen a disposición de los usuarios, así como a la vasta colección de preguntas frecuentes, donde puedes encontrar información sobre el uso del control de versiones, el lenguaje markdown, la edición de código, etc. La oferta se ve completada por un robusto arsenal de vídeos en su propio canal de YouTube.

En los casos en que se prefiera utilizar Jekyll sin GitHub puede recurrirse al tutorial en tres partes de Arachne Tutorials en YouTube, con el cual aprendes no solo a instalar y configurar el generador y publicar una primera página, sino también cómo se estructura.