如何快速用vuepress搭建个人博客

前言

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

首先我们来看一下vuepress框架介绍:

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

接下来,我就来和大家细细的这个博客的搭建。

拉取代码

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

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

更换配置

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

  1. 文件读取路径(需要和项目名相同):
  1. 博客标题和描述:
  1. 打包文件路径和主题:
  1. 博客头像(静态资源在public文件夹)和语言:
  1. 导航栏:
  1. 其他个性化插件:

在我们将这些配置完成之后,我们也就完成了我们博客的基本配置。接下来我们就将文章给导入进来。

导入文章

vuepress的文章是 md 格式文件,我们只需要创建md格式的文件及其分类的文件夹,然后写入文章和一些配置即可,它自动识别并分类,如下图所示:

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

这样我们就完成一个跑在我们本地个人博客了。接下来就剩最后一步上线了。

项目上线

项目上线有两种方式:第一种是直接打包跑在自己的服务器上, 第二种就是上传到仓库上,利用仓库的pages服务来跑你的项目。这里我来介绍一下第二种方式。

首先我们在项目中创建一个 xxx.sh为后缀的脚本文件,脚本文件的配置如下:

接下来我们就使用 sh xxx.sh 的命令执行脚本文件。

最后一步就是在仓库中用服务的pages服务将该仓库部署上线。

这样我们就完成了我们的项目上线。接下来我们直接访问仓库给我们提供的路径即可看到如下效果。

我部署完的个人博客地址( xiaopanpanya.gitee.io/my-blog ),感兴趣的小伙伴可以行动起来,部署一个自己的个人博客。

相关推荐
共享家95273 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn4 小时前
基于封装的专项 知识点
java·前端·python·算法
有来技术5 小时前
Spring Boot 4 + Vue3 企业级多租户 SaaS:从共享 Schema 架构到商业化套餐设计
java·vue.js·spring boot·后端
东东5166 小时前
学院个人信息管理系统 (springboot+vue)
vue.js·spring boot·后端·个人开发·毕设
m0_748229997 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒7 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..7 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile7 小时前
Class in Python
java·前端·python
小邓吖8 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意9578 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展