The project is in a healthy, maintained state
Jekyll VitePress Theme brings the VitePress default theme look and behavior to Jekyll sites.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
 Dependencies

Runtime

>= 4.3, < 5.0
 Project Readme
Jekyll VitePress Theme

Jekyll VitePress Theme

VitePress-style docs for Jekyll, without leaving Ruby.

Gem Version CI Docs License: MIT


Ruby projects should not need a JavaScript app just to get beautiful documentation.

jekyll-vitepress-theme brings the VitePress documentation experience to Jekyll: familiar navigation, sidebars, outlines, search, dark mode, code blocks, callouts, and doc footers, packaged as a Ruby gem.

The unusual part is navigation. Jekyll VitePress uses Turbo Frames like a Rails app, swapping only the content frame while the nav, sidebar, and shell stay in place. Page changes feel as fast as VitePress, while the output remains plain Jekyll: Markdown, Liquid, YAML, Ruby, and static files.

Why Use It

  • As fast as VitePress: Turbo Frames swap only the docs content while the nav, sidebar, and shell stay mounted.
  • Jekyll-native setup: keep your existing pages, add the gem, configure the handful of Jekyll settings your site needs, and start publishing.
  • Familiar VitePress UX: top nav, sidebar, right outline, search, dark mode, code blocks, callouts, and doc footers come ready to use.
  • More than VitePress: add GitHub Star and Sponsor buttons, a version selector, generated local search, and Copy Page/View as Markdown for LLM workflows.
  • Static Ruby output: build with Jekyll and deploy the generated HTML to GitHub Pages, any CDN, or any static host.

Quick Start

Add the gem:

gem "jekyll-vitepress-theme"

Enable the theme and plugin:

theme: jekyll-vitepress-theme
plugins:
  - jekyll-vitepress-theme

Add basic theme config:

jekyll_vitepress:
  branding:
    site_title: My Docs
  syntax:
    light_theme: github
    dark_theme: github.dark

Define navigation and sidebar data:

# _data/navigation.yml
- title: Guide
  url: /getting-started/
  collections: [guides]
# _data/sidebar.yml
- title: Guide
  collection: guides

Run Jekyll:

bundle install
bundle exec jekyll serve --livereload

Screenshots

Home Docs
Home page in light mode Docs page in light mode

Docs

Read the full documentation at jekyll-vitepress.dev.

Start here:

Development

bundle install
npm install
bundle exec jekyll serve --livereload

Run the local verification suite:

bundle exec rake verify

License

MIT