如何快速用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 ),感兴趣的小伙伴可以行动起来,部署一个自己的个人博客。

相关推荐
tjl521314_2110 小时前
01C++ 分离编译与多文件编程
前端·c++·算法
sayamber10 小时前
vLLM 容器化部署实战:如何在云服务器上跑起高并发大模型推理服务
前端
LIO10 小时前
Pinia 极简指南:Vue 3 官方状态管理库
前端·vue.js
燐妤10 小时前
前端HTML编程2:深入学习表单与表格
前端·学习·html5
朝阳3910 小时前
react【实战】首页 -- 响应式导航栏(含带联动动画的搜索框)
前端·react.js·前端框架
贾铭11 小时前
如何实现一个网页版的剪映(五)如何跳转到视频某一帧
前端·后端
Ruihong11 小时前
手写 React 对比 VuReact 编译:真正省下来的是维护成本
vue.js·react.js·面试
林恒smileZAZ11 小时前
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
前端·javascript·css
俺不会敲代码啊啊啊11 小时前
el-table实现行拖拽(包含展开项)
前端·vue.js·typescript
LIO11 小时前
React Router 极简指南(v6+)
前端·react.js