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

Tom Preston-Werner, uno de los cuatro fu­n­da­do­res de la pla­ta­fo­r­ma 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 fu­n­cio­na­mie­n­to a un di­re­c­to­rio de pla­n­ti­llas que contiene un conjunto de archivos de texto es­tru­c­tu­ra­dos y estáticos en diversos formatos, los llamados markdowns, que son los que de­te­r­mi­nan tanto el diseño como el contenido del proyecto y pueden, por ello, pe­r­so­na­li­zar­se. Sin embargo, el programa no ofrece un editor WYSIWYG, sino que requiere trabajar con líneas de código. Para ello, se re­co­mie­n­da el editor de co­n­te­ni­dos Prose, ya que si­m­pli­fi­ca la edición en lenguaje markdown y está op­ti­mi­za­do para Jekyll.

Antes de in­co­r­po­rar los cambios rea­li­za­dos en el código a la versión en línea de la apli­ca­ción web, pueden co­m­pro­bar­se con ayuda del propio servidor de de­sa­rro­llo de Jekyll. La co­n­ve­r­sión de los archivos de texto en una página web estática que pueda servirse con cua­l­quie­ra de los se­r­vi­do­res web ha­bi­tua­les es tarea del motor de re­n­de­ri­za­do 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 ela­bo­ra­dos:

U

Utilizar Jekyll para blogs o cualquier otro tipo de webs estáticas re­pre­se­n­ta una opción al­te­r­na­ti­va a los CMS o site ge­ne­ra­to­rs más conocidos que bien cabe co­n­si­de­rar. Una de sus mayores ventajas es la si­m­pli­ci­dad que ca­ra­c­te­ri­za tanto al trabajo en sí con el programa como al proyecto final. Como funciona sin base de datos no hay que ocuparse de su in­s­ta­la­ción y co­n­fi­gu­ra­ción. Asimismo, no es necesario acceder a la base de datos, lo que sí se requiere para el buen fu­n­cio­na­mie­n­to de las páginas dinámicas, con lo que la página se carga más rá­pi­da­me­n­te. La sencillez del código que ca­ra­c­te­ri­za a los Jekyll themes, reducido a las funciones y ca­ra­c­te­rí­s­ti­cas más im­po­r­ta­n­tes, también co­n­tri­bu­ye a su buen re­n­di­mie­n­to y hace que los proyectos sean muy fáciles de de­sa­rro­llar y mantener. Además, en co­m­pa­ra­ción con los CMS clásicos, Jekyll genera marcas ex­tra­di­ta­bles di­re­c­ta­me­n­te después de un cambio y no solo cuando un usuario accede a la página.

Jekyll también convence en cue­s­tio­nes de es­ta­bi­li­dad y seguridad, pues como el servidor web solo entrega archivos de texto, la pro­ba­bi­li­dad de error en estas páginas es mucho más reducida que en páginas que funcionan por la co­m­bi­na­ción de varios co­m­po­ne­n­tes di­fe­re­n­tes. El código no necesita ac­tua­li­zar­se re­gu­la­r­me­n­te y esta solidez es la que garantiza la elevada di­s­po­ni­bi­li­dad de la página a largo plazo. Jekyll tampoco presenta las vu­l­ne­ra­bi­li­da­des derivadas de las bases de datos y de los scripts con elementos dinámicos (PHP, Ja­va­S­cri­pt) porque no los necesita, superando así en seguridad a otras opciones.

Por otro lado, mientras que su si­m­pli­fi­ca­da pro­gra­ma­ción no supone un gran obstáculo para los pro­fe­sio­na­les, es probable que los menos ha­bi­tua­dos a trabajar con código se vean ante algunas di­fi­cu­l­ta­des. La versión estándar de Jekyll no cuenta con interfaz gráfica, lo que significa que su in­s­ta­la­ción y co­n­fi­gu­ra­ción se lleva a cabo en la consola de comandos. También en lo que respecta a la di­ve­r­si­dad de temas se encuentra Jekyll en de­s­ve­n­ta­ja frente a otros CMS o he­rra­mie­n­tas de de­sa­rro­llo web, para las cuales suelen existir cientos o incluso miles de pla­n­ti­llas de diseño. Lo mismo puede decirse de la asi­s­te­n­cia, más bien simbólica dado el reducido tamaño de su comunidad y su escasa po­pu­la­ri­dad.

