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

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, sino que requiere trabajar con líneas de código. Para ello, se recomienda 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.

Así puedes crear una página web con Jekyll de forma rápida y sencilla:

Sin embargo, también se puede utilizar para diseñar gráficos más elaborados:

U

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. Además, en comparación con los CMS clásicos, Jekyll genera marcas extraditables directamente después de un cambio y no solo cuando un usuario accede a la página.

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 trabajar 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. 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:

En primer lugar, es necesario tener una cuenta de usuario en GitHub. Para ello, abre la página web 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.

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.

Clica en el signo aritmético de + en la barra de la parte superior y selecciona “New Repository” (Nuevo repositorio).

Si todavía no tienes una cuenta de Deploy Now, puedes crear una gratis. Después del registro de cuenta, crea un nuevo proyecto y establece una conexión a tu repositorio de GitHub. A continuación, selecciona Jekyll en los ajustes de configuración. Este proceso no tarda mucho tiempo y, por tanto, puedes empezar a crear el contenido de tu página web.

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.

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.

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.

Después de descargar e instalar el programa cliente puedes utilizarlo para crear una copia local de la página, por ejemplo. 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.

A través del repositorio puedes acceder a diferentes ramas individuales del proyecto web, que permiten a los programadores trabajar en el código de forma simultánea o por separado en áreas de desarrollo que ya están determinadas. IONOS Deploy Now organiza las ramas individuales del repositorio clonado en un esquema y, en cuanto se crea una nueva rama, la despliega de forma automática. De esta manera, puedes controlar no solo tu proyecto en línea, sino también el progreso de las distintas ramas de desarrollo.