Trabajando con sitios web estáticos de información y de contenido

A la hora de plantear el construir un sitio web, por muy sencillo que sea, suele ser habitual que la primera propuesta que nos venga a la mente sea siempre la misma: WordPress.

Este artículo no pretende mostrar una herramienta que solucione todo lo que puede solucionar un CMS como WordPress. La idea es invitar a pensar en formas de trabajo más actuales y eficientes para publicar contenidos en un sitio web.

La era de los API

A lo largo de la última década hemos sido testigos de una evolución importante en la web que empezó a definirse en el año 2000 con la llegada de REST.

Los sitios web que utilizamos permiten integrarse unos con otros. Podemos hacer que contenido que publicamos en nuestra cuenta de instagram, strava o youtube se muestre automáticamente en otros sitios y servicios como Twitter.

Cada vez tenemos menos necesidad de almacenar contenido en el hosting en el que publicamos nuestros sitios web, sitios de comercio electrónico o blogs.

El contenido se crea y almacena de forma distribuida y el usuario cada vez tiene más libertad para elegir cómo hacerlo.

Herramientas como Zapier o IFTTT nos permiten crear flujos y automatizaciones entre diferentes servicios sin necesidad de programar.

Por ejemplo, podríamos subir una foto a instagram y que automáticamente se guarde en Dropbox, Drive o s3. Podríamos añadir una entrada en una hoja de Excel de Google y que automáticamente cree un evento en Google Calendar o en algún otro calendario de otro servicio.

Integración y despliegue continuos

En desarrollo de software funcionamos de una forma similar a lo que veíamos en el punto anterior.

Actualmente todos los desarrolladores de software y web utilizamos GIT. Si no conoces nada sobre repositorios GIT, puedes pensar en ellos como si se tratasen de una carpeta de Dropbox de tu ordenador, en la que puedes crear un archivo, este se sube a dropbox automáticamente, registrando todos sus cambios. La base de GIT es similar a la de Dropbox, sólo que es mucho más potente.

El código al que contribuimos se encuentra en un repositorio central de GIT que se aloja en algún servicio en la nube como Github, Bitbucket o Gitlab y cuando hacemos cambios en el mismo, estos cambios desencadenan una serie de pasos automáticos que pueden terminar en que se publique una actualización de la web sin tener que utilizar un cliente FTP.

A nivel profesional, otros profesionales como los traductores, diseñadores y escritores están empezando a utilizar GIT y a trabajar de esta manera.

Markdown y el formato sin contaminar

Cuando escribimos en un Word o en un editor de texto enriquecido de una web, estamos utilizando el formato final del documento que queremos enviar o publicar en la web.

Esto nos condiciona muchas veces a tener que trabajar con un tipo determinado de editor de texto que no siempre tenemos instalado en nuestra máquina y también nos obliga a aumentar el esfuerzo cuando queremos publicar en varios formatos con diseños o estilos muy distintos.

Markdown nos permite crear archivos de texto plano que luego podemos convertir en archivos HTML, docx o pdf con el diseño y formato que más nos convenga.

Cada vez más servicios y sitios web soportan escribir con Markdown descripciones y comentarios.  Y existen herramientas como pandoc que permiten convertir desde markdown a pdf, docs o html, incluso online.

La ventaja principal de tener un formato de origen sin contaminar es que se puede automatizar la publicación en diferentes formatos finales como HTML o PDF.

Como he comentado antes, cada vez más profesionales de disciplinas no tecnológicas empiezan a utilizar este tipo de herramientas y formas de trabajo, como podemos ver en este artículo de Mariana Eguaras sobre el tema.

Sabiendo todo esto, ¿realmente necesitamos una base de datos?

Hemos visto que podemos trabajar con un directorio que puede registrar nuestros cambios con GIT o Dropbox. Y también hemos visto que podemos escribir nuestro contenido en texto plano utilizando Markdown y generar a partir de ese texto, documentos en html, pdf o docx.

Por lo tanto con esto en mente, si trabajamos con un flujo de entrega continua o con una receta de Zapier que cuando creemos un archivo en nuestro Git o Dropbox con extensión .md (para indicar que es Markdown) nos genere automáticamente un archivo HTML y después lo suba a nuestro hosting web… ¿realmente necesitamos tener un WordPress con una base de datos si lo único que queremos es un sitio web con unas pocas páginas de contenido?

Es más, si tenemos nuestro contenido en base de datos, si en un futuro queremos consultarlo siempre vamos a necesitar tener que importarlo en una base de datos para exportarlo o verlo a través de un cliente o una web que se conecte a la misma.

Si nuestro contenido está en archivos de texto, vamos a poder verlo sin dificultad o grandes requisitos de software.

Alineados con esta filosofía de trabajo, existen cada vez más herramientas que nos dan soluciones en este sentido.

