本站原先是使用vuepress开发部署的，后来转向了vitepress，本文主要讲述vuepress从开发到部署的流程

---

如何动态修改config.js文件

有如下需求：

1. 构建 vuepress 时自动把 docs目录下所有的文件都写进 config.js 中，自动生成侧边栏

2. 这样就需要动态修改 config.js 了，为了好看，我们还要保留 js 文件的缩进

3. 为不同的子主题创建侧边栏，要遍历 docs 中的目录，执行 1 的操作

解决方案：

1. 在 /bin 目录下创建 buildSidebar.js 脚本，并在 package.json 中添加这条命令，这样就可以通过 npm run 来使用这条命令，并在构建之前执行这条命令

2. 使用 fs.readdirSync 获取目录下的所有文件，使用 fs.readFileSync 读取 config.js 文件，使用 fs.writeFileSync 回写

3. 通过字符串拼接，替换，修改 sidebar 配置；通过添加空格的方式维持缩进（这个实现听起来很烂）

具体实现：

// 自动构建侧边栏
const fs = require('fs')
const path = require('path')
function blank(num) {
  let result = ''
  for(let i = 0; i < num; i++) {
    result += ' '
  }
  return result
}

// 读取文件列表
let fileList = fs.readdirSync(path.join(__dirname, '../docs'), {
  withFileTypes: true
})
let dirList = fileList.filter(item => !item.isFile() && item.name !== '.vuepress')
fileList = fileList.filter(item => item.isFile())

// 读取配置
let config = fs.readFileSync(path.join(__dirname, '../docs/.vuepress/config.js'), 'utf8')

// 构建config字符串
let sidebarConfig = 'sidebar: {\n'

dirList.forEach(item => {
  sidebarConfig += `${blank(6)}'/${item.name}/': [\n`
  let subFileList = fs.readdirSync(path.join(__dirname, `../docs/${item.name}`), {
    withFileTypes: true
  }).filter(item => item.isFile())
  subFileList.forEach(item => {
    sidebarConfig += `${blank(8)}'${item.name === 'README.md' ? '' : item.name}',\n`
  })
  sidebarConfig += `${blank(6)}],\n`
})

let root = `${blank(6)}'/': [\n`
fileList.forEach(item => {
  if(item.name === 'README.md') return
  root += `${blank(8)}'${item.name}',\n`
})
root += `${blank(6)}]\n`
sidebarConfig += root

sidebarConfig += `${blank(4)}}`

// 替换，回写
config = config.replace(/sidebar: \{([\s\S]*?)}/g, sidebarConfig)
fs.writeFileSync(path.join(__dirname, '../docs/.vuepress/config.js'), config)

自动部署vuePress到服务器

1. inquirer 接收服务器账号密码

2. ssh2 上传文件到服务器

参考文章 https://segmentfault.com/a/1190000020619327