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

相关推荐
fanruitian3 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
rayufo4 小时前
【工具】列出指定文件夹下所有的目录和文件
开发语言·前端·python
RANCE_atttackkk4 小时前
[Java]实现使用邮箱找回密码的功能
java·开发语言·前端·spring boot·intellij-idea·idea
2501_944525545 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 支出分析页面
android·开发语言·前端·javascript·flutter
李白你好6 小时前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
刘一说7 小时前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
徐同保8 小时前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
fanruitian8 小时前
uniapp 创建项目
javascript·vue.js·uni-app
刘一说8 小时前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h9 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js