zola vite demo

Démo Zola + Vite

Il s'agit d'une démo de travail minimale montrant comment vous pouvez parfaitement connecter Zola avec Vite sans plugins spéciaux.

• Zola est un générateur de site statique simple et intelligent qui utilise le moteur de modèles Tera avec une syntaxe de type Jinja2/Twig.
• Vite est un outil de construction frontend similaire à Webpack, mais plus facile à configurer.

Veuillez noter qu'il ne s'agit PAS d'un projet de démarrage ou d'un passe-partout.

Dans cette démo :

• Zola est responsable du traitement HTML, Vite est responsable du traitement JS et SASS. Si vous préférez que Zola traite SASS au lieu de Vite, il est simple de configurer cela (voir la documentation de Zola et mon commentaire dans main.js).
• Les serveurs de développement Zola et Vite fonctionnent parallèlement.
• Le rechargement à chaud fonctionne pour le code HTML, JS, SASS.
• Les commandes sont disponibles via npm run (voir package.json).
• Les builds de production sont minimisés : Zola minimise le HTML, Vite minimise le JS et le CSS.

Comment utiliser

1. Clonez le dépôt et cd dans le répertoire.
2. Exécutez npm install pour installer les dépendances.
3. Exécutez npm run dev pour exécuter les serveurs de développement Zola et Vite.
4. Ouvrez http://127.0.0.1:1111/ dans votre navigateur. Vous devriez voir une page indiquant « Bienvenue dans la démo Zola + Vite » et Hello world! dans la console du navigateur (comme dans la capture d'écran ci-dessus).
5. Apportez quelques modifications à templates/index.html OU js/main.js OU sass/main.scss . La page http://127.0.0.1:1111/ devrait être mise à jour instantanément avec vos modifications reflétées.
6. Exécutez npm run build to build pour une utilisation en production (les fichiers iront dans le répertoire public/ ).

Problèmes connus

1. Je n'ai pas testé la démo sous Windows.
2. La documentation de Vite indique que son entrée devrait inclure import 'vite/modulepreload-polyfill' , mais je ne suis pas sûr de son objectif (voir main.js).
3. Si http://localhost:3000/@vite/client vous donne 404, vous devez d'abord ouvrir http://127.0.0.1:1111/. Si cela ne fonctionne toujours pas, voyez ceci.

Des suggestions, des questions ?

Ouvrez simplement un problème. Veuillez noter que les problèmes sans rapport avec l'objectif de ce référentiel seront marqués comme fermés.