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.