VitePress搭建自己的文档网站

VitePress搭建自己的文档网站

---

效果图

---

一、VitePress 是什么？

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

以上可能说的有点官方，下面带大家看一下：

看到这个是不是感觉这个官方文档都有点相似。没错，他们就是使用的VitePress进行搭建的。

二、使用步骤

1.安装

提示一下，Node.js 18 及以上版本。

npm add -D vitepress

2.创建项目

npx vitepress init

需要回答几个简单的问题：

3.项目运行

 "docs:dev": "vitepress dev docs",
 "docs:build": "vitepress build docs",
 "docs:preview": "vitepress preview docs"

运行成功可以看到下面的界面

三、使用方法

1.项目构造

.
docs/                   # 文档根目录
    .vitepress/         # VitePress 专用目录
        dist/           # 打包后产物目录
        theme/
            custom.css  # 自定义的样式文件
            index.js    # 自定义主题
        config.js       # VitePress 配置文件
    public/             # 静态资源
    index.md            # 首页

2.站点配置

参考文档

https://vitepress.dev/reference/default-theme-home-page

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "菜鸟很沉"
  # text: "这里是菜鸟很沉的个人博客"
  tagline: 这里是菜鸟很沉的个人博客，记录一些学习笔记
  actions:
    - theme: brand
      text: Vue.js
      link: https://cn.vuejs.org/
    - theme: alt
      text: VitePress
      link: https://vitepress.dev/zh/

  image:
      src: /logo.jpg
      alt: VitePress

features:
  - title: Element Plus
    details: 基于 Vue 3，面向设计师和开发者的组件库
    icon:
      src: /element-plus-logo.svg
      width: 50
    link: https://element-plus.org/zh-CN/#/zh-CN
  - title: Vite
    details: 下一代的前端工具链
    icon:
      src: https://vitejs.dev/logo.svg
      width: 40
    link: https://element-plus.org/zh-CN/#/zh-CN
  - title: Pinia
    details: 符合直觉的 Vue.js 状态管理库
    icon:
      src:   https://pinia.vuejs.org/logo.svg
      width: 40
    link: https://pinia.vuejs.org/zh/
  - title: GoView
    details: 所想所得，高效创作 拖拉拽配置，灵活交互，大屏设计搭建时间减少 80%
    icon:
      src:  https://goviewpro.oss-cn-hangzhou.aliyuncs.com/saas/logo.png
      width: 40
    link: /goview/index
---

总结

做好自己的文档网站后可以选择发布到服务器或者是Github