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

相关推荐
傻啦嘿哟19 小时前
Python在Excel中创建与优化数据透视表的完整指南
java·前端·spring
拜晨19 小时前
用流式 JSON 解析让 AI 产品交互提前
前端·javascript
浩男孩19 小时前
🍀vue3 + Typescript +Tdesign + HiPrint 打印下载解决方案
前端
andwhataboutit?19 小时前
LANGGRAPH
java·服务器·前端
无限大619 小时前
为什么"Web3"是下一代互联网?——从中心化到去中心化的转变
前端·后端·程序员
cypking19 小时前
CSS 常用特效汇总
前端·css
程序媛小鱼19 小时前
openlayers撤销与恢复
前端·js
Thomas游戏开发19 小时前
如何基于全免费素材,0美术成本开发游戏
前端·后端·架构
若梦plus19 小时前
Hybrid之JSBridge原理
前端·webview
chilavert31819 小时前
技术演进中的开发沉思-269 Ajax:拖放功能
前端·javascript·ajax