Generated banner for Vitepress
Generated logo for Vitepress

Vitepress

Anthony FuCommunityCreated by Anthony Fu

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found

From the author

VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

VitePress is a static site generator that transforms Markdown content into a single-page application. It leverages Vite for build processes and Vue 3 for component-based content, allowing developers to integrate Vue components directly into Markdown files. The tool supports file-based routing, theme customization, and provides built-in features for search, internationalization, and server-side rendering compatibility.

What it does

  • Generates static HTML from Markdown files
  • Enables the use of Vue components within Markdown
  • Supports file-based routing and site configuration
  • Provides tools for internationalization and multi-language sites
  • Offers mechanisms for SSR-compatible code and browser-only component handling
  • Includes built-in search and theme customization options

When to use it

  • When building documentation sites or technical guides
  • When creating blogs or marketing sites using Markdown
  • When you need to embed interactive Vue components in static content
  • When you require a site with multi-language support

Advantages

  • Direct integration of Vue components in Markdown
  • File-based routing simplifies site structure
  • Built-in support for internationalization and RTL layouts
  • Tools for managing browser-only code in an SSR environment

Usage examples

“How do I configure multiple languages in VitePress?”
You can define a locales object in your .vitepress/config.ts file to map language codes to specific site configurations and directory structures.
“How can I use a component that requires the window object?”
You should wrap the component in a ClientOnly tag or use defineClientComponent to ensure it only loads on the client side, avoiding SSR errors.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/antfu/vitepress/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip vitepress.zip -d .agents/skills

Documentation by Anthony Fu

VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.

Key Characteristics:

  • File-based routing with .md files

  • Vue components work directly in Markdown

  • Fast HMR with instant updates (<100ms)

  • Default theme optimized for documentation

  • Built-in search (local or Algolia)

Before working with VitePress projects:

  • Check .vitepress/config.ts for site configuration

  • Look at .vitepress/theme/ for custom theme extensions

  • The public/ directory contains static assets served as-is

The skill is based on VitePress 2.0.0-alpha.20, generated at 2026-09-25.

VitePress 2 notes (v1 → v2): install with vitepress@next; requires Node.js 22+. defineConfigWithTheme is deprecated — use defineConfig<ThemeConfig>. Native RTL support (dir option, CSS logical properties) replaces the old PostCSS-plugin approach. Built-in iconify pipeline (icons config, useIcon/VPIcon, collection:name social icons). New assetsBase (CDN) and assetsShards build options; metaChunk removed. Markdown image.lazyLoading renamed to image.lazyLoad.

Core

TopicDescriptionReference
ConfigurationConfig file setup, defineConfig, site metadatacore-config
CLICommand-line interface: dev, build, preview, initcore-cli
RoutingFile-based routing, source directory, rewritescore-routing
MarkdownFrontmatter, containers, tables, anchors, includescore-markdown

Features

Code & Content
TopicDescriptionReference
Code BlocksSyntax highlighting, line highlighting, diffs, focusfeatures-code-blocks
Vue in MarkdownComponents, script setup, directives, templatingfeatures-vue
Data LoadingBuild-time data loaders, createContentLoaderfeatures-data-loading
Dynamic RoutesGenerate pages from data, paths loader filesfeatures-dynamic-routes

Theme

TopicDescriptionReference
Theme ConfigNav, sidebar, search, social links, footertheme-config
CustomizationCSS variables, slots, fonts, global componentstheme-customization
Custom ThemeBuilding themes from scratch, theme interfacetheme-custom

Advanced

TopicDescriptionReference
InternationalizationMulti-language sites, locale configurationadvanced-i18n
SSR CompatibilityServer-side rendering, ClientOnly, dynamic importsadvanced-ssr

Recipes

TopicDescriptionReference
DeploymentGitHub Pages, Netlify, Vercel, Cloudflare, Nginxrecipes-deploy

Files

references/recipes-deploy.md


name: vitepress-deployment description: Deploying VitePress sites to various platforms including GitHub Pages, Netlify, Vercel, and more

Deployment

Deploy VitePress static sites to various hosting platforms.

Build and Preview

# Build production files
npm run docs:build

# Preview locally
npm run docs:preview

