Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/EugeneDae/zola-vite-demo
A minimal working demo showing how to wire up Zola with Vite.
https://github.com/EugeneDae/zola-vite-demo
static-site static-site-generator vite vitejs zola
Last synced: about 1 month ago
JSON representation
A minimal working demo showing how to wire up Zola with Vite.
- Host: GitHub
- URL: https://github.com/EugeneDae/zola-vite-demo
- Owner: EugeneDae
- Created: 2022-06-01T10:25:49.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-01T15:02:00.000Z (over 1 year ago)
- Last Synced: 2024-08-04T10:07:29.152Z (5 months ago)
- Topics: static-site, static-site-generator, vite, vitejs, zola
- Language: HTML
- Homepage:
- Size: 104 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Zola + Vite demo
This is a minimal working demo showing how you can neatly wire up [Zola](https://www.getzola.org/) with [Vite](https://vitejs.dev/) without special plugins.
- Zola is a simple and clever static site generator that uses [Tera](https://tera.netlify.app/) template engine with a Jinja2/Twig-like syntax.
- Vite is a frontend build tool similar to Webpack, but easier to configure.
Please note that this is **NOT** a starter project or a boilerplate.
In this demo:
- Zola is responsible for HTML processing, Vite is responsible for JS and SASS processing. If you prefer Zola to process SASS instead of Vite, it’s trivial to configure that ([see Zola docs](https://www.getzola.org/documentation/content/sass/) and [my comment in main.js](https://github.com/EugeneDae/zola-vite-demo/blob/master/js/main.js#L5-L6)).
- Zola and Vite development servers run alongside.
- Hot reload works for HTML, JS, SASS code.
- Commands are available via `npm run` (see [package.json](https://github.com/EugeneDae/zola-vite-demo/blob/master/package.json)).
- Production builds are minificated: Zola minifies HTML, Vite minifies JS and CSS.
## How to use
1. Clone the repo and `cd` into the directory.
2. Run `npm install` to install dependencies.
3. Run `npm run dev` to run Zola and Vite dev servers.
4. Open [http://127.0.0.1:1111/](http://127.0.0.1:1111/) in your browser. You should see a page that says “Welcome to Zola + Vite demo” and `Hello world!` in the browser console (like in the screenshot above).
5. Make some changes to `templates/index.html` OR `js/main.js` OR `sass/main.scss`. The page at [http://127.0.0.1:1111/](http://127.0.0.1:1111/) should update instantly with your changes reflected on it.
8. Run `npm run build` to build for production use (files will go to `public/` directory).
## Known issues
1. I haven't tested the demo on Windows.
2. Vite docs [say](https://vitejs.dev/guide/backend-integration.html#backend-integration) that its entry should include `import 'vite/modulepreload-polyfill'`, but I'm not quite sure about its purpose ([see main.js](https://github.com/EugeneDae/zola-vite-demo/blob/master/js/main.js#L3)).
2. If http://localhost:3000/@vite/client gives you 404, you need to open http://127.0.0.1:1111/ first. If it still doesn’t work, see [this](https://github.com/vitejs/vite/discussions/2978).
## Suggestions, questions?
Just [open an issue](https://github.com/EugeneDae/zola-vite-demo/issues). Please note that issues unrelated to the purpose of this repository will be marked as closed.