vitepress搭建并部署网站

由 Vite 和 Vue 驱动的静态站点生成器将 Markdown 变成优雅的文档，只需几分钟

参考网址：https://docs.zhengxinonly.com/

创建项目

在目录 D:\GyeesoftProjects\VitePress\VueDocs ，右键打开cmd窗口

shell

yarn add -D vitepress
yarn vitepress init

#在vscode中打开
code .
npm run docs:dev

#分别创建目录
docs ：按分类存放.md文件
public\assets\images\ 用于存放图谱
需要将/public/assets/images/image-20241003210907822.png 转换为
/public/assets/images/image-20241003210907822.png

#修改package.json文件，增加授权
  "license": "MIT",
#修改.vitepress/config.mjs 增加搜索，logo

这是我的配置，简单介绍一下

第一个是在当前根目录下创建vitepress项目
站点标题和描述。后续可以在配置中改
主题，建议选择第二个
是否使用ts，选择否
是否添加脚本到package.json，这个还是需要的，启动命令，打包命令这些都得用

初始化成功后，在命令窗口code . 使用vscode打开项目，会看到这样一个目录。接下来简单介绍一下每个文件的含义

.vitepress，最核心的目录，
theme目录。自定义主题配置，css样式等
config.mjs。最核心的文件，各种配置导航栏、侧边栏、标题什么的都是在这里
node_modules。安装的依赖
api-examples.md和markdown-examples.md。官方给的两个示例
index.md。主页相关
package.json和pnpm-lock.yml。包管理工具需要用的

2-6在index.md文件中配置，对应关系如下：name<==>2text<==>3tagline<==>4actions<==>5features<==>6；其中5是可以跳转的，建议所有md文件放到docs目录下，link属性带文件夹名称（如。link: /docs/api-examples）。

markdown

hero:
  name: "gyeesoft 帮助文档"
  text: "gyeesoft 股票相关文档"
  tagline: My great project tagline
  image: 
    src: /.vitepress/theme/logo.png
    alt: logo image
  actions:
    - theme: brand
      text: 快捷方式1
      link: /docs/markdown-examples
    - theme: alt
      text:  快捷方式1
      link: /docs/api-examples

features:
  - title: 🍊功能Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: 🍏Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: 🍐Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit

1、7、8、9这个三个配置config.mjs中配置。对应关系1：title, 7：nav， socialLinks对应8。description是SEO要用的。9在defineConfig / themeConfig 节点下增加footer节点。
json
```
  title: "gyeesoft 帮助文档",
  description: "gyeesoft 股票相关文档",
  themeConfig: {
	footer:{
      copyright:"copyright @2024 gyeesoft"
    },
  }
```

在config.mjs中配置搜索框

json

//底部授权
footer:{
      copyright:"copyright @2024 gyeesoft"
    },
//设置logo,浏览器tab卡显示ico
head: [["link", { rel: "icon", href: "/logo.svg" }]],
// 设置搜索框的样式
       search: {
        provider: "local",
        options: {
          translations: {
            button: {
              buttonText: "搜索文档",
              buttonAriaLabel: "搜索文档",
            },
            modal: {
              noResultsText: "无法找到相关结果",
              resetButtonTitle: "清除查询条件",
              footer: {
                selectText: "选择",
                navigateText: "切换",
              },
            },
          },
        },
      },

修改端口

在根目录下创建 vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
 
export default defineConfig({
  server: {
    port: 5000
  }
})

打包

在package.json 配置打包脚本 ,运行 yarn run docs:build 进行打包

json

{
  "devDependencies": {
    "vitepress": "^1.3.4"
  },
  "license": "MIT",
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  }
}

vitepress搭建并部署网站 ​

创建项目 ​

修改端口 ​

打包 ​

vitepress搭建并部署网站

创建项目

修改端口

打包