前言

看见大部分前端人都有自己博客,骤然发现自己还没有自己的博客,这可不行!别人有的 我也要有! ps:我有自己的域名和服务器。本文详细说了自己如何快速使用VuePress快速搭建个人博客,看完不会打我(开玩笑的,大家不用看也是会的,但是可以帮我指出不足)。

技术选用VuePress ,进入VuePress官网,快速上手。

VuePress使用模板搭建博客 vuepress搭建个人博客_路由配置

上手VuePress

1.创建并进入一个新目录

2.使用你喜欢的包管理器进行初始化

VuePress使用模板搭建博客 vuepress搭建个人博客_VuePress使用模板搭建博客_02

3.将 VuePress 安装为本地依赖

yarn add -D vuepress

VuePress使用模板搭建博客 vuepress搭建个人博客_VuePress使用模板搭建博客_03

4.创建你的第一篇文档

VuePress使用模板搭建博客 vuepress搭建个人博客_路由配置_04

5.在package.json增加运行和打包命令

VuePress使用模板搭建博客 vuepress搭建个人博客_git_05

6.本地热编译

yarn docs:dev

VuePress使用模板搭建博客 vuepress搭建个人博客_ide_06

到此你已经上手了VuePress,然后开始看一些配置

VuePress使用模板搭建博客 vuepress搭建个人博客_git_07

配置问题

发现神三元博客源码和预览地址,感觉他的博客模板做为我的第一版很合适,那就直接套用,然后修改里面的配置和删掉他的博文放上直接的博文。

先附上我修改后的源码地址:

项目讲解

VuePress使用模板搭建博客 vuepress搭建个人博客_ide_08

  • .vuepress(博客的配置,这是重点)
  • blogs(放博文的地方)
  • node_modules(依赖包)
  • public(执行打包后才会有的部署包)

那很明显重点说.vuepress配置,说这之前一笔盖过blogs文件夹,里面的文件放一些你自己的博文,至于怎么分层按你自己喜好,比如我分为算法、css、js、html等等

VuePress使用模板搭建博客 vuepress搭建个人博客_ide_09

值得注意一点,md头文件配置,categories分类、tags标签,sidebar这个设置和等等讲的路由配置有关,没有的话路由配置需要指明,这里写着auto,那路由配置就可以偷懒了,这里的date和时间线插件挂钩不能配错,有格式要求

---
title: github的pull request操作
date: 2020-08-22
categories:
 - git
tags:
 - git
sidebar: 'auto'
---

.vuepress配置

.vuepress配置感觉比较重要,拿出来单独讲。

config.js(基本配置)

基本配置详情见官网,我这只说一些我用上的配置属性。想了解更多请看官网

VuePress使用模板搭建博客 vuepress搭建个人博客_git_10

  • title:网站的标题,它将会被用作所有页面标题的前缀,同时,默认主题下,它将显示在导航栏(navbar)上。
  • description:网站的描述,它将会以 标签渲染到当前页面的 HTML 中。
  • dest:打包输出目录
  • head:比如我这配置了meta和标题logo

VuePress使用模板搭建博客 vuepress搭建个人博客_git_11

  • plugins 插件
  • markdown的lineNumbers:是否显示行号
  • themeConfig:这个又是超多配置,包含各种主题菜单等配置

VuePress使用模板搭建博客 vuepress搭建个人博客_VuePress使用模板搭建博客_12

我这里选用了reco主题,等等再进行说明

  • 头像配置在这

VuePress使用模板搭建博客 vuepress搭建个人博客_ide_13

siderbar.js(路由配置)

可以看见siderbar.js这里是在config中引用了

VuePress使用模板搭建博客 vuepress搭建个人博客_VuePress使用模板搭建博客_14

路由配置

其实这里代码很简单 大家都能看懂,和vue的router很像。

VuePress使用模板搭建博客 vuepress搭建个人博客_git_15


我这里采用整个模块声明配置md中的头部声明sidebar: 'auto',如果你不想使用懒人办法,那可以如下具体去配置 但是路径要对应

VuePress使用模板搭建博客 vuepress搭建个人博客_VuePress使用模板搭建博客_16


配置就说这 详情看官网更详情的配置插件详情

reco

VuePress使用模板搭建博客 vuepress搭建个人博客_路由配置_17

详细介绍在这里vuepress-theme-reco,我也是基于这个主题快速搭建上手,别人造好的轮子能用就用(嘻嘻!感谢开源!)

上面还有很多案例,都很棒,有的主题胡里花哨(真的美!),比如山海以南摸鱼人这些真的美,值得鉴赏和借鉴(copy)!!!

VuePress使用模板搭建博客 vuepress搭建个人博客_ide_18

自己搭好的博客介绍一下

上面说了那么多怎么搭,那我该介绍一下自己博客网站了,看看成果

  • 加载页

VuePress使用模板搭建博客 vuepress搭建个人博客_git_19

  • 首页

VuePress使用模板搭建博客 vuepress搭建个人博客_路由配置_20

  • 搜索和目录

VuePress使用模板搭建博客 vuepress搭建个人博客_git_21

  • 时间线

VuePress使用模板搭建博客 vuepress搭建个人博客_路由配置_22

展望

打包部署那些很简单,我这就不说了,如果有要问我的也是欢迎留言。


个人从0到部署也花了两小时时间,很多官方文档都是基于VuePress,但是这仅仅是开始,接下来要做的就是美化博客界面和增加一些功能,比如留言板(这肯定要加的)...

扩展点内容

读者留言需要博客模板去搞定自己的博客,那我提供一个简易模板,很高兴能帮到你。
↓↓↓需要模板模板的话,那看这里

  • 博客模板在线预览
  • github博客模板源码地址
  • gitee博客模板源码地址

这个模板clone下来,完全是开箱即用,作者名字和图片的logo换成自己喜欢的,然后就是往里增加你的博客。

结束语

看完这篇,快速上手搭建博客绝对轻轻松松。从12点到现在12.40分写这博文,午饭还没吃,
就到这了,后面有补充再编辑。求点赞!求点赞!求点赞!