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.

13
Queremos saber tu opinión, deja un comentario

avatar
8 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Ondiz ZarragasdadaCómo personalizar nuestro sitio Jekyll con gemasCompilación: GitHub Pages y Jekyll | Onda HostilPercaff_TI99 Recent comment authors

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  Subscribe  
más nuevo más antiguo más votado
Notificarme de
david ochobits
Administrador

Muy buen aporte Ondiz, tengo muchas ganas de probarlo. Creo que iría muy bien para contenido con referencias, datos académicos, etcétera.

RafaGCG
Suscriptor

que buena pinta tiene esto!! muchas gracias! tengo que investigar…pena de tiempo.

trackback

[…] Visitar la fuente original […]

victorhck
Lector

El plan de dominar el mundo ha empezado!!
Como primer paso Ondiz ha colonizado esta web!! 😛
muy interesante!
Tengo pendiente darle forma a una página en GitLab Pages con Jeckyll, traté de importar un theme y darle forma, pero había algo que no terminaba de chutar…

no me da la vida pa’ to’!

Enhorabuena por el artículo, y me alegro por Colaboratorio, que amplía así su plantel de “All Stars” 🙂

Percaff_TI99
Lector
Percaff_TI99

Jekyll es tal vez el referente máximo en generadores de sitios web estáticos, Pelican le sigue de cerca. La seguridad es un punto a favor en este tipo de herramientas al no necesitar de una base de datos o un servidor externo; además, garantiza velocidad, Jekyll se puede lucir en hardware de poco recursos. Yo no lo he utilizado, pero sí otro similar: Hugo, bastante popular pero no es tan potente como Jekyll. Lo único que se le hecha de menos a estas herramientas es la falta de un plugin para comentarios, se puede utilizar Disqus, sin embargo se pierde la característica de “estático”, los usuarios se suelen quejar de ello. Para mí no sería un problema, sigue siendo una herramienta excepcional.

Saludos.

trackback

[…] Cómo crear una página web sencilla con Jekyll: mi primera colaboración en el Colaboratorio en la que hablé sobre los primeros pasos en Jekyll. […]

trackback

[…] mi última aparición por estos lares montamos una página web con Jekyll. Desde entonces seguro que ya habéis investigado […]

sdada
Lector
sdada

Y como podemos hacer cuando hemos usado Jekyll-now? Yo quiero cambiar colores o ponerle un fondo a mi blog, pero si lo tengo forkeado de Jekyll-now no podré hacerlo?? Saludos!!