1. 什么是Vuepress？
Vuepress是官方出品的一款极简静态网站生成器，它的初衷就是为了用于方便快速的撰写文档。
它主要包含了以下几个特点：
- 非常简洁
- 良好的SEO
- 加载性能很高
- 可自定义主题
- 可以在markdown中写vue组件
上面几点主要是Vuepress比较突出的几个特点。对于博客网站SEO无疑是非常重要的，要是我们写的文章没人看，很容易失去动力的，Vuepress有着良好的SEO，除此之外，它对于有Vue基础的小伙伴是很友好的，我们自定义主题或者组件都是非常方便的，市面上的一些博客系统虽然也支持自定义主题，但是往往改起来比较费劲，需要下功夫学习。
我们来看下Vuepress官网：Vuepress
2. 准备工作
今天我们搭建的这个博客无需花费一分钱，全程免费！所需要准备的东西也是很少的！
基础环境：
- 电脑安装了git
- 电脑具有Node环境
- VScode编辑器（可选）
- gitee账号
我们的准备工作非常的简单，如果你是程序员，上面的几个环境和软件相信我不用多说，可以直接跳到第3节去。如果你是小白，那么我们先把环境搭建好即可。
环境搭建步骤：
2.1 node安装
去Node官网下载安装包：Node官网
选择自己电脑合适的版本安装即可，安装过程一直下一步。
2.2 git安装
去git官网下载安装包：git官网
选择自己电脑合适的版本安装即可，安装过程一直下一步。
2.3 gitee账号注册
到gitee官网注册一个账号一个，待会儿我们会把博客网站部署到gitee上面：git官网
3. 搭建步骤
3.1 初始化Vuepress
第一步：
在电脑任意位置创建文件夹，用于存放我们的博客系统，我这里新建了一个blog文件夹，如下图：
第二步：
在blog文件夹下打开命令行工具，如果安装了git，鼠标右键菜单里面会有git菜单，点击git bash here：
第三步：
先检查下node是否安装好，执行命令：
node -v
出现版本号则安装成功。
然后在blog文件夹下利用npm初始化，执行命令：
npm init -y
第三步：
安装vuepress，执行命令：
npm install -D vuepress
由于网络可能安装会比较慢，耐心等待即可，失败的话重新多安装几次，出现上述界面则代表安装成功。
3.2 初始化目录
第一步：
在blog文件夹下新建docs目录，然后在目录下新建README.md文件作为我们博客的首页，doc目录用于存放我们的文章和相关配置文件。
然后修改README.md内容，具体的配置项目可参考官网：配置项
--- home: true heroText: 一个分享各类资源的地方 tagline: 公众号：资料分享大师 actionText: 查看资源 → actionLink: /软件资源/软件资源 features: - title: 网盘资源 details: 所有网盘资源均来自互联网，本网站不生产任何网盘资源，网盘资源是否失效需要自行判断。 - title: 黑科技软件 details: 主要分享一些实用性的工具类、影视类、音乐类等等各种软件，均由互联网大佬提供。 - title: 教程资源 details: 分享各类教程，包括编程、各类证书考试资源等等，本网站所有教程资源均来自互联网，若涉及侵权立马删除！ footer: 科技趣玩 | 资料分享大师 ---
第二步：
修改package.json文件，该文件用于我们项目的打包和运行，修改后的代码如下：
{ "name": "blog", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "vuepress": "^1.9.7" } }
第三步：
执行命令，将博客运行起来看看效果，执行命令：
npm run dev
出现如下界面则代表运行成功：
点击链接访问：http://localhost:8080/
我们一个最简单的博客就搭建成功了。
3.3 编写文章
大家可以仔细看看README.md文件内容中有一个actionLink字段，这表示我们点击首页的按钮跳转到哪个页面。
在docs目录下新建”软件资源“文件夹，然后在文件夹内新建”软件资源.md“文件，然后编写内容：
点击首页按钮，跳转访问效果如下：
3.4 添加侧边栏
虽然我们文章添加了，但是没有侧边栏，我们需要修改一些配置文件。
在docs文件夹下新建.vuepress文件夹，然后在此文件夹下新建config.js，用于配置我们的博客相关配置，编写代码如下：
// docs/.vuepress/config.js module.exports = { title: "科技趣玩", description: "分享各类资源、教程、黑科技软件、工具等等", markdown: { lineNumbers: true, }, themeConfig: { sidebar: [ { title: '软件资源', children: ['/软件资源/软件资源' ], initialOpenGroupIndex: 1 // 可选的, 默认值是 0 } ] }, };
其中themeConfig属性中的sidebar字段就是用来配置我们的侧边栏的，具体配置项可参考官网。
效果如下：
虽然侧边栏有了，但是似乎标题不大对劲，这是因为侧边栏取的是文章的标题，因为我们的文章没有写标题，所以稍微改造一下软件资源.md：
4. 更换主题
上面的步骤已经让我们搭建出了一个最简单的博客系统了，就和Vue官网长得差不多，可能有些小伙伴不太喜欢，所以我们可以取网上找一个好看的主题改一下。
比如我们就是用下图的这种主题：
主题官网：主题
在blog目录下执行命令：
npm install vuepress-theme-reco --save-dev
然后在.vuepress/config.js文件中配置主题，代码如下
module.exports = { title: "科技趣玩", description: "分享各类资源、教程、黑科技软件、工具等等", theme: 'reco', markdown: { lineNumbers: true, }, // themeConfig: { // sidebar: [ // { // title: '软件资源', // children: ['/软件资源/软件资源' ], // initialOpenGroupIndex: 1 // 可选的, 默认值是 0 // } // ] // }, };
这个时候我们的博客就好看了一些了，当然了，如果还要更加个性化，建议去主题的官网认真查看各种配置规则。
5. 部署到gitee
我们本地把博客大致弄好之后，就要去部署了，让所有人都可以访问，这里我们就借助gitee来实现这一步。
5.1 新建仓库
在gitee上面我们新建一个仓库，用于存放我们的博客系统。
这里有一点两点需要注意：
- 仓库名称建议与个人空间地址保持一致，这样就可以就可以通过个人[空间地址.gitee.io]的形式访问了。
- 仓库私有或者共有根据个人情况而定。
个人空间地址设置：
仓库创建成功后如下图：
5.2 推送至gitee
仓库建好后，就需要将我们本地的博客系统推送至仓库。
第一步：
进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：
npm run build
第二步：
我们可以参考gitee仓库给我们的步骤操作，将代码推送到仓库。
逐行执行下列命令：
git init git add . git commit -m "初始化" git remote add origin https://gitee.com/sharemore52/myblog-demo.git git push -u origin "master"
执行完上面的命令后，我们的代码就推到了仓库中去：
5.3 部署
在仓库页面点击服务菜单，选择gitpage选项：
选择部署分支和部署目录，然后点击启动：
- 部署分支，不用改，默认master
- 部署目录，选择docs/.vuepress/dist文件夹，刚刚我们执行打包命令生成的。
部署好后就会出现一个我们的博客地址了，访问试试：
5.4 修改配置文件
可以看到我们上面访问的页面似乎出问题了，不要着急，只是我们项目配置的相关问题，我们在config.js文件中新增一段代码：
base: "./"
然后重新打包，部署，依次执行下面的命令：
npm run build git add . git commit -m "修改" git push
仓库中的代码更新后，我们重新进入gitpage目录，重新启动，这个时候就能正常访问了：
6. 常见问题解答
6.1 仓库是否可以私有？
可以的
6.2 博客地址为何多了一个路径？
像这种：https://sharemore52.gitee.io/myblog-demo/
仓库名和个人空间地址一样即可
6.3 如何做侧边栏自动化生成？
可以使用插件：vuepress-plugin-autobar
官网：官网
总结
到这里我们基本上就搭建好了个人博客，可以尽情的写文章了，总结一下大致分为以下几步：
- 安装vuepress
- 根据vuepress官网创建目录
- 创建gitee仓库
- 推送代码到gitee仓库
- 使用giteepages部署
本篇文章只介绍了如何搭建博客，如果想要让自己的博客丰富起来，一点要去官网看各种配置项规则，包括vuepress和自定义主题的官网。
