什么是 VitePress？

VitePress 是 VuePress 的小弟弟，在 Vite 上构建的。因为vuePress是利用webpack构建的，可以参考VuePress

使用

1.安装

pnpm add vitepress -D

mkdir docs

3.添加这些脚本到 package.json

"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }

4.增加一个文档文件

echo '# Hello VitePress' > docs/index.md

5.本地启动服务

pnpm run docs:dev

配置文件

在 docs 目录下创建 .vitepress， .vitepress下创建配置文件推荐使用config.ts文件

// .vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  // ...
})

VitePress 带有 2 种类型的配置。一种是 App Configs，它配置站点的基本功能，例如设置站点的标题，或自定义 Markdown 解析器的工作方式。其次是 Theme Config，用于配置站点的主题，例如添加侧边栏，或者添加“在 GitHub 上编辑此页面”链接等功能。

App configs

base
lang
title
titleTemplate
description
markdown
appearance
lastUpdated

theme-configs

VitePress 提供默认主题，可以安装主题，一下是默认主题的配置

logo
siteTitle
nav
sidebar
socialLinks
footer
editLink
lastUpdatedText
carbonAds

部署`github pages`

1.设置base 您的github仓库地址是： https://github.com/<USERNAME>/<REPO>，则将 base 设置为 / <REPO>/。 2.在项目中，使用以下内容创建 deploy.sh 文件

#!/usr/bin/env sh

set -e

# 构建
npm run docs:build

cd docs/.vitepress/dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

3.在package.json 增加部署脚本命令