zola vite demo

Зола + Vite демо

Это минимальная рабочая демонстрация, показывающая, как можно аккуратно подключить Zola к Vite без специальных плагинов.

• Zola — это простой и умный генератор статических сайтов, который использует механизм шаблонов Tera с синтаксисом, подобным Jinja2/Twig.
• Vite — это инструмент для сборки внешнего интерфейса, похожий на Webpack, но более простой в настройке.

Обратите внимание, что это НЕ стартовый проект или шаблон.

В этой демонстрации:

• Zola отвечает за обработку HTML, Vite отвечает за обработку JS и SASS. Если вы предпочитаете, чтобы Zola обрабатывала SASS вместо Vite, это легко настроить (см. документацию Zola и мой комментарий в main.js).
• Серверы разработки Zola и Vite работают параллельно.
• Горячая перезагрузка работает для кода HTML, JS, SASS.
• Команды доступны через npm run (см. package.json).
• Производственные сборки минимизированы: Zola минимизирует HTML, Vite минимизирует JS и CSS.

Как использовать

1. Клонируйте репозиторий и cd в каталог.
2. Запустите npm install чтобы установить зависимости.
3. Запустите npm run dev чтобы запустить серверы разработки Zola и Vite.
4. Откройте http://127.0.0.1:1111/ в своем браузере. Вы должны увидеть страницу с надписью «Добро пожаловать в демо-версию Zola + Vite» и Hello world! в консоли браузера (как на скриншоте выше).
5. Внесите некоторые изменения в templates/index.html ИЛИ js/main.js ИЛИ sass/main.scss . Страница по адресу http://127.0.0.1:1111/ должна мгновенно обновиться, и на ней отразятся ваши изменения.
6. Запустите npm run build для сборки для производственного использования (файлы будут помещены в каталог public/ ).

Известные проблемы

1. Я не тестировал демо-версию на Windows.
2. В документах Vite сказано, что его запись должна включать import 'vite/modulepreload-polyfill' , но я не совсем уверен в его цели (см. main.js).
3. Если http://localhost:3000/@vite/client выдает 404, вам нужно сначала открыть http://127.0.0.1:1111/. Если это все еще не работает, посмотрите это.

Предложения, вопросы?

Просто откройте проблему. Обратите внимание, что вопросы, не связанные с назначением этого репозитория, будут помечены как закрытые.