最近用vuepress统计了一大堆看过的YY小说，说说使用过程吧

从零开始的搭建步骤

之前用过hexo搭博客，使用上和vuepress差不多，但是vuepress更轻便一些

新建github项目

在github右上角新建项目

拉取项目到本地

在本地终端使用ssh拉取项目git clone 项目地址（此处需要初始化git的SSH认证，后期提交可以便捷一些，具体步骤可以百度）

进入本地项目安装包初始化并且安装vuepress

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress
# 此处安装依赖后如果使用vscode会提示将node_modules目录加入.gitignore

# 新建一个 docs 文件夹（直接右键新建吧）
mkdir docs

# 新建一个 markdown 文件（直接右键新建吧）
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

此时进入开发阶段，但是更改文档时会出现无法热更新的情况

可以直接安装vscode插件

安装之后在编辑器右上角会出现预览按钮

在package.json新增scripts命令

{
  "name": "testVuepress",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:wb121017405/testVuepress.git",
  "author": "wb121017405 <121017405@qq.com>",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.5.0"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "deploy.sh"
  }
}

• yarn docs:dev 本地开发
• yarn docs:build 构建静态页面
  构建后可以看到目录如下
  
  .vuepress 是vuepress的配置目录
  dist 是默认的生成静态文件目录
  index.html可以直接访问（http）

根目录新增部署脚本deploy.sh

#!/usr/bin/env sh

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

# 生成静态文件
yarn docs:build

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

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

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:wb121017405/testVuepress.git master:gh-pages
# 注意！！！
# 这里将本地目录master下的docs/.vuepress/dist目录，映射到github上的gh-pages分支提交
# 这样上传可以在一个仓库里两个分支分别上传不同的代码！

cd -

执行yarn deploy部署一次

弹出git bash界面执行并且自动关闭后可以在github上看到自己的静态页面已经提交成功！
注意：此时为gh-pages分支！！！

打开github-pages

选中gh-pages分支，这时看到页面已经打开，目录定向就是该目录下的index.html文件

更改vuepress配置设置

这个时候打开github-pages页面会发现样式错乱，控制台一大堆404
这是因为项目并非github-pages根目录，而是testVuepress
vuepress官方文档配置base

在.vuepress目录下新增config.js配置文件，然后写入base配置

module.exports = {
  title: "标题",
  base: "/testVuepress/",
  description: "描述"
};

ps:等待几分钟后，重新访问页面即可

将文档源码上传到主分支

git基础操作，把源码全部提交就行（在.gitignore里添加忽略已经生成的静态文件！！！）

node_modules
docs/.vuepress/dist

项目就这样搭建完成，这样就可以免费的生成一个自己的博克啦，vuepress移动端也有样式。

添加百度统计

1. 登录百度统计https://tongji.baidu.com/
2. 点击左上角管理，点击新增页网站
3. 补充网站信息
4. 点击确定后就跳转到代码部署界面。最后一步，在config.js里添加代码

module.exports = {
  title: "标题",
  base: "/testVuepress/",
  description: "描述",
  // 引入百度统计
  head: [
    ["link", { rel: "icon", href: "/favicon.ico" }],
    [
      "script",
      {},
      `var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?秘钥";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();`
    ]
  ],
};

浏览器标签小图标添加

[“link”, { rel: “icon”, href: “/favicon.ico” }]这里添加浏览器默认ico，文件放在.vuepress/public/目录下

添加评论插件

插件有很多，这里选用Valine

按照步骤申请应用秘钥存储评论（之后的评论可以在里面查看数据库）
LeanCloud

yarn add vuepress-plugin-comment -D

在config.js添加代码

module.exports = {
  title: "标题",
  base: "/testVuepress/",
  description: "描述",
  // 引入百度统计
  head: [
    ["link", { rel: "icon", href: "/favicon.ico" }],
    [
      "script",
      {},
      `var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d8a6fdbfb8332bed5afb8abbed2f572c";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();`
    ]
  ],
  plugins: [
    [
      // 评论插件
      "vuepress-plugin-comment",
      {
        choosen: "valine",
        options: {
          el: "#valine-vuepress-comment", //整个评论组件的ID
          appId: 'Your own appId',
          appKey: 'Your own appKey',
          meta:['nick','mail'], //评论人信息填写昵称和邮箱
          path:'<%- frontmatter.to.path %>', //定位评论使用的是页面文件名，否则定向错误
          placeholder: "来喷我呀笨蛋！" //评论的输入框提示
        }
      }
    ]
  ]
};

修改评论框样式（Valine默认的宽度是100%撑满了）

文档描述

#valine-vuepress-comment {
  width: 90%;
  margin: auto;
}

后面就没有啦，很简单的小玩具，可以看看我收集的YY小说 👏👏👏

YY小说项目地址