Gitbook、Hexo、WordPress等之前折腾过一下，各有优缺点，最后决定用尤大的 Vuepress，相关介绍自行移步至官网查阅：vuepress.docschina.org/，就不复制粘贴了。
网上大部分文章都是教如何把Vuepress部署到Github上，上面也说了不稳定，
部署到云服务器上也不难，就是build一下生成带样式的 静态网站，通过ftp传上去，
配置下Nginx，域名解析下即可。于是乎每次更新博客的流程：
本地修改 → 命令行build → ftp工具上传生成文件进行覆盖
可以是可以，就是有点繁琐，其实可以把build这一步放在服务器上，就不用ftp传了：
答：自动化构建 了解下？说到这个名词，第一反应是不是：Gitlab CI + jenkins，
但是小博客用他两太重了，官方推荐Gitlab服务器内存4G以上，Jenkins对配置要求也较高， 内存只有一个鸡的云服务器表示心有余而力不足。
我把目光转向了国产Github → 码云Gitee，支持 WebHooks
em，要写一个API接口给它调，接口功能：拉取最新博客源代码 → 执行vuepress build构建命令 等。 一切准备就绪后的结果：我文章写完，git push一波，个人博客就自动更新了。妙啊！ 另外，考虑到云服务器的硬盘只有50G，图片类资源文件就不丢上去了，直接用CDN~
本节就来手把手实践一波~
0x1、Vuepress 本地部署
① Node.js 安装配置
官网下载：nodejs.org/en/download…，傻瓜式下一步安装，完成后可配置
npm 安装的 全局模块 和 缓存cache的路径，不然全局安装的模块都会塞到：
C:\Users\用户名\AppData\Roaming\npm 中，占用C盘空间，可通过下述命令
修改为node.js的安装文件夹：
cd nodejs # 创建文件夹 mkdir node_global mkdir node_cache # 设置 npm config set prefix node_global npm config set cache node_cache # 配置下环境变量(路径根据自己的实际情况进行替换)： # 系统变量 => 新建 => NODE_PATH => 输入 D:\Coding\nodejs\node_global\node_modules # 用户变量Path中删除： C:\Program Files\nodejs\node_global # 新增 D:\Coding\nodejs\node_global
附：Node.js 及 npm 更新相关命令：
# 查看安装的node.js版本 node -v # 清除cache sudo npm cache clean -f # 安装用于管理node.js版本的n工具 sudo npm install -g n # 安装最新node.js sudo n stable # 查看版本号 npm -v # 更新最新版 npm install npm@latest -g.
Tips：深入了解npm可移步至：www.npmjs.cn/getting-sta…
② 快速搭建
走一波命令安装vuepress，以及创建相关文件
# 全局安装，执行一次即可 npm install -g vuepress # 创建博客项目 mkdir Blog # 项目初始化 npm init -y # 添加主README.md文件 touch README.md # 添加docs文件夹 mkdir docs # docs文件夹中创建.vuepress文件夹 cd docs mkdir .vuepress # 新建总配置config.js文件 cd .vuepress touch config.js # dosc文件夹中创建README.md文件 cd .. touch README.md
此时目录结构比较简单：
D:\Blog ├── docs | ├── .vuepress | | └── config.js | └── README.md ├── package-lock.json ├── package.json └── README.md
接着打开package.json添加运行脚本：
"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }
保存后，输入下述命令中的一个即可运行：
npm run dev yarn run dev
运行成功，可以看到控制台输出：
此时打开localhost:8080，即可看到效果。
③ 推荐的目录结构
VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下(小改了一些~)：
. ├── docs │ ├── .vuepress (可选) → 存放全局配置、组件、静态资源等 │ │ ├── components (可选) → 该目录中的 Vue 组件将会被自动注册为全局组件 │ │ ├── theme (可选) → 存放本地主题 │ │ │ └── Layout.vue │ │ ├── public (可选) → 静态资源目录 │ │ ├── styles (可选) → 存放样式相关的文件 │ │ │ ├── index.styl → 将会被自动应用的全局样式文件，会生成在最终的 │ │ │ │ CSS 文件结尾，具有比默认样式更高的优先级。 │ │ │ └── palette.styl → 重写默认颜色常量，或者设置新的 stylus 颜色常量 │ │ ├── templates (可选，谨慎配置，最好基于默认模板文件来修改) → 存储HTML模板文件 │ │ │ ├── dev.html → 用于开发环境的HTML模板文件 │ │ │ └── ssr.html → 重写默认颜色常量，或者设置新的 stylus 颜色常量 │ │ ├── config.js → 全局配置文件 │ │ ├── enhanceApp.js → 客户端应用的增强 │ ├── guide (可选) → 一般会在此目录下创建网站指南 │ │ └── README.md │ ├── study (举例) │ │ └── study01.md │ │ └── study02.md │ ├── README.md → 博客首页 └── package.json → 项目启动配置
④ 默认主题配置
此处只是做下简单配置，更详细的配置可移步至官方文档：
1）页面标题与图标
修改 → docs/.vuepress/config.js
module.exports = { title: 'CoderPig的小世界', // 网站标题 description: '吾日三省吾身', // 网站描述 head: [ // 网页标签图标，'/'指向docs/.vuepress/public 文件目录 ['link', { rel: 'icon', href: '/img/favicon.ico' }] ], base: '/',// 设置站点根路径 dest: './ROOT', // 设置输出目录 plugins: [], }
2) 设置封面页
修改 → docs/README.md
--- home: true heroImage: /img/logo.png heroText: CoderPig的小世界 tagline: 吾日三省吾身 actionText: Get Started → actionLink: /zh/guide/ features: - title: 待填充 details: 待填充 - title: 待填充 details: 待填充 - title: 待填充 details: 待填充 footer: MIT Licensed | Copyright © 2018-present Evan You ---
看下运行效果，很Nice！
