Icono de unas herramientas

Crear una web estática desde JSON con Python

El desarrollo Web vive un momento muy emocionante. Es quizás uno de los mejores representantes de lo rápido y dinámico que es el mundo tecnológico, y en los últimos años no ha parado de experimentar fuertes cambios. De un desarrollo más basado en herramientas auxiliares a Javascript, como jQuery, sólo para el front-end, hemos pasado en menos de 5 años a un uso muy extendido de Javascript nativo, Typescript u otros frameworks que hace muy poco no existían, como React, Angular, Vanilla o Vue. Ahora es posible desarrollar un proyecto completo con Javascript: Con nativo en el front-end y con NodeJS en el back-end. El poder que tiene esta combinación de tecnologías, junto a las plataformas y software como servicio (PaaS y SaaS), para simplificar el desarrollo, agilizar y democratizar el proceso de creación de soluciones Web es enorme.


Es sin duda un mundo donde es difícil mantenerse al día, por eso la formación continua es imprescindible. En este marco, recientemente he querido mejorar mis bases de React con un curso de desarrollo Web que lo incluía, y he tenido la oportunidad de poder profundizar en su uso y en el de EJS como Embedded Javascript Templating. Como la mejor forma de adquirir conocimientos es aplicándolos, sabía que el siguiente proyecto Web que quería realizar –este sitio– tenía que utilizar componentes.


Pero entonces... ¿Por qué no React?


Y quien dice React dice cualquier otro framework. Fundamentalmente consideré que no era este el proyecto más indicado para ellos. Son soluciones que se adaptan mejor a una arquitectura de Single-Page Apps, y no a un sitio web fundamentalmente estático, actualizado ocasionalmente y de tamaño controlado. Pero que no sea un escenario tan adecuado a React como BurndownChartist, no implica que no sea conveniente utilizar un desarrollo modular. El siguiente paso lógico habría sido usar EJS. Sin embargo, después de analizarlo detenidamente, estimé que el multilingüismo o la calidad del posicionamiento SEO podrían ser puntos conflictivos. Necesitaba una solución que me permitiera crear un sitio web estático desde un archivo JSON, que pudiera tener total control sobre el estilo, arquitectura y contenido HTML, que permitiera gran interacción con Javascript y que aunara una gran flexibilidad con conveniencia en el mantenimiento, requisito importante dados los tres idiomas que pensaba soportar. Encontré algunas cosas en Github, principalmente CMSs limitados, pero ninguno satisfacía mis necesidades ni era tan potente como necesitaba. Así que decidí crear mi propia solución ad-hoc. Y aquí está.


MarioVarona.dev: El sitio creado por un CMS con Python y JSON.


En el repositorio de este sitio se puede encontrar todo lo que he usado para crear un sitio web desde cero, sin plantillas ajenas, con gran flexibilidad y gran capacidad de mantenimiento. Sólo se necesita un archivo JSON, los HTML, CSS y JS de plantilla, que deben estar en el directorio components, y el archivo generate.py hace la magia. Al compilarlo, crea los archivos necesarios en una carpeta llamada web, sustituyendo los bloques señalados con {$name} por un bloque creado en tiempo de compilación, las cadenas $string por su correspondiente traducción y más. Además, permite inyectar HTML directamente desde el archivo JSON, con lo que la flexibilidad es muy grande. Para probarlo sólo tienes que aportar tu web.json y compilar el archivo con python3 generate.py.

¡Te animo a que clones el proyecto y me enseñes las webs que puedes hacer con un CMS tan sencillo, rápido y flexible como este!


Nota: Algunas partes del generador (generate.py) están diseñadas específicamente para crear esta web en particular y su uso en otros casos es prescindible.


23/11/2020