VitePress Blog Theme

A VitePress theme that turns a documentation site into a polished blog, without giving up the simplicity of Markdown or the flexibility of the default VitePress experience.

Why This Theme

VitePress is excellent for content-driven sites, but building a real blog on top of it still takes glue work. This theme packages the common pieces you usually end up rebuilding yourself, so you can start with a clean blog structure and keep customizing as your site grows.

It is a good fit if you want to:

• publish blog posts with Markdown
• organize content by authors, tags, categories, and archives
• keep the VitePress developer experience
• extend the site with your own Vue components and theme logic

Features

• Blog index, post pages, author pages, tag pages, and archive pages
• Markdown-first workflow with frontmatter-driven content
• Built on top of the default VitePress theme
• Tailwind CSS integration for easier styling
• Optional Giscus comments support
• Setup wizard to scaffold the initial blog structure

Quick Start

1. Install

pnpm add -D vitepress @chunge16/vitepress-blogs-theme tailwindcss @tailwindcss/vite

npm install -D vitepress @chunge16/vitepress-blogs-theme tailwindcss @tailwindcss/vite

yarn add -D vitepress @chunge16/vitepress-blogs-theme tailwindcss @tailwindcss/vite

2. Scaffold the site

pnpm vitepress-blog-init

npx vitepress-blog-init

yarn vitepress-blog-init

3. Start development

pnpm run docs:dev

Documentation

• Docs site: chunge16.github.io/vitepress-blogs-theme
• Getting started: guide/getting-started
• Theme config: reference/config

What Gets Generated

The setup wizard creates the essential structure for a VitePress-powered blog:

docs/
  .vitepress/
    config.js
    theme/
      index.js
  blog/
    authors/
    posts/
    archives.md
    index.md
    tags.md

From there, you can keep the default setup or continue extending it like any other VitePress theme.

Customization

This theme extends the default VitePress theme instead of replacing the VitePress workflow. That means you can still:

• add custom Vue components
• register enhanceApp logic
• override styles
• evolve the site into a docs-and-blog hybrid

Credits

Inspired by ideas and implementations from:

• VitePress Blog Starter
• Vue Blog
• clark-cui/vitepress-blog-zaun
• Charles7c/charles7c.github.io
• jcamp-code/vitepress-blog-theme

Demo blog content is created by vitepressblog.

Changelog

Release notes are available in CHANGELOG.md.

License

MIT

Copyright (c) 2023-present, chunge