Cómo crear un sitio web estático con Jekyll

En este artículo vamos a explicar cómo crear un sitio web estático usando una pieza de software muy interesante llamada Jekyll, un generador de sitios web estáticos.

Un sitio web estático es una colección de páginas web escritas a mano o generadas por un programa de software, cuyo contenido y funcionalidad solo puede ser cambiada al editar directamente los archivos HTML.

Este tipo de sitios web no tienen acceso a una base de datos, por lo que no pueden almacenar ni consultar información para actualizar o personalizar el contenido de las páginas web de forma dinámica.

Ventajas de las páginas web estáticas

En primer lugar, no requieren un servicio de hosting sofisticado (con soporte para PHP, Python o Ruby), debido a que el sitio está compuesto simplemente de archivos HTML, CSS y JavaScript.

La velocidad de carga es mayor por el simple hecho de no tener que consultar la información desde una base de datos. Esto también hace que el sitio sea menos vulnerable a ataques cibernéticos ya que no hay datos almacenados en línea.

Como resultado, se puede ahorrar considerablemente en costos de hosting ya que solo se necesitará el servicio de almacenamiento de archivos y transferencia de datos. Si se utilizan servicios como Github Pages, ¡el costo del hosting puede reducirse a cero!

Desventajas de las páginas web estáticas

No es posible crear o editar las páginas con un editor en línea, como en el caso de Wordpress. Para crear una página estática es necesario crear un archivo HTML y agregar el contenido usando código HTML.

En algunos casos, es posible crear páginas web estáticas usando archivos Markdown y algunas plantillas HTML. Esto es cierto para algunos generadores de sitios web estáticos como Jekyll.

No es posible tener usuarios. La creación de las páginas y del contenido estarán limitadas a las personas que tengan acceso a los archivos HTML y que tengan el suficiente conocimiento técnico para crear y publicar las páginas.

En conclusión…

A pesar de las desventajas, los sitios web estáticos son una excelente opción para los dueños de blogs y sitios de contenido pequeños o medianos que están buscando alternativas a sistemas como Joomla, Wordpress o Drupal; que desean ahorrar en costos de hosting o que desean reducir la vulnerabilidad de un sitio web a ataques cibernéticos.

A continuación vamos a entrar en materia, explicando detalladamente cómo crear un sitio web estático con Jekyll.

Instalando Jekyll

Para continuar, es necesario tener Ruby instalado en nuestra computadora.

Para comenzar debemos instalar Jekyll en nuestra computadora. Para esto vamos a ejecutar la siguiente instrucción en la terminal:

$ gem install jekyll bundler

La instrucción anterior instalará Jekyll, así como la librería Bundler que sirve para facilitar la instalación de librerías adicionales que pudiésemos necesitar a la hora de crear las páginas web estáticas.

Creando un nuevo sitio web estático

Para crear un nuevo sitio web estático, ejecutamos el siguiente comando en la terminal:

$ jekyll new jekyll-site

Al ejecutarlo, Jekyll creará un directorio llamado jekyll-site con la siguiente estructura:

jekyll-site/
  _posts/
    2016-11-28-welcome-to-jekyll.markdown
  _config.yml
  about.md
  Gemfile
  index.md

Debido a que Jekyll es principalmente un generador de blogs, en el directorio _posts/ almacenaremos todos los artículos que deben aparecer en orden cronológico. Como podemos ver, Jekyll ya ha generado un artículo de ejemplo.

El archivo _config.yml sirve para editar las configuraciones por defecto de Jekyll. Con él podemos controlar la forma en la que Jekyll debe generar los artículos y las páginas web estáticas.

El archivo Gemfile permite definir las dependencias o librerías de Ruby adicionales que podamos llegar a necesitar al momento de crear el sitio web. Este archivo es similar al archivo requirements.txt en Python o al archivo packages.json en el ambiente JavaScript.

Finalmente, los archivos con extensión .md o .markdown son los que componen el contenido de las páginas y artículos del sitio web estático. Jekyll los transformará a código HTML en el proceso de compilación.

Adicionalmente, se instalarán algunas librerías adicionales como son el tema minima y una librería para la generación de feeds RSS.

Un tema es un conjunto de plantillas HTML, archivos CSS y JavaScript que definen la apariencia de un sitio Jekyll.

Por último, vamos a generar el sitio. Para esto, ejecutamos las siguientes instrucciones en la terminal:

$ cd jekyll-site/
$ bundle exec jekyll serve

Con lo cual podemos ver el sitio generado en un navegador web, accediendo a la dirección http://localhost:4000/:

Agregando artículos al sitio web estático

Para agregar artículos al sitio web estático que acabamos de generar, vamos a crear un nuevo archivo en el directorio _posts/ y lo vamos a nombrar teniendo en cuenta el patrón YYYY-MM-DD-nombre-del-archivo.markdown:

jekyll-site/
  _posts/
    2016-11-28-bienvenido-a-jekyll.markdown

El nombre debe contener el año, mes y día de creación para que Jekyll pueda generar y organizar el artículo de manera apropiada.

A continuación, vamos a agregar una sección especial al inicio del archivo llamada Front Matter. Esta sección contiene variables de configuración e información que podemos utilizar en el cuerpo del artículo al momento de generarlo.

---
layout: post
title: ¡Bienvenido a Jekyll!
date: 2016-11-28 10:44:50 -0500 -0500
categories: jekyll update español
---

El texto dentro del Front Matter debe escribirse en formato YAML.

La variable layout sirve para definir el tipo de plantilla que debe usarse para generar el artículo. Estos layouts se encuentran definidos en el tema instalado anteriormente.