VuePress es una de ellas, pero podemos ver otras muy buenas alternativas como Hugo, Gatsby y muchísimas más.

VuePress

VuePress es una herramienta que se base en el framework de desarrollo Vue para poder generar sitios web estáticos de forma simple tomando como origen un directorio de archivos escritos en MarkDown. Inicialmente se diseñó para crear sitios estáticos de documentación, pero ahora mismo podemos crear portales de información sin limitación en el diseño.

Para poder utilizarlo, necesitas tener yarn en tu ordenador instalado. Si eres desarrollador probablemente ya lo tengas si no, lo puedes instalar fácilmente.

Después de instalarlo, únicamente debes ejecutar este comando una única vez, para futuros sitios web no hará falta hacerlo.

yarn global add vuepress

Una vez instalado vuepress en tu equipo, puedes tener un directorio con archivos .md que se transformarán en un sitio web estático.

Por ejemplo podríamos tener una estructura de directorios como esta:

├── readme.md
└── about.md
└── services.md
└── contact.md

El archivo “readme.md” sería el index y cada uno de los otros archivos .md se transformarán de .md a html.

Para poder trabajar en nuestro entorno local, podemos levantar un servidor web que nos montará la web “en caliente” en http://localhost:8080 sin tener que hacer nada. Cuando modifiquemos un archivo, la web se actualizará automáticamente.

Para levantar ese servidor web, podemos hacerlo con el comando:

vuepress dev

Con este comando podemos visitar la ruta http://localhost:8080/about.html y ver la información del about.md. También nos añadirá un buscador automáticamente.

Una vez terminado podemos generar el sitio web en html para poder subirlo a cualquier servidor que soporte html con el comando:

vuepress build

¿Y si no soy desarrollador ni me interesa la linea de comandos? ¿Puedo trabajar con VuePress u otra de las opciones que has mencionado?

Sí. Pero debes tener configurado un flujo de Entrega Continua.

Por ejemplo, en elComité, tenemos un flujo configurado para la nueva web que estamos creando para nuestra asociación.

En este flujo, cuando modificamos algo en nuestro repositorio de Github, el sitio web se actualiza automáticamente.

El trabajo con el contenido está totalmente separado del trabajo de diseño o maquetación. Si alguien del equipo únicamente necesita modificar el contenido no necesita tener que abrir el terminar si no quiere.

Esto lo conseguimos gracias a Netify, que permite integrarse con Github, Bitbucket o Gitlab. Netify es notificado cada vez que github se actualiza, generando un sitio web nuevo por cada cambio, sin necesidad de utilizar FTP. Soporta también dominios personalizados y certificados SSL, siendo totalmente gratuito para un único usuario.

En el caso de que se desee, cualquiera en el equipo puede tener funcionando el mismo sitio web que vería en producción sin necesidad de contratar o configurar un hosting o instalar nada raro en su ordenador; simplemente necesita abrir el terminal y ejecutar “vuepress dev”.

Si deseamos trabajar en el diseño, VuePress basa sus themes en componentes, que pueden ser diseñados y programados como si fuesen una aplicación web javascript al uso, consumiendo incluso servicios REST si lo necesitásemos.

VuePress y otras alternativas son muy potentes y te dan muchas características que se suelen necesitar para construir sitios web: templates, i18n (soporte para idiomas), buscador, soporte para SEO e incluso pueden generar sitios que funcionen offline sin conexión a internet.

Para necesidades más avanzadas, como la de poder enviar archivos o recoger emails para una newsletter, disponen de integración con servicios en la nube que ya te dan estas funcionalidades e incluso con servicios serverless basados en funciones que permiten programar acciones complejas a nivel de backend si fuese necesario.

Pero la idea principal es que al no necesitar base de datos, únicamente necesitaremos un hosting o un servicio cloud que sirva html por lo que el coste puede ser muy bajo o incluso cero si no tenemos grandes necesidades.

Conclusión

Mi objetivo con este artículo era el de mostrar que existen formas más modernas y mucho más eficientes a la hora de crear sitios web estáticos y de contenido.

Creo sinceramente que la era de los CMS como WordPress para crear sitios web y landings está llegando a su fin, gracias a que formas de trabajo que son el día a día en empresas de software como la Integración Continua, están llegando a otros sectores y profesionales.

Las herramientas como VuePress significan un gran avance para los desarrolladores de front en este sentido.

Estas soluciones les proveen de herramientas modernas para poder aportar de forma más eficiente a la creación de la nueva generación de sitios web y aplicaciones de información que veremos en los próximos años.

 

2 comentarios sobre “Trabajando con sitios web estáticos de información y de contenido”

  1. Ya te lo he dicho por Twitter, pero ¿qué es un blog sin comentarios? :) Así que de nuevo GRACIAS! Lo voy a leer con mucho interés, seguro que me inspira y aprendo cosas nuevas.

Responder a Laura Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *