[website]: https://github.com/ElMassimo/vite-ruby
[website]: https://vite-ruby.netlify.app/
[jekyll]: https://jekyllrb.com/
[configuration reference]: https://vite-ruby.netlify.app/config/
[features]: https://vite-ruby.netlify.app/guide/introduction.html
[guides]: https://vite-ruby.netlify.app/guide/
[config]: https://vite-ruby.netlify.app/config/
[vite.js]: http://vitejs.dev/
[Issues]: https://github.com/ElMassimo/jekyll-vite/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[Discussions]: https://github.com/ElMassimo/jekyll-vite/discussions
[no bundling]: https://vitejs.dev/guide/why.html#the-problems
[bundling]: https://vitejs.dev/guide/why.html#why-bundle-for-production
[rollup.js]: https://rollupjs.org
[esbuild]: https://esbuild.github.io/
Use [Vite.js] in [Jekyll] and enjoy a modern assets pipeline! ⚡️
_This integration is powered by [__Vite Ruby__][Vite Ruby]_.
## Features ⚡️
- ⚡️ Blazing fast hot reload
- 📦 Zero-config builds
- 🎨 Use your favorite languages/preprocessors/utilities (TypeScript, Tailwind CSS, etc.)
## Why Vite? 🤔
[Jekyll] does not have an extensible asset pipeline, which limits the amount of
integrations that exist for different languages and preprocessors. By default,
assets are not fingerprinted which is problematic for caching.
[Vite.js] has an extensible architecture and is built on top of [rollup.js], and as
a result there is an active ecosystem of plugins and tooling available. In addition,
it's [no bundling] design provides a very fluid authoring experience—changes to
your assets are reflected instantly in your browser.
## Installation 💿
Add this line to your site's Gemfile:
```ruby
gem 'jekyll-vite'
```
Then, run:
```bash
bundle install
bundle exec vite install
```
This will install the plugin in `_config.yml`, and generate a sample setup in
`_layouts/default.html` (if it exists).
```yml
plugins:
- jekyll/vite
```
```html
{% vite_client_tag %}
{% vite_javascript_tag application %}
{% vite_stylesheet_tag styles.scss %}
```
Additional installation instructions are available in the [documentation website][website].
## Getting Started 💻
Run bin/vite dev to start the Vite development server, and then
restart your Jekyll server with bin/jekyll serve.
Visit any page and you should see a printed console output: `Vite ⚡️ Ruby`.
For more [guides] and a full [configuration reference], check the [documentation website][website].
_A new section for Jekyll is coming soon!_
## Contact ✉️
Please use [Issues] to report bugs you find, and [Discussions] to make feature requests or get help.
Don't hesitate to _⭐️ star the project_ if you find it useful!
Using it in your site? Always love to hear about it! 😃
## Acknowledgements
- [Jekyll] — Even after all this time, it's still a great static site generator.
- [Vite.js] — Frontend tooling with a focus on the developer experience.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
