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

相关推荐
八月ouc11 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉15 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
街尾杂货店&21 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈23 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript