Jekyll ➕ Vite.js

Use Vite.js in Jekyll and enjoy a modern assets pipeline! ⚡️

This integration is powered by Vite Ruby.

• ⚡️ Blazing fast hot reload
• 📦 Zero-config builds
• 🎨 Use your favorite tools (TypeScript, Tailwind CSS, etc.)

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, its no bundling design provides a very fluid authoring experience—changes to your assets are reflected instantly in your browser.

The documentation website is built using jekyll-vite.

You can check the source to see an example setup, or visit it to learn how to use jekyll-vite.

Add this line to your site's Gemfile:

gem 'jekyll-vite'

Then, run:

bundle install
bundle exec vite install

Additional installation instructions are available in the documentation website.

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! 😃

• 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.

The gem is available as open source under the terms of the MIT License.