zola vite demo

Zola + Vite-Demo

Dies ist eine minimal funktionierende Demo, die zeigt, wie Sie Zola ohne spezielle Plugins sauber mit Vite verbinden können.

• Zola ist ein einfacher und cleverer statischer Site-Generator, der die Tera-Template-Engine mit einer Jinja2/Twig-ähnlichen Syntax verwendet.
• Vite ist ein Frontend-Build-Tool, das Webpack ähnelt, jedoch einfacher zu konfigurieren ist.

Bitte beachten Sie, dass es sich hierbei NICHT um ein Starterprojekt oder einen Standardentwurf handelt.

In dieser Demo:

• Zola ist für die HTML-Verarbeitung verantwortlich, Vite ist für die JS- und SASS-Verarbeitung verantwortlich. Wenn Sie es vorziehen, dass Zola SASS anstelle von Vite verarbeitet, ist es trivial, dies zu konfigurieren (siehe Zola-Dokumente und meinen Kommentar in main.js).
• Parallel dazu laufen die Entwicklungsserver Zola und Vite.
• Hot Reload funktioniert für HTML-, JS- und SASS-Code.
• Befehle sind über npm run verfügbar (siehe package.json).
• Produktions-Builds werden minimiert: Zola minimiert HTML, Vite minimiert JS und CSS.

Wie zu verwenden

1. Klonen Sie das Repo und cd in das Verzeichnis.
2. Führen Sie npm install aus, um Abhängigkeiten zu installieren.
3. Führen Sie npm run dev aus, um Zola- und Vite-Entwicklungsserver auszuführen.
4. Öffnen Sie http://127.0.0.1:1111/ in Ihrem Browser. Sie sollten eine Seite mit der Aufschrift „Willkommen bei der Zola + Vite-Demo“ und Hello world! “ sehen. in der Browserkonsole (wie im Screenshot oben).
5. Nehmen Sie einige Änderungen an templates/index.html ODER js/main.js ODER sass/main.scss vor. Die Seite unter http://127.0.0.1:1111/ sollte sofort mit Ihren Änderungen aktualisiert werden.
6. Führen Sie npm run build aus, um den Build für die Produktionsverwendung zu erstellen (Dateien werden in das Verzeichnis public/ verschoben).

Bekannte Probleme

1. Ich habe die Demo nicht unter Windows getestet.
2. In den Vite-Dokumenten heißt es, dass der Eintrag import 'vite/modulepreload-polyfill' enthalten sollte, aber ich bin mir über den Zweck nicht ganz sicher (siehe main.js).
3. Wenn http://localhost:3000/@vite/client Ihnen 404 gibt, müssen Sie zuerst http://127.0.0.1:1111/ öffnen. Wenn es immer noch nicht funktioniert, sehen Sie hier nach.

Anregungen, Fragen?

Öffnen Sie einfach ein Problem. Bitte beachten Sie, dass Probleme, die nichts mit dem Zweck dieses Repositorys zu tun haben, als geschlossen markiert werden.