基于 VitePress 快速搭建一个文档站

You,•3 min read
文档
Back

基于 VitePress 快速搭建一个文档站

SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案

https://vitepress.vuejs.org/ (opens in a new tab)

介绍

快速使用

按照文档简单启动了一下还是很舒服的

配置

https://vitepress.vuejs.org/guide/configuration (opens in a new tab)

目录结构

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

config.js 文件

export default { 
 title: 'VitePress', 
 description: 'Just playing around.' 
}

部署

https://vitepress.vuejs.org/guide/deploying (opens in a new tab)

主要看GitHub的部署配置

https://vitepress.vuejs.org/guide/deploying#github-pages (opens in a new tab)

name: Deploy
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: yarn
      - run: yarn install --frozen-lockfile
 
      - name: Build
        run: yarn docs:build
 
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist
          # cname: example.com # if wanna deploy to custom domain

编写

Markdown

内置了 Markdown 插件

标题锚

标题会自动应用锚链接。可以使用 markdown.anchor选项配置锚点的渲染

链接

内部链接转换为 SPA 导航的路由器链接。此外，每个子目录中包含的每个 index.md 都会自动转换为 index.html，并带有相应的 URL /

类似下面的目录结构

.
├─ index.md
├─ foo
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ index.md
   ├─ three.md
   └─ four.md

Frontmatter 前言配置

开箱即用地支持 YAML frontmatter (opens in a new tab)

GitHub 风格的表格

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Emoji 🎉

:tada: :100:

🎉 💯

提供所有表情符号的列表 (opens in a new tab)

Table of Contents 目录

[[toc]]

可以使用 markdown.toc 选项配置 TOC 的呈现

Custom Containers 自定义容器

自定义容器可以通过它们的类型、标题和内容来定义

Default Title 默认标题

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

raw

这是一个特殊的容器，可以用来防止与 VitePress 的样式和路由冲突。这在您记录组件库时特别有用。您可能还想查看 whyframe 以获得更好的隔离

Theme 主题

Introduction 介绍

VitePress comes with its default theme providing many features out of the box. Learn more about each feature on its dedicated page listed below.

Using a Custom Theme

隐藏配置

哈哈 提交了一个PR 被合并了 开心😄

lastUpdated

展示上次的更新时间

.vitepress / config.js

{
 lastUpdated: true,
}

社交链接

2026 © Lizhenyui.