Tools icon

Creating a static web from JSON with Python

Web development is going through a very exciting time. It is perhaps one of the best representatives of how fast and dynamic the technological world is, and in recent years it has not stopped experiencing strong changes. From a development more based on auxiliary tools to Javascript, like jQuery, only for the front-end, we have gone in less than 5 years to a very established use of native Javascript, Typescript or other frameworks that did not exist recently, like React, Angular, Vanilla or Vue. Now it is possible to develop a complete project with Javascript: With native on the front-end and with NodeJS on the back-end. The power of this combination of technologies, together with platforms and software as a service (PaaS and SaaS), to simplify development, have an agile approach from the core and democratize the process of creating Web solutions is huge.


It is certainly a world where it is difficult to keep pace, so lifelong learning is essential. In this context, I recently wanted to improve my React bases with a Web development course that included it, and I had the opportunity to deepen in its use and in the use of EJS as Embedded Javascript Templating. As the best way to acquire knowledge is applying it, I knew that the next Web project I wanted to do -this site- had to use components.


But then... Why not React?


And where I say React, I could say any other framework. Basically, I considered that this project was not the most suitable for them. They are solutions that are better designed for Single-Page Apps architecture, instead of a mainly static, occasionally updated and size-controlled website. But the fact that it is not a scenario as suitable for React as BurndownChartist, does not imply that it is not convenient to use a modular approach. The next logical step would have been to use EJS. However, after careful analysis, I estimated that multilingualism or the quality of SEO positioning could be an important point. I needed a solution that would allow me to create a static website from a JSON file, that would allow me to have total control over the style, architecture and HTML content, that would allow me to manipulate a great interaction with Javascript and that would combine great flexibility with convenience in maintenance, an important requirement given the three languages I planned to support. I found some things in Github, mainly limited CMSs, but none of them met my needs or were as powerful as I needed. So I decided to create my own ad-hoc solution. And here it is.


MarioVarona.dev: The site created by a CMS with Python and JSON.


In the repository of this site you can find everything I used to create a website from scratch, without external templates, with great flexibility and great maintenance capacity. You only need a JSON file, the HTML, CSS and JS template files, which must be in the components directory, and the generate.py file does the magic. When compiled, it creates the necessary files in a folder called web, replacing the blocks marked with {$name} by a block created at compile time, the strings $string by their corresponding translation, and more. In addition, it allows you to inject HTML directly from the JSON file, so the flexibility is great. To try it you just have to provide your web.json and compile the file with python3 generate.py.

I encourage you to clone the project and show me the webs you can do with a CMS as simple, fast and flexible as this one!


Note: Some parts of the generator (generate.py) are specifically designed to create this particular website and its use in other cases is dispensable.


11/23/2020