La variable title contiene el título del artículo y se mostrará en el HTML generado como un heading de nivel uno <h1>.

A pesar que la fecha de creación del artículo ya ha sido definida en el nombre del archivo, la variable date sirve para agregar detalles adicionales como la hora y la zona horaria.

La variable categories permite definir las categorías a las que pertenece el artículo. Con esta información, Jekyll puede organizar automáticamente las páginas por categoría.

También se puede utilizar la variable category en lugar de categories para cuando se desee definir una única categoría. Si adicionalmente deseamos organizar los artículos por etiquetas, podemos hacer uso de la variable tags.

Si deseamos incluir el nombre del autor, podemos utilizar la variable author. Si son varios autores, entonces podemos usar la variable authors.

Finalmente podemos agregar el contenido del artículo enseguida del Front Matter:

Usted encontrará este artículo en el directorio `_posts`. Adelante, editelo y
re-compile el sitio para ver sus cambios. Usted puede re-compilar el sitio de
diferentes maneras, pero la más común es ejecutando `jekyll serve`, el cual
inicia un servidor web y regenera el sitio cuando un archivo es actualizado.

Para crear artículos nuevos, simplemente agregue un archivo en el directorio
`_posts` de manera que siga esta convención `YYYY-MM-DD-nombre-del-artículo.ext`
e incluya la información necesaria en el _front matter_. Déle un vistazo al
código fuente para este artículo para tener una idea de cómo funciona.

Jekyll también ofrece soporte para _snippets_ de código:

{% highlight ruby %}
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}

Revise la [documentación de Jekyll][jekyll-docs] para mayor información sobre
como sacar el máximo provecho de Jekyll. Reporte todos los _bugs_ a [Jekyll en
GitHub][jekyll-gh]. Si tiene preguntas, puede discutirlas en [Jekyll
Talk][jekyll-talk].

[jekyll-docs]: http://jekyllrb.com/docs/home
[jekyll-gh]:   https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/

El cuerpo del artículo debe estar escrito en formato Markdown. Al guardar el archivo, Jekyll detectará los cambios y hará que el servidor local se recargue automáticamente.

Adicionalmente, podemos apreciar unas etiquetas especiales: {% highlight ruby %} y {% endhighlight %}. Particularmente, estas etiquetas sirven para agregar color al texto que se encuentra dentro. El texto en mención es un fragmento de código Ruby.

Este tipo de etiquetas también son útiles para controlar el comportamiento del generador de páginas estáticas. La explicación de cómo usarlas será tema de un próximo artículo.

Si accedemos a la página del artículo en el navegador, podemos ver el resultado:

Agregando páginas al sitio web estático

Además de artículos de blog, Jekyll tiene la capacidad de generar páginas estáticas. El proceso de creación de una página estática es idéntico al de un artículo.

Al contrario de un artículo de blog, las páginas estáticas no se organizan cronológicamente, ni tampoco en categorías o etiquetas.

A continuación vamos a crear una nueva página estática, creando para ello un archivo llamado acerca.md en el directorio raíz:

jekyll-site/
  acerca.md

La sección Front Matter de una página es mas simple que la de un artículo. Agregamos las siguientes líneas al inicio del archivo:

---
layout: page
title: Acerca
permalink: /acerca/
---

La variable permalink se utiliza para manipular la URL de la página. En este caso le indicamos a Jekyll que la URL debe ser /acerca/ y no /acerca.html, la cual sería la URL por defecto.

La variable permalink puede ser usada tanto en artículos como en páginas estáticas.

Enseguida, agregamos el contenido:

Este es el tema básico de Jekyll. Puede encontrar más información acerca de la
personalización de su tema, así como documentación sobre el uso de Jekyll en
[jekyllrb.com](http://jekyllrb.com/).

Puede encontrar el código fuente del tema en: {% include icon-github.html
username="jekyll" %} / [minima](https://github.com/jekyll/minima)

Puede encontrar el código fuente de Jekyll en {% include icon-github.html
username="jekyll" %} / [6](https://github.com/jekyll/jekyll)

Cómo se mencionó anteriormente, el contenido siempre debe estar escrito en formato Markdown.

En esta oportunidad, apreciamos una nueva etiqueta en el contenido de la página estática: {% include icon-github.html username="jekyll" %}, la cual permite incluir una plantilla HTML dentro de otra.

Al cargar la dirección http://localhost:4000/acerca/, podemos ver la página generada:

Cambiando la configuración de Jekyll

La configuración de Jekyll se compone de un listado de variables que permiten controlar el proceso de generación del sitio web estático.

Jekyll define una serie de variables de configuración por defecto, pero también se pueden crear nuevas variables a la medida de las necesidades.

Estas variables pueden ser utilizadas en las plantillas del tema para modificar su comportamiento en ciertas situaciones o para inyectar información como el titulo, descripción y autores de un artículo o página determinada.

Para ilustrar lo anterior, vamos a modificar el título del sitio web. Para esto vamos a abrir el archivo _config.yml y vamos a cambiar el valor de la variable title así:

title: Un título asombroso

Para hacer efectivo el cambio que acabamos de hacer, debemos reiniciar el servidor local presionando CTRL+C y ejecutando de nuevo el siguiente comando en la terminal:

$ bundle exec jekyll serve

Podemos observar que hemos cambiado el título del sitio de forma exitosa:

Aquí termina este artículo introductorio sobre cómo crear sitos web estáticos con Jekyll. En un próximo artículo estaremos explicando el proceso de creación de un template Jekyll.