Werkzeug-Symbol

Eines statischen Webs aus JSON mit Python erstellen

Die Webentwicklung durchläuft eine sehr aufregende Zeit. Sie ist vielleicht einer der besten Vertreter dafür, wie schnell und dynamisch die technologische Welt ist, und in den letzten Jahren hat sie nicht aufgehört, starke Veränderungen zu erleben. Von einer Entwicklung, die mehr auf Hilfswerkzeugen basiert, zu Javascript, wie jQuery, nur für das Front-End, sind wir in weniger als 5 Jahren zu einer sehr etablierten Verwendung von nativem Javascript, Typescript oder anderen Frameworks übergegangen, die vor kurzem noch nicht existierten, wie React, Angular, Vanilla oder Vue. Jetzt ist es möglich, ein komplettes Projekt mit Javascript zu entwickeln: Mit nativem auf dem Front-End und mit NodeJS auf dem Back-End. Die Stärke dieser Kombination von Technologien, zusammen mit Plattformen und Software as a Service (PaaS und SaaS), um die Entwicklung zu vereinfachen, einen agilen Ansatz vom Kern her zu verfolgen und den Prozess der Erstellung von Web-Lösungen zu demokratisieren, ist enorm.


Es ist sicherlich eine Welt, in der es schwierig ist, Schritt zu halten, daher ist lebenslanges Lernen unerlässlich. In diesem Zusammenhang wollte ich vor kurzem meine React-Grundlagen mit einem Web-Entwicklungskurs verbessern, der diesen Kurs beinhaltete, und ich hatte die Gelegenheit, seine Anwendung und den Einsatz von EJS als Embedded Javascript Templating zu vertiefen. Da der beste Weg, sich Wissen anzueignen, die Anwendung ist, wusste ich, dass das nächste Webprojekt, das ich machen wollte -diese Website- Komponenten verwenden musste.


Aber dann... Warum nicht React?


Und wo ich React sage, könnte ich jeden anderen Frameworks nennen. Im Grunde war ich der Meinung, dass dieses Projekt für sie nicht das geeignetste war. Es handelt sich um Lösungen, die besser für die Single-Page-Apps-Architektur ausgelegt sind, statt einer hauptsächlich statischen, gelegentlich aktualisierten und größengesteuerten Website. Aber die Tatsache, dass es sich nicht um ein Szenario handelt, das für React so geeignet ist wie BurndownChartist, bedeutet nicht, dass es nicht zweckmäßig wäre, einen modularen Ansatz zu verwenden. Der nächste logische Schritt wäre die Verwendung von EJS gewesen. Nach sorgfältiger Analyse schätzte ich jedoch ein, dass die Mehrsprachigkeit oder die Qualität der SEO-Positionierung ein wichtiger Punkt sein könnte. Ich brauchte eine Lösung, die es mir ermöglichen würde, eine statische Website aus einer JSON-Datei zu erstellen, die es mir erlauben würde, die totale Kontrolle über Stil, Architektur und HTML-Inhalt zu haben, die es mir erlauben würde, eine großartige Interaktion mit Javascript zu manipulieren und die eine große Flexibilität mit einer bequemen Wartung kombinieren würde, eine wichtige Anforderung angesichts der drei Sprachen, die ich zu unterstützen plante. Ich fand einige Dinge in Github, hauptsächlich eingeschränkte CMS, aber keines davon entsprach meinen Bedürfnissen oder war so leistungsfähig, wie ich es brauchte. Also beschloss ich, meine eigene Ad-hoc-Lösung zu erstellen. Und hier ist sie.


MarioVarona.dev: Die Website wurde mit einem CMS mit Python und JSON erstellt.


Im Repository dieser Website finden Sie alles, was ich verwendet habe, um eine Website von Grund auf neu zu erstellen, ohne externe Vorlagen, mit großer Flexibilität und großer Wartungskapazität. Sie brauchen nur eine JSON-Datei, die HTML-, CSS- und JS-Template-Dateien, die sich im Verzeichnis components befinden müssen, und die Datei generate.py macht den Zauber. Nach der Kompilierung erzeugt sie die notwendigen Dateien in einem Verzeichnis namens web und ersetzt die mit {$name} markierten Blöcke durch einen zur Kompilierungszeit erstellten Block, die Zeichenketten $string durch ihre entsprechende Übersetzung und vieles mehr. Darüber hinaus erlaubt es Ihnen, HTML direkt aus der JSON-Datei zu injizieren, so dass die Flexibilität groß ist. Um es auszuprobieren, müssen Sie nur Ihren web.json angeben und die Datei mit python3 generate.py kompilieren.

Ich möchte Sie ermutigen, das Projekt zu klonen und mir die Webseiten zu zeigen, die Sie mit einem so einfachen, schnellen und flexiblen CMS wie diesem erstellen können!


Hinweis: Einige Teile des Generators (generate.py) sind speziell für die Erstellung dieser speziellen Website konzipiert und ihre Verwendung in anderen Fällen ist entbehrlich.


23.11.2020