Documentation

jekyll-vite is powered by Vite Ruby, which provides additional guides and a configuration reference.

This site is built using jekyll-vite—you can check the site source here.

Add this line to your site’s Gemfile:

gem 'jekyll-vite'

Then, run:

bundle install
bundle exec vite install

Run exe/dev (added during installation) to start both Vite and Jekyll for development.

It will use your config/vite.json configuration, which can be used to configure the host and port, as well as other options.

Visit your Jekyll site and you should see a printed console output: Vite ⚡️ Ruby.

Use the following Liquid tags to link JavaScript and CSS entrypoints managed by Vite in your Jekyll pages or partials:

• vite_javascript_tag: Renders a <script> tag referencing a JavaScript file
• vite_typescript_tag: Renders a <script> tag referencing a TypeScript file
• vite_stylesheet_tag: Renders a <link> tag referencing a CSS file

Run jekyll build as usual, and jekyll-vite will take care of running Vite.js to compile assets.

Besides the advantages during development, you get the best out of RollupJS in production.

For example, asset fingerprinting enables simple caching, better performance, and ensures no users experience stale assets 😎