Generadores de sitios web estáticos

por Natalia Ventre el 18/04/2013 ・ podés leerlo en 4 minutos ・

El problema

Para entender para qué sirve un generador de sitios web estáticos, tenés que saber la diferencia entre sitios estáticos y dinámicos.

  • Estático: Un sitio web estático está compuesto por una o más páginas en HTML.
  • Dinámico: Un sitio web dinámico está compuesto por 1) una base de datos donde se almacena el contenido y la metadata (fecha de creación, categoría, autor, etc.) en tablas, 2) plantillas con el formato de las distintas páginas (por ej. página principal, página interior, etc.) y 3) un lenguaje de programación backend por ej. PHP que se comunica con la base de datos, extrae información, la coloca donde está indicado en la plantilla y genera páginas dinámicamente que cumplen ciertos criterios (por ej. las 10 noticias más recientes o los 5 productos más vendidos).

Un sitio web dinámico suena bastante complejo, ¿por qué se usan entonces CMSs (sistemas de administración de contenido) como por ej. WordPress para sitios de pocas páginas? La respuesta corta es porque los sitios estáticos son difíciles de mantener. La respuesta larga es:

  • No hay separación de contenido y estructura: Para editar una página tenés que saber HTML para poder por ej. cambiar un texto o una imagen sin alterar la estructura (columnas, etc.).
  • No es DRY (“no te repitas”): Para agregar una nueva página, tenés que copiar y pegar la estructura del documento, cambiarle el contenido, y editar todas las páginas viejas para agregar la nueva a la navegación.

Un sitio web dinámico empieza a sonar genial… pero también tienen algunas desventajas:

  • Obsolencia: Una vez que creás un sitio con por ej. WordPress tenés que estar pendiente de las actualizaciones. Las actualizaciones no son opcionales, porque puede ser riesgoso a nivel de seguridad usar una versión vieja.
  • Costo y rendimiento: Cada vez que un visitante accede al sitio, se realizan consultas a la base de datos, se generan HTMLs, etc. usando CPU y memoria. Podés crear páginas estáticas del contenido dinámico y usar otros tipos de caching, pero por qué no usar directamente un generador de sitio web estático.

La solución

Jekyll es un generador de sitios web estáticos creado por Tom Preston-Werner co-fundador de GitHub. Se puede usar para generar cualquier tipo de sitio web incluyendo un blog.

1) Instalación: Jekyll está desarrollado en Ruby y se instala via RubyGems.

sudo gem install jekyll

2) Creación del proyecto: Jekyll requiere la siguiente estructura mínima de archivos y carpetas:

Archivos y carpetas básicos para generar un sito con Jekyll
Estructura básica de un sitio basado en Jekyll.
  • config.yml es la configuración del sitio (formato de los permalinks, variables globales, etc.).
  • en _includes van los parciales (fragmentos de código re-utilizables) que se pueden incluir en _layouts y _posts.
  • en _layouts van las plantillas (en Liquid template engine).
  • en _posts van las entradas. Los archivos tienen que nombrarse año-mes-dia-titulo.md
  • en _site es donde Jekyll va a guardar el sitio web estático generado (lo que tenés que subir a tu servidor web).

Agregá más carpetas y archivos a gusto. Jekyll no copia a _site las carpetas cuyo nombre empiece con un guión bajo.

3) Creación del contenido: Además del formato de nombre de archivo mencionado más arriba, al principio de cada archivo se requiere una cabecera de YAML:

---
layout: post
title: Titulo del post
emoticon: ":)"
---

Nibh Dolor Vehicula Venenatis **Ipsum**.

En las cabeceras de YAML se puede incluir cualquier valor y acceder a él desde el template. Ej.: código del template post.html:

---
layout: default
---
<article>
    <h1>{{ page.title }} {{ page.emoticon }}</h1>
  	{{ content }}
</article>

3) Generación del sitio: Desde el directorio del proyecto, ejecutar:

jekyll --server

Suponiendo que default.html tiene el siguiente código:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>{{ page.title }}</title>
</head>
<body>
	{{ content }}
</body>
</html>

el HTML generado por Jekyll para ese post será:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Titulo del post</title>
</head>
<body>
	<article>
    	<h1>Titulo del post :)</h1>
  		<p>Nibh Dolor Vehicula Venenatis <strong>Ipsum</strong>.</p>
	</article>
</body>
</html>

Podés ver el sitio generado en http://localhost:4000.

4) Publicación: Subí los archivos de la carpeta _site a cualquier servidor web. Son HTMLs así que no hay requerimientos.

Resumen

  • Jekyll separa estructura (_layouts) y contenido (_posts), pero no usa base de datos. El contenido son archivos planos (super fácil de respaldar en Dropbox).
  • Cuando agregás/editás contenido, tenés que volver a generar el sitio y subirlo al servidor web.

Conclusiones

Jekyll no es para todo el mundo ni para todos los proyectos, pero si te convencí, te invito a leer estos tips sobre Jekyll.

Si preferís una opción basada en Python, te recomiendo Pelican y si buscás una opción similar pero viable para hacer sitios web para clientes, te recomiendo Kirby y Statamic, ambos en PHP, no usan base de datos, pero sí tienen un panel de administración web para agregar/editar contenido.