前言
对于我们优秀的搬砖人来说,一个优美的博客是我们搬砖人的门面,但我们又不能从零开始搭建博客,那么今天我就来介绍一个静态博客框架--veupress,让我们快速的搭建自己的博客。
首先我们来看一下vuepress框架介绍:

在官方的介绍中,我们不难看出,这个vuepress其实是用来写技术文档的,那我们该如何把他变成如下图所示的个人博客呢?

接下来,我就来和大家细细的这个博客的搭建。
拉取代码
首先,我们先拉取代码,项目地址( gitee.com/xiaopanpany... ), 我们根据readme文档的提示拉取代码, 接着在本地安装一下依赖(node版本不宜太高),得到如下一份目录结构:

等安装完依赖以后,我们先将项目跑起来,试试能不能运行。之后我们就可以在(http://localhost:8080/my-blog/) 地址看到我们在本地运行的博客。效果如下:

更换配置
在我们成功的将项目拉下来并跑起来之后,我们就可以更换配置了。我们首先来到docs文件夹下的config.js文件下,我们可以看到一个module.exports
抛出的一个对象,这个对象就是我们标题栏,信息栏等的配置,我们只需要在这里配置即可,vuepress
会自动读取到该配置对象。接下来我来介绍一下配置:
- 文件读取路径(需要和项目名相同):

- 博客标题和描述:

- 打包文件路径和主题:

- 博客头像(静态资源在public文件夹)和语言:

- 导航栏:

- 其他个性化插件:

在我们将这些配置完成之后,我们也就完成了我们博客的基本配置。接下来我们就将文章给导入进来。
导入文章
vuepress
的文章是 md
格式文件,我们只需要创建md
格式的文件及其分类的文件夹,然后写入文章和一些配置即可,它自动识别并分类,如下图所示:


这样我们即可看到有文章标题、基本信息、标签和分类等模块的H5
页面, 如下图所示:

这样我们就完成一个跑在我们本地个人博客了。接下来就剩最后一步上线了。
项目上线
项目上线有两种方式:第一种是直接打包跑在自己的服务器上, 第二种就是上传到仓库上,利用仓库的pages
服务来跑你的项目。这里我来介绍一下第二种方式。
首先我们在项目中创建一个 xxx.sh
为后缀的脚本文件,脚本文件的配置如下:

接下来我们就使用 sh xxx.sh
的命令执行脚本文件。
最后一步就是在仓库中用服务的pages
服务将该仓库部署上线。
这样我们就完成了我们的项目上线。接下来我们直接访问仓库给我们提供的路径即可看到如下效果。
我部署完的个人博客地址( xiaopanpanya.gitee.io/my-blog ),感兴趣的小伙伴可以行动起来,部署一个自己的个人博客。