Vuepress + gitee五分钟免费搭建个人博客（保姆级教程）

前言

作为一个程序员，没有折腾过个人博客是不算完整的。技术文章的输出是我们程序员能力的一种体现，也是一种非常好的个人总结。

市面上有很多搭建个人博客的工具或框架，包括hexo、wordpress等等。不可否认，市面上有些博客系统做得很好，博客主题也很丰富，但是往往存在一个问题：比较重。

作为一个Vue程序员，我就比较推荐使用vuepress搭建个人博客，因为它毕竟是Vue出品的，大家熟知的vue官方就是利用vuepress搭建的。

本篇文章就从零开始教大家搭建一个免费的博客，零基础小白也可以学习哦！

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和自定义主题的官网。