Output is in .vitepress/dist by default.

Setting Base Path

For sub-path deployment (e.g., https://user.github.io/repo/):

// .vitepress/config.ts
export default {
  base: '/repo/'
}
Relocatable Builds (v2)

When the final URL isn't known at build time (IPFS gateways, archives, docs bundled into an app, file://), set base: './'. Every page then references assets/pages relative to its own location and the same build works from any sub-path without rebuilding. Keep cleanUrls off, avoid root-absolute head paths, and use Markdown link syntax for site-absolute links.

GitHub Pages

Create .github/workflows/deploy.yml:

name: Deploy VitePress

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v6
        with:
          node-version: 24
          cache: npm
      - name: Cache VitePress
        uses: actions/cache@v4
        with:
          path: docs/.vitepress/cache
          key: ${{ runner.os }}-vitepress-${{ hashFiles('docs/**', 'package-lock.json') }}
          restore-keys: ${{ runner.os }}-vitepress-
      - run: npm ci
      - run: npm run docs:build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment

Enable GitHub Pages in repository settings → Pages → Source: "GitHub Actions".

For pnpm, add before setup-node:

- uses: pnpm/action-setup@v4
  with:
    version: 9

Netlify / Vercel / Cloudflare Pages

Configure in dashboard:

SettingValue
Build Commandnpm run docs:build
Output Directorydocs/.vitepress/dist
Node Version22 (or above)

Warning: Don't enable "Auto Minify" for HTML - it removes Vue hydration comments.

Vercel Configuration

For clean URLs, add vercel.json:

{
  "cleanUrls": true
}

GitLab Pages

Create .gitlab-ci.yml:

image: node:24

pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run docs:build
  artifacts:
    paths:
      - public
  only:
    - main

Set outDir: '../public' in config if needed.

Firebase

// firebase.json
{
  "hosting": {
    "public": "docs/.vitepress/dist",
    "ignore": []
  }
}
npm run docs:build
firebase deploy

nginx

Serve static files, cache hashed assets, and handle cleanUrls: true:

map $uri $cache_control {
    ~^/assets/  "public, max-age=31536000, immutable";
    default     "no-cache";
}

server {
    listen 8080;
    root /usr/share/nginx/html;
    index index.html;
    absolute_redirect off;

    add_header Cache-Control $cache_control always;

    location / {
        try_files $uri $uri.html $uri/index.html =404;
    }

    # redirect /foo/ -> /foo when foo.html exists (clean URLs)
    location ~ ^(?<page>.+)/$ {
        if (-f $document_root$page.html) {
            return 301 $page$is_args$args;
        }
        try_files $page/index.html =404;
    }

    error_page 404 /404.html;
}

Important: Don't default to index.html like SPAs - use $uri.html for clean URLs.

HTTP Cache Headers

For hashed assets (immutable):

Cache-Control: max-age=31536000, immutable
Netlify _headers

Place in docs/public/_headers:

/assets/*
  cache-control: max-age=31536000
  cache-control: immutable
Vercel vercel.json
{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Other Platforms

PlatformGuide
AzureSet app_location: /, output_location: docs/.vitepress/dist
Surgenpx surge docs/.vitepress/dist
harvisnpx harvis docs/.vitepress/dist
HerokuUse heroku-buildpack-static
RenderBuild: npm run docs:build, Publish: docs/.vitepress/dist
Stormkit / CloudRay / Hostinger / LizardFollow each provider's VitePress guide

Key Points

  • Set base for sub-path deployments; base: './' for relocatable builds (v2)

  • Node.js 22+ required (v2)

  • GitHub Pages requires workflow file and enabling Pages in settings

  • Cache docs/.vitepress/cache in CI to speed up builds

  • Most platforms: Build npm run docs:build, output docs/.vitepress/dist

  • Don't enable HTML minification (breaks hydration)

  • Cache /assets/* with immutable headers

  • For clean URLs on nginx, use try_files $uri $uri.html $uri/index.html =404

<!-- Source references: - https://vitepress.dev/guide/deploy -->

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Anthony Fu
Publisher
Anthony Fu (Community)
Source
antfu/skills · skills/vitepress · commit f63e9ec
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthony Fu or Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vitepress.zip