Vitepress Bootstrap

Static site generator using markdown for content built with Vitepress and Bootstrap

Customizable starter theme with responsive layout, dark mode, video player, photo gallery, and more

See FeaturesSource Code

Features ​

Lots of powerful features built in like video player, image gallery, responsive grid, and more.

Frontmatter ​

Easily write content for your pages using YAML frontmatter in your markdown.

  • id - page slug
  • title - page title
  • date - date
  • year - year
  • keywords - comma separated list of keywords
  • link - single url
  • links - list of urls
  • image - single image url
  • images - list of image urls
  • audio - url to MP3 audio file
  • video - url to YouTube video
  • repo - url to Github repo
  • isbn - book ISBN number
  • description - page description

Configuration ​

Easily custom your site configuration by editing options in .vitepress/config.mjs.

  • title - site title
  • description - site description
  • cleanUrls - true, false
  • base - site path, Github Pages is project name, custom domain is /
  • themeConfig.author - your name or organization
  • themeConfig.website - website url
  • themeConfig.layout - default
  • themeConfig.theme - light, dark
  • themeConfig.font - any font family from Google Fonts
  • themeConfig.container - container, container-fluid
  • themeConfig.navbar - top, fixed-top, fixed-bottom, sticky-top, sticky-bottom
  • themeConfig.footer - visible, hidden
  • themeConfig.sidebar - visible, hidden
  • themeConfig.search - visible, hidden
  • themeConfig.breadcrumbs - visible, hidden
  • themeConfig.share - hidden, visible
  • themeConfig.variables - override any Bootstrap variables
  • themeConfig.links - navbar links
  • themeConfig.feeds - rss and atom feeds
  • themeConfig.networks - social network links

Theme ​

The theme is built using Bootstrap, you can override the default styling by editing any of the stylesheets in .vitepress/theme.

Start ​

Getting started is easy, simply follow the steps:

You can follow the features for examples using different components like video player, image gallery, etc.

Contact ​

Like what you see? Find me elsewhere.