一、什么是 vuepress

VuePress 是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。它是为了满足 Vue 自己的子项目文档的需求而创建的。
实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网
效果：

二、怎么白嫖？

本文推荐两种方案：

github 的 github pages
gitee 的 gitee pages

具体使用方法，后面会说，下面就开始动手。

三、开始

3.1 搭建项目

创建目录githubio， mkdir githubio，进入项目目录githubio，初始化项目

npm init -y

安装 vuepress

npm install vuepress -S

在 githubio 文件夹中创建docs文件夹，在docs中创建.vuepress文件夹和 README.md，在.vuepress中创建public文件夹和config.js文件，项目结构如下所示：

githubio
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

在config.js文件内配置网站标题、描述、主题等信息，具体配置看官方文档 vuepress config

module.exports = {
  title: 'Chen\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    logo: '/logo.JPG',
    nav:[ // 导航栏配置
      {text: '导航一', link: '/route-one/' },
      {text: '导航二', link: '/route-two/'},
      {text: '外链', link: 'https://baidu.com'}      
    ],
    sidebarDepth: 2, // 侧边栏显示2级
    sidebar: 'auto'  // 侧边栏配置
  }
};

在 package.json 内，添加命令：

  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }

一切就绪，跑项目查看效果

npm run dev

3.2 丰富项目

添加多个侧边栏，修改config.js, 我参考的是 vue 的配置 vue doc

const sidebar = {
  'route-one': [
    {
      title: '目录一',
      collapsable: false,
      children: [
        '',
        '/route-one/readme1',
        '/route-one/readme2',
      ]
    },
    {
      title: '目录二',
      collapsable: false,
      children: [
        '/route-one/readme3',
        '/route-one/readme4',
      ]
    }
  ],
  'route-two': [
    {
      title: '目录一',
      collapsable: false,
      children: [
        '',
        '/route-two/readme1',
        '/route-two/readme2',
      ]
    }
  ]
}

module.exports = {
  title: 'Chen\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    logo: '/logo.JPG',
    nav:[ // 导航栏配置
      {text: '导航一', link: '/route-one/' },
      {text: '导航二', link: '/route-two/'},
      {text: '外链', link: 'https://baidu.com'}      
    ],
    sidebarDepth: 2, // 侧边栏显示2级
    sidebar: {
      collapsable: false,
      '/route-one/': sidebar['route-one'],
      '/route-two/': sidebar['route-two']
    }
  }
};

添加各目录结构对应的.md文档，如下

.md文件内容侧边标题自由发挥。

最后，继续查看本地效果，看到效果后，任务完成。

四、开始部署（正式白嫖）

4.1 github

4.1.1 登录 github ，新建仓库

从 github pages 内可以看到详细的内容，我在这里总结一下。
新建仓库，必须是 <username>.github.io。例如我的 username 是 chengjing0823，那么我新建的仓库就是 chenjing0823.github.io

因为我已经创建过了，会有警告

仓库建好后，就再也不去动他了

4.1.2 配置发布脚本

在刚刚的 githubio 项目内，跟package.json同级，新建文件 deploy.sh，内容如下：

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

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

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

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

# 如果你想要部署到 https://USERNAME.github.io
# git push -f git@github.com:chenjing0823/chenjing0823.github.io.git master
git push -f https://github.com/chenjing0823/chenjing0823.github.io.git master
# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

然后在 package.json 内新增脚本

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

最后运行脚本

npm run deploy

打开链接：http://chenjing0823.github.io/ 查看效果

4.2 gitee

使用gitee白嫖相对简单很多

只需要将 githubio 项目，上传到 gitee 仓库。
点击Gitee Pages

上传生成好的html文件到仓库
仓库界面-服务-Gitee Pages 选择部署分支、填写部署目录（Hugo生成的在/public）, 填写后点击更新即可

使用vuepress免费搭建个人博客，白嫖就完事儿了