집

Skill

웹 개발

vitepress

antfu/skills

VitePress 정적 사이트 생성기를 사용하여 문서 사이트를 구축하고, 테마를 구성하며, Vue 컴포넌트를 사용하여 Markdown을 작성합니다.

...모든 것을 확장하십시오

업데이트 된 시간 2026년 9월 7일

# documentation # markdown # vue # ssg # static site generator # vitepress

VitePress는 Vite와 Vue 3을 기반으로 구축된 정적 사이트 생성기(SSG)입니다. Markdown 콘텐츠를 적용하고 테마를 적용하여 빠른 탐색을 위한 SPA가 되는 정적 HTML을 생성합니다. 문서, 블로그, 마케팅 사이트에 이상적입니다.

주요 특징:

.md 파일을 사용한 파일 기반 라우팅
Markdown에서 Vue 컴포넌트 직접 사용
즉각적인 업데이트를 통한 빠른 HMR (
문서 최적화 기본 테마
내장 검색 (로컬 또는 Algolia)

VitePress 프로젝트 작업 전:

사이트 구성을 위해 .vitepress/config.ts 확인
사용자 정의 테마 확장을 위해 .vitepress/theme/ 확인
public/ 디렉토리에는 그대로 제공되는 정적 자산이 포함됩니다

이 스킬은 VitePress 1.x를 기반으로 하며, 2026-01-28에 생성되었습니다.

핵심

주제	설명	참조
구성	구성 파일 설정, defineConfig, 사이트 메타데이터	core-config
CLI	명령줄 인터페이스: dev, build, preview, init	core-cli
라우팅	파일 기반 라우팅, 소스 디렉토리, 리라이팅	core-routing
Markdown	Frontmatter, 컨테이너, 테이블, 앵커, 포함	core-markdown

기능

코드 및 콘텐츠

주제	설명	참조
코드 블록	구문 강조, 줄 강조, 차이점, 초점	features-code-blocks
Markdown 내 Vue	컴포넌트, script setup, 지시문, 템플릿	features-vue
데이터 로드	빌드 시간 데이터 로더, createContentLoader	features-data-loading
동적 라우팅	데이터에서 페이지 생성, 경로 로더 파일	features-dynamic-routes

테마

주제	설명	참조
테마 구성	네비게이션, 사이드바, 검색, 소셜 링크, 바닥글	theme-config
사용자 정의	CSS 변수, 슬롯, 글꼴, 전역 컴포넌트	theme-customization
사용자 정의 테마	처음부터 테마 구축, 테마 인터페이스	theme-custom

고급

주제	설명	참조
국제화	다국어 사이트, 로캘 구성	advanced-i18n
SSR 호환성	서버 사이드 렌더링, ClientOnly, 동적 가져오기	advanced-ssr

레시피

주제	설명	참조
배포	GitHub Pages, Netlify, Vercel, Cloudflare, Nginx	recipes-deploy

GitHub에서 보기

---
name: vitepress
description: Build documentation sites, configure themes, and write Markdown with Vue components using the VitePress static site generator.
---

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 1.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, site metadata | [core-config](references/core-config.md) |
| CLI | Command-line interface: dev, build, preview, init | [core-cli](references/core-cli.md) |
| Routing | File-based routing, source directory, rewrites | [core-routing](references/core-routing.md) |
| Markdown | Frontmatter, containers, tables, anchors, includes | [core-markdown](references/core-markdown.md) |

## Features

### Code & Content

| Topic | Description | Reference |
|-------|-------------|-----------|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | [features-code-blocks](references/features-code-blocks.md) |
| Vue in Markdown | Components, script setup, directives, templating | [features-vue](references/features-vue.md) |
| Data Loading | Build-time data loaders, createContentLoader | [features-data-loading](references/features-data-loading.md) |
| Dynamic Routes | Generate pages from data, paths loader files | [features-dynamic-routes](references/features-dynamic-routes.md) |

## Theme

| Topic | Description | Reference |
|-------|-------------|-----------|
| Theme Config | Nav, sidebar, search, social links, footer | [theme-config](references/theme-config.md) |
| Customization | CSS variables, slots, fonts, global components | [theme-customization](references/theme-customization.md) |
| Custom Theme | Building themes from scratch, theme interface | [theme-custom](references/theme-custom.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Internationalization | Multi-language sites, locale configuration | [advanced-i18n](references/advanced-i18n.md) |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | [advanced-ssr](references/advanced-ssr.md) |

## Recipes

| Topic | Description | Reference |
|-------|-------------|-----------|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | [recipes-deploy](references/recipes-deploy.md) |