¡Los sitios web estáticos* han vuelto!

* El término 'estático' confunde a mucha gente, ya que en realidad, a primera vista es igual de dinámico que cualquier web actual, en el sentido de que puede incluir botones animados, imágenes con rollover, sliders con imágenes que pasan automáticamente, widgets de redes sociales, etc. Fijaos en algunos ejemplos que citamos en el recuadro naranja.

(Adaptación de la «Guía para un desarrollo y mantenimiento web ético» d’Edri)

¿Sabéis que un sitio web estático no tiene por qué ser estático en un sentido estricto? Se llama 'dinámico' a un web que hace consultas a una base de datos, y se llama 'estático' a un web que no las hace y que no obliga al servidor a cargarse de nuevo cada vez que alguien lo visita... Pero ambas se ven igual. Si no necesitáis una base de datos (por ejemplo, si no tenéis tienda online que tengáis que coordinar con vuestro inventario), es probable que los estándares web actuales, tales como HTML5, os permitan crear un sitio web de última generación mediante recursos estáticos (HTML, CSS y quizás JavaScript y archivos de tipo de letra).

En Pangea.org hemos hecho un pequeño ejercicio de cómo pasar un web "dinámico" (o sea con PHP y una base de datos) a ser estático (archivos html, css y js). Después de probar algunas herramientas, la que primero mejor valoramos fue ejecutar una orden que realiza una copia estática de algo inicialmente generado como dinámico:

wget --recursive --page-requisites --adjust-extension --convert-links --domains pangea.org https://pangea.org

Si visitáis https://estatic.pangea.org/ veréis que casi no se nota la diferencia con la web original (al menos el día que se hizo la copia). Hay ciertas cosas, como por ejemplo los formularios, que dejan de funcionar, pero existen alternativas, como crear un formulario con PHP o implementar alguno basado en software ya existente (por ejemplo LimeSurvey -consultadnos si estáis asociados a Pangea.org-).

Este es un recurso útil si ya tenéis un web dinámico pero sólo en caso de que no subáis a menudo nuevos contenidos; también en caso de que deseéis olvidarse del mantenimiento Wordpress; o cuando os preocupe la seguridad y queráis tener vuestro web protegido.

Ahora bien, para poder tener un sitio web estático fácil de actualizar hay que empezar de cero utilizando un software especial.

Software de edición de sitios web estáticos

Hay software moderno de creación de sitios web estáticos, CMS (Content Management System) como Jekyll (popularizado por GitHub Pages), Hugo, Pelican, Sutty, Sketch o Publii (desarrollado por la Free Software Foundation), que os permiten crear sitios web con Markdown, bloques, WYSIWYG (What You See Is What You Get) o HTML básico y convertirlos en HTML completo y enlazado. Si utilizáis GitLab Pages, la conversión e implementación se pueden automatizar fácilmente.

De las opciones que miramos, el generador de webs estáticas que nos parece de uso más sencillo es Publii. Os recomendamos echar un vistazo a los temas que tiene disponibles: https://marketplace.getpublii.com/ 

De hecho, hemos visto que BarcelonaActiva ofreció un curso de cómo usarlo: https://cibernarium.barcelonactiva.cat/ficha-actividad?activityId=1031636 

Sin entrar en el detalle de cómo dar forma a la web, el procedimiento para crear vuestro web con Publii sería:

  1. instalar el software en el ordenador desde el que se desarrollará el web,
  2. instalar el tema que más nos guste (al igual que como lo haríamos con wordpress),
  3. diseñarlo: generar la estructura, definir los elementos gráficos, crear las plantillas...
  4. llenarlo de contenidos,
  5. una vez hechas las ediciones, debemos generar la web estática (en el caso de Publii se le llama "sincronizar el sitio web"),
  6. una vez generada, subimos los archivos generados en el servidor web, por ejemplo por FTP. ¡Y ya está!

De este modo la versión "editable" se queda en nuestro ordenador. Cuando queremos modificar los contenidos, lo hacemos desde allí, volvemos a generar los archivos y los subimos de nuevo al servidor.

Así nos ahorramos que estos archivos se generen (invisiblemente para los visitantes) en cada visita a la web, que es la forma en que funcionan los webs dinámicos y por la que a menudo causan un exceso de actividad en la red.

Los sitios web estáticos aseguran tiempo de actividad inigualables porque no necesitan conectarse a una base de datos. Todo lo que necesitan es un servidor web sencillo para cargar los archivos estáticos. En consecuencia, son menos afectados por errores de seguridad y son mucho más rápidos.

Si, a pesar de todo, decidís desarrollar un web dinámico, aplicad el resto de consejos que incluimos en esta guía en cuanto a plugins, php, bases de datos, etc.

EJEMPLOS

- Editores de webs estáticos construidos en sí mismos como webs estáticos:
https://sutty.nl/
https://www.sketch.com/
https://jekyllrb.com/showcase/
- Algunos ejemplos de temas Publii:
https://demo.getpublii.com/themes/massively/
https://demo.getpublii.com/themes/artgallery/brown/
https://demo.getpublii.com/themes/cortado/