Jekyll, un generador de sitios web estáticos

Jekyll es un generador de sitios web estáticos. Está creado con el lenguaje de programación Ruby, es gratuito y de código abierto.

Esta aplicación permite a los usuarios enfocarse en el contenido de sus sitios web, separando éste de la estructura y el diseño. De esta forma se facilita la creación y mantenimiento de los sitios, evitando mezclar el tedioso código HTML de las páginas web con el contenido de éstas.

• Lenguaje del Contenido
• Estructura y Generación
• Administración del sitio
• Ventajas
• Usos
• Plantillas
• Anexo
  • JAMstack
  • Mi caso particular

Lenguaje del Contenido

Para la creación de contenido en Jekyll se utiliza el lenguaje Markdown, mucho menos engorroso de utilizar y más intuitivo para visualizar lo que se está escribiendo que usando código HTML.

Como ejemplo de su sencillez se muestra una misma lista escrita en ambos lenguajes.

• Lista en Markdown:

- Peras
- Manzanas
- Naranjas

• Lista en HTML:

<ul>
  <li>Peras</li>
  <li>Manzanas</li>
  <li>Naranjas</li>
</ul>

Ambas listas se visualizan así:

• Peras
• Manzanas
• Naranjas

Estructura y Generación

Por otro lado, para el diseño del sitio se utiliza el lenguaje de plantillas Liquid, con el que se formará la estructura de cada una de las páginas web.

Cuando se genera el sitio web con Jekyll, los documentos escritos en Markdown se combinan con las plantillas creadas con Liquid, obteniendo como resultado las páginas HTML (lenguaje interpretado por los navegadores) que formarán el sitio web estático.

Solamente tendremos que subir a nuestro servidor estas páginas HTML generadas junto a los documentos multimedia, ficheros CSS, JS, etc. que se vaya a utilizar.

Administración del sitio

Cuando se construye un sitio web con Jekyll, al cliente se le da la opción de ser él quien se encargue de administrarlo, editando el contenido existente o agregando nuevas páginas. Para facilitar esta labor se instala en su equipo la aplicación Jekyll con el módulo Administrador.

Así podrá acceder cómodamente a todo el contenido del sitio.

Y editar o crear nuevas páginas.

Ventajas

Velocidad

A diferencia de los generadores de páginas web dinámicas, como pueden ser Wordpress, Joomla o Drupal, Jekyll no usa ninguna base de datos, pues todo el contenido está guardado en ficheros Markdown o HTML.

Al no necesitar acceder a una base de datos para generar las páginas, los servidores que alojan las webs de Jekyll únicamente se encargan de enviar los ficheros estáticos guardados en nuestro repositorio. De esta forma se optimiza la velocidad de entrega de nuestras páginas a los navegadores que las requieren.

Los generadores de páginas web dinámicas utilizan un lenguaje de programación (PHP, ASP, Java,…) para acceder a las bases de datos y traer de ellas el contenido con el que montar dichas páginas. Este proceso ralentiza el tiempo de carga necesario para que las páginas se muestren en el navegador que las consulta. A demás, complica la configuración que se tiene que realizar en los servidores web para pasar del entorno de desarrollo al de producción.

SEO

Este apartado está ligado al anterior, pues Google valora la eficacia y velocidad de carga de la página para situarla en los primeros puestos al realizar una búsqueda.

Como prueba de ésto, puede buscar en Google jekyll generador y comprobar la posición en que aparece esta misma página (entre 730.000 resultados).

Si busca next js datos también verá que mi artículo del blog hablando al respecto aparece entre las primeras posiciones (entre 18 millones de resultados).

Precio

Otra de las ventajas de utilizar esta aplicación es el precio que cobran las empresas de hosting o alojamiento web. Éste es sustancialmente más bajo (gratuito en muchas ocasiones) en comparación con los sitios web dinámicos, pues al tener éstos que utilizar bases de datos y runtimes para generar las páginas, repercuten en el cliente el coste de mantenimiento de esas tecnologías.

Si le interesa puede consultar 11 de las mejores empresas de alojamiento de webs estáticas.

Portabilidad

Debido a que el sitio web está formado únicamente por ficheros, traspasarlo de un servicio de alojamiento a otro es una tarea muy sencilla, permitiéndonos migrar a aquel que mejor precio o condiciones nos proporcione.

Seguridad

Igualmente, al evitar las bases de datos y los formularios de inicio de sesión del usuario, se minimiza la posibilidad de hackeo del sitio web, pues esas tecnologías son la principal fuente de entrada de ataques cibernéticos.

Escalabilidad y Disponibilidad

Por último, si la web tuviera éxito y comenzara a recibir un gran número de visitas, al estar compuesta únicamente de ficheros estáticos es relativamente sencillo separar el tráfico que recibe entre diferentes CDNs (Redes de Distribución de Contenidos).