La tabla que sigue presenta las pri­n­ci­pa­les ventajas y de­s­ve­n­ta­jas 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 ele­c­tró­ni­ca válida, un nombre de usuario y una co­n­tra­se­ña.

A co­n­ti­nua­ción, se­le­c­cio­na 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 di­re­c­to­rios privados (la gratuita es su­fi­cie­n­te para nuestros fines). Op­cio­na­l­me­n­te puedes indicar tus co­no­ci­mie­n­tos en pro­gra­ma­ción o tus intereses. Cuando recibas el correo de co­n­fi­r­ma­ció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 di­re­c­to­rios, si bien al comienzo no contiene ninguna in­fo­r­ma­ción. Lo primero que vamos a hacer es crear un nuevo re­po­si­to­rio.

Clica en el signo ari­t­mé­ti­co de + en la barra de la parte superior y se­le­c­cio­na “New Re­po­si­to­ry” (Nuevo re­po­si­to­rio).

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 re­po­si­to­rio de GitHub. A co­n­ti­nua­ción, se­le­c­cio­na Jekyll en los ajustes de co­n­fi­gu­ra­ció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 au­to­má­ti­ca­me­n­te el archivo de co­n­fi­gu­ra­ción (config.yml) y la página de inicio (index.md), que co­n­s­ti­tu­ye la vista previa del tema se­le­c­cio­na­do, de ahí que ya tenga el formato markdown. Tanto esta página como el archivo de co­n­fi­gu­ra­ción se editan pulsando en el símbolo del lápiz de cada archivo.

Si hasta ahora todo ha fu­n­cio­na­do co­rre­c­ta­me­n­te, 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 Ja­va­S­cri­pt. De esta forma es también como se crean las su­b­pá­gi­nas del proyecto. En “Upload files” también es posible cargar los archivos desde tu equipo, bien se­le­c­cio­na­n­do el lugar donde están guardados o arra­s­trá­n­do­los desde la carpeta en que se en­cue­n­tren.

Cliente de es­cri­to­rio

Si bien es pe­r­fe­c­ta­me­n­te posible ad­mi­ni­s­trar una página Jekyll en la interfaz web de GitHub, con el cliente de es­cri­to­rio para Windows y macOS que hemos me­n­cio­na­do an­te­rio­r­me­n­te dispones también de una solución offline. Para in­s­ta­lar­lo, pulsa en el botón del re­po­si­to­rio “Set up in Desktop” (inicia en es­cri­to­rio), que te lleva a la página de descarga.

Después de descargar e instalar el programa cliente puedes uti­li­zar­lo para crear una copia local de la página, por ejemplo. Para ello, se­le­c­cio­na el punto “Clone a re­po­si­to­ry” (clona un re­po­si­to­rio) en el menú de inicio, donde indicas qué re­po­si­to­rio se debe clonar. En “Local path” (ruta local) defines en qué carpeta de tu equipo se va a guardar.

A través del re­po­si­to­rio puedes acceder a di­fe­re­n­tes ramas in­di­vi­dua­les del proyecto web, que permiten a los pro­gra­ma­do­res trabajar en el código de forma si­mu­l­tá­nea o por separado en áreas de de­sa­rro­llo que ya están de­te­r­mi­na­das. IONOS Deploy Now organiza las ramas in­di­vi­dua­les del re­po­si­to­rio clonado en un esquema y, en cuanto se crea una nueva rama, la despliega de forma au­to­má­ti­ca. De esta manera, puedes controlar no solo tu proyecto en línea, sino también el progreso de las distintas ramas de de­sa­rro­llo.