Vitepress
Anthony FuCommunityCreated by Anthony Fu
- Skill
- Tool integration
- Software development
- MIT
- No issues found
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
Download the skill as a ZIP:
https://autogineer.com/agent-skills/antfu/vitepress/downloadUnzip 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
.mdfilesVue 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.tsfor site configurationLook at
.vitepress/theme/for custom theme extensionsThe
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
| Topic | Description | Reference |
|---|---|---|
| Configuration | Config file setup, defineConfig, site metadata | core-config |
| CLI | Command-line interface: dev, build, preview, init | core-cli |
| Routing | File-based routing, source directory, rewrites | core-routing |
| Markdown | Frontmatter, containers, tables, anchors, includes | core-markdown |
Features
Code & Content
| Topic | Description | Reference |
|---|---|---|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | features-code-blocks |
| Vue in Markdown | Components, script setup, directives, templating | features-vue |
| Data Loading | Build-time data loaders, createContentLoader | features-data-loading |
| Dynamic Routes | Generate pages from data, paths loader files | features-dynamic-routes |
Theme
| Topic | Description | Reference |
|---|---|---|
| Theme Config | Nav, sidebar, search, social links, footer | theme-config |
| Customization | CSS variables, slots, fonts, global components | theme-customization |
| Custom Theme | Building themes from scratch, theme interface | theme-custom |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Internationalization | Multi-language sites, locale configuration | advanced-i18n |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | advanced-ssr |
Recipes
| Topic | Description | Reference |
|---|---|---|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | recipes-deploy |
Files
- ATTRIBUTION.mdAdded by AutoGineer904 B
- GENERATION.md139 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md3.6 KiB
- references/advanced-i18n.md6.3 KiB
- references/advanced-ssr.md4.0 KiB
- references/core-cli.md2.5 KiB
- references/core-config.md7.1 KiB
- references/core-markdown.md6.3 KiB
- references/core-routing.md4.0 KiB
- references/features-code-blocks.md3.6 KiB
- references/features-data-loading.md4.3 KiB
- references/features-dynamic-routes.md4.9 KiB
- references/features-vue.md3.6 KiB
- references/recipes-deploy.md5.3 KiB
- references/theme-config.md6.9 KiB
- references/theme-custom.md5.7 KiB
- references/theme-customization.md8.3 KiB
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:previewOutput 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: deploymentEnable GitHub Pages in repository settings → Pages → Source: "GitHub Actions".
For pnpm, add before setup-node:
- uses: pnpm/action-setup@v4
with:
version: 9Netlify / Vercel / Cloudflare Pages
Configure in dashboard:
| Setting | Value |
|---|---|
| Build Command | npm run docs:build |
| Output Directory | docs/.vitepress/dist |
| Node Version | 22 (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:
- mainSet outDir: '../public' in config if needed.
Firebase
// firebase.json
{
"hosting": {
"public": "docs/.vitepress/dist",
"ignore": []
}
}npm run docs:build
firebase deploynginx
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, immutableNetlify _headers
Place in docs/public/_headers:
/assets/*
cache-control: max-age=31536000
cache-control: immutableVercel vercel.json
{
"headers": [
{
"source": "/assets/(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000, immutable"
}
]
}
]
}Other Platforms
| Platform | Guide |
|---|---|
| Azure | Set app_location: /, output_location: docs/.vitepress/dist |
| Surge | npx surge docs/.vitepress/dist |
| harvis | npx harvis docs/.vitepress/dist |
| Heroku | Use heroku-buildpack-static |
| Render | Build: npm run docs:build, Publish: docs/.vitepress/dist |
| Stormkit / CloudRay / Hostinger / Lizard | Follow each provider's VitePress guide |
Key Points
Set
basefor 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/cachein CI to speed up buildsMost platforms: Build
npm run docs:build, outputdocs/.vitepress/distDon't enable HTML minification (breaks hydration)
Cache
/assets/*with immutable headersFor 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