Cuando un sitio web está desplegado en un CDN, al abrir el usuario una página el sistema se encarga de enviarle los documentos necesarios desde el servidor situado geográficamente más cercano, disminuyendo de esta forma el tiempo de entrega y la carga de la red.

Comparación de un sistema tradicional y un CDN.

La nube de Amazon utiliza AWS CloudFront, que es un servicio de entrega de contenido estático distribuido por todo el planeta. Este servicio se despliega por los servidores necesarios de forma totalmente transparente al usuario.

Esta característica también permite aumentar la disponibilidad del sitio web, pues si algún servidor del CDN cayera, siempre habría otros con una copia a la que poder acceder.

Usos

Lógicamente habrá casos de uso en los que este método de creación de webs no se pueda aplicar, como son los sitios donde se requiera la creación de contenido por parte de un número grande de usuarios, o cuando se necesite que ese contenido esté disponible en tiempo real (foros, redes sociales, webs de compra-venta,…).

Para algunos casos opuestos, en los que el contenido se actualiza de forma ocasional y por parte de un único o un número reducido de usuarios, esta metodología puede aventajar a las demás. Tipos de web en las que convendría usarla podría ser los siguientes:

• Blogs personales o temáticos.
• Publicaciones de noticias, eventos, ofertas,…
• Webs corporativas.
• Comercio electrónico.
• CMS (Sistemas de Gestión de Contenido), utilizando por ejemplo Strapi.

Plantillas

Existen diversos sitios web en los que se comparten plantillas de páginas prediseñadas y adaptadas a la metodología de Jekyll. Muchos diseños son gratuitos y otros es necesario pagar para obtenerlos (no más de 50€). También se puede utilizar plantillas prediseñadas que, aunque no estén adaptadas a Jekyll, es posible prepararlas para poderlas utilizar con este generador.

Tenemos la posibilidad de migrar sitios Wordpress a Jekyll (en inglés), aunque este método no es completamente automático y requerirá de algunos cambios por parte del webmaster.

Algunas webs con plantillas prediseñadas:

• https://jekyllthemes.io
• https://jekyll-themes.com
• https://jamstackthemes.dev/ssg/jekyll
• https://github.com/topics/jekyll-theme
• https://bootstrapmade.com/ (No adaptadas a Jekyll)
• https://html5up.net/ (No adaptadas a Jekyll)

Seguidamente expongo algunos ejemplos de plantillas. Si pulsa sobre la imagen se abrirá la web con la demo para comprobar cómo se muestra en el dispositivo usado.

Todas las plantillas disponibles son responsive, es decir, se adaptan automáticamente al tamaño y forma de pantalla del dispositivo con el que se abren (monitor de PC, smartphone, tableta, etc).

Anexo

JAMstack

Jekyll, usado junto a un Headless CMS como pueda ser Strapi, implementa la relativamente novedosa filosofía de creación de webs JAMstack(Unión de Javascript, APIs y Markup).

A diferencia de un CMS tradicional (Wordpress), que lleva unido tanto el gestor de la API como las tecnologías usadas para la generación de las páginas web, un Headless CMS únicamente gestiona la API. De este modo se separa la gestión del contenido (que es servido por la API) y la generación del sitio web, pudiendo elegir así el que más nos convenga para ambas partes.

Jekyll no es el único generador de sitios web estáticos. En la web Jamstack.org puede consultar otros generadores con bastante éxito entre los desarrolladores.

Las características de JAMstack son las mismas que anteriormente se han descrito para Jekyll, añadiendo esta vez un administrador externo (Strapi p.e.) que gestione el contenido apoyándose en una base de datos. De esta forma se flexibiliza la gestión del contenido, permitiendo que varios usuarios, con diferentes roles si se desea, creen o editen el contenido de la web.

Una vez realizados los cambios en el contenido, un usuario con permisos lanzará Jekyll, que previamente se habrá configurado para que se conecte a la API de Strapi, y generará el sitio web estático. Por último sólo quedará subir el sitio web al servidor donde se aloje.

He creado esta página web demo que tiene habilitado un Panel de Control con el que poder comprobar el funcionamiento de Jekyll en combinación con Strapi. Si está interesado en recibir más información puede enviarme un mensaje mediante el formulario de contacto.

Mi caso particular

Este mismo sitio web está desarrollado y administrado con Jekyll. Para su diseño utilicé la plantilla Hyde, que me pareció elegante a la vez que funcional para construir una web personal con blog.

Para alojarla al principio usé GitHub Pages, servicio gratuito y preparado para desplegar fácilmente sitios creados con Jekyll. Después creé una cuenta en la nube de Amazon, aprendí a usar algunos de sus innumerables servicios y adquirí el actual dominio.

Actualmente se aloja en el servicio de almacenamiento de la nube de Amazon, AWS S3, y se distribuye mediante AWS CloudFront, permitiendo así unos tiempos de carga en el navegador mínimos y una experiencia de usuario espero que satisfactoria.