Leader 让我做 CMS 帮助中心的技术选型，我撸了 VuePress 和 GitBook，然后选择...

修改 package.json 的 scripts, 先为每个 md 文件添加组件，然后打包，最后再一一删除 markdown 中的 comment 组件。

"build": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js",

笔者的项目里面是把添加了二条命令的，比如 npm run dev:md 和 npm run build:md 才是有评论组件的。

"scripts": {
    "dev": "vuepress dev docs",
    "dev:md": "node ./builds/addComponents.js && vuepress dev docs && node ./builds/delComponents.js",
    "docs:dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "build:md": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js",
    "docs:build": "vuepress build docs",
    "delay": "bash delay.sh",
    "test": "echo "Error: no test specified" && exit 1"
  },

想要怎样的打包命令，自己修改就行。

7. 注意：如果你的文章的评论要和 github 的 issues 的同步的话，还要在 issues 的 label 里添加相应的 pathname 和 gitalk，其中 pathname 就是评论组件里面的 location.pathname 。

比如我的：

当我们将文档写好后就到了我们最关心的地方了，怎么将打包后的代码推送到远程仓库的 gh-pages 分支上。

1. 创建一个deploy.sh

touch deploy.sh

2. 编写脚本

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

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

# 如果发布到 https://.github.io
# git push -f git@github.com:/.github.io.git master

# 如果发布到 https://.github.io/
# git push -f git@github.com:/.git master:gh-pages

cd -

3. 设置 package.json

{
    "scripts": {
 "deploy": "bash deploy.sh"
      },
}

4. 发布

npm run deploy   // 即可自动构建部署到 github 上。

5. 访问自己的域名，比如笔者的：https://biaochenxuying.github.io/blog/ 。

详情移步 vuepress 官网 vuepress.vuejs.org。

效果：

效果详情请看：http://biaochenxuying.cn:2021。

• 安装 GitBook：npm i gitbook-cli -g
• 初始化 GitBook 项目：gitbook init
• 安装 GitBook 依赖：gitbook install
• 开启 GitBook 服务：gitbook serve
• 打包 GitBook 项目：gitbook build
• GitBook 命令行查看：gitbook -help
• GitBook 版本查看：gitbook -V

然后，我们找个空文件夹，初始化一个 GitBook 项目。

• gitbook init 初始化 README.md 和 SUMMARY.md 两个文件.
• gitbook build 本地构建但不运行服务，默认输出到 _book/ 目录.
• gitbook serve 本地构建并运行服务，默认访问 http://localhost:4000 实时预览.

- GitBook
 - README.md
 - SUMMARY.md

• README.md 是默认首页文件，相当于网站的首页 index.html ,一般是介绍文字或相关导航链接.
• SUMMARY.md 是默认概括文件，主要是根据该文件内容生成相应的目录结构，同 README.md 一样都是被 gitbook init 初始化默认创建的重要文件.
• _book 是默认的输出目录，存放着原始 markdown 渲染完毕后的 html 文件，可以直接打包到服务器充当静态网站使用。一般是执行 gitbook build 或 gitbook serve 自动生成的.
• book.json 是配置文件，用于个性化调整 gitbook 的相关配置，如定义电子书的标题、封面、作者等信息。虽然是手动创建但一般是必选的.
• GLOSSARY.md 是默认的词汇表，主要说明专业词汇的详细解释，这样阅读到专业词汇时就会有相应提示信息，也是手动创建但是可选的.
• LANGS.md 是默认的语言文件，用于国际化版本翻译和 GLOSSARY.md 一样是手动创建但是可选的.

book.json 的意思：

1. title：网站标题
2. author：网站作者
3. description：网站功能描述
4. language：网站使用语言
5. styles：网站额外配置的样式表
6. plugins：网站使用的插件
7. pluginsConfig：网站使用的插件的额外配

笔者的 book.json:

{
  "title": "夜尽天明的博客",
  "author": "biaochenxuying",
  "description": "大前端技术为主，读书笔记、随笔、理财为辅，做个终身学习者。",
  "language": "zh-hans",
  "plugins": [
    "-highlight",
    "copy-code-button",
    "search-pro",
    "-search",
    "-lunr",
    "expandable-chapters",
    "splitter",
    "-sharing",
    "github-buttons",
    "donate",
    "tbfed-pagefooter",
    "baidu-tongji",
    "anchor-navigation-ex"
  ],
  "pluginsConfig": {
    "github-buttons": {
      "buttons": [
 {
   "user": "biaochenxuying",
   "repo": "blog", 
   "type": "star",
   "count": true,
   "size": "small"
 }, 
 {
   "user": "biaochenxuying",
   "width": "160", 
   "type": "follow", 
   "count": true,
   "size": "small"
 }
      ]
    },
    "donate": {
      "button": "打赏",
      "wechatText": "微信打赏",
      "wechat": "https://camo.githubusercontent.com/ee094d402f957e5d656a399b9dc50ff8c010114e/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f31323839303831392d666661623762643234643038633030642e6a7065673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f31323430"
    },
    "tbfed-pagefooter": {
      "copyright":"Copyright © biaochenxuying.cn 2019",
      "modify_label": "该文件修订时间：",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    },
    "baidu-tongji": {
      "token": "XXXXX"
    },
    "anchor-navigation-ex": {
      "showLevel": false
    }
  }
}