前言
看见大部分前端人都有自己博客,骤然发现自己还没有自己的博客,这可不行!别人有的 我也要有! ps:我有自己的域名和服务器。本文详细说了自己如何快速使用VuePress快速搭建个人博客,看完不会打我(开玩笑的,大家不用看也是会的,但是可以帮我指出不足)。
技术选用VuePress ,进入VuePress官网,快速上手。
上手VuePress
1.创建并进入一个新目录
2.使用你喜欢的包管理器进行初始化
3.将 VuePress 安装为本地依赖
yarn add -D vuepress
4.创建你的第一篇文档
5.在package.json增加运行和打包命令
6.本地热编译
yarn docs:dev
配置问题
发现神三元博客源码和预览地址,感觉他的博客模板做为我的第一版很合适,那就直接套用,然后修改里面的配置和删掉他的博文放上直接的博文。
先附上我修改后的源码地址:
- 1.github源码地址
- 2.gitee源码地址
项目讲解
- .vuepress(博客的配置,这是重点)
- blogs(放博文的地方)
- node_modules(依赖包)
- public(执行打包后才会有的部署包)
那很明显重点说.vuepress配置,说这之前一笔盖过blogs文件夹,里面的文件放一些你自己的博文,至于怎么分层按你自己喜好,比如我分为算法、css、js、html等等
值得注意一点,md头文件配置,categories分类、tags标签,sidebar这个设置和等等讲的路由配置有关,没有的话路由配置需要指明,这里写着auto,那路由配置就可以偷懒了,这里的date和时间线插件挂钩不能配错,有格式要求
---
title: github的pull request操作
date: 2020-08-22
categories:
- git
tags:
- git
sidebar: 'auto'
---
.vuepress配置
.vuepress配置感觉比较重要,拿出来单独讲。
config.js(基本配置)
基本配置详情见官网,我这只说一些我用上的配置属性。想了解更多请看官网。
- title:网站的标题,它将会被用作所有页面标题的前缀,同时,默认主题下,它将显示在导航栏(navbar)上。
- description:网站的描述,它将会以 标签渲染到当前页面的 HTML 中。
- dest:打包输出目录
- head:比如我这配置了meta和标题logo
- plugins 插件
- markdown的lineNumbers:是否显示行号
- themeConfig:这个又是超多配置,包含各种主题菜单等配置
我这里选用了reco主题,等等再进行说明
- 头像配置在这
siderbar.js(路由配置)
可以看见siderbar.js这里是在config中引用了
路由配置
其实这里代码很简单 大家都能看懂,和vue的router很像。
我这里采用整个模块声明配置md中的头部声明sidebar: 'auto'
,如果你不想使用懒人办法,那可以如下具体去配置 但是路径要对应
reco
详细介绍在这里vuepress-theme-reco,我也是基于这个主题快速搭建上手,别人造好的轮子能用就用(嘻嘻!感谢开源!)
上面还有很多案例,都很棒,有的主题胡里花哨(真的美!),比如山海以南、摸鱼人这些真的美,值得鉴赏和借鉴(copy)!!!
自己搭好的博客介绍一下
上面说了那么多怎么搭,那我该介绍一下自己博客网站了,看看成果
- 加载页
- 首页
- 搜索和目录
- 时间线
展望
打包部署那些很简单,我这就不说了,如果有要问我的也是欢迎留言。
个人从0到部署也花了两小时时间,很多官方文档都是基于VuePress,但是这仅仅是开始,接下来要做的就是美化博客界面和增加一些功能,比如留言板(这肯定要加的)...
扩展点内容
读者留言需要博客模板去搞定自己的博客,那我提供一个简易模板,很高兴能帮到你。
↓↓↓需要模板模板的话,那看这里
- 博客模板在线预览
- github博客模板源码地址
- gitee博客模板源码地址
这个模板clone下来,完全是开箱即用,作者名字和图片的logo换成自己喜欢的,然后就是往里增加你的博客。
结束语
看完这篇,快速上手搭建博客绝对轻轻松松。从12点到现在12.40分写这博文,午饭还没吃,
就到这了,后面有补充再编辑。求点赞!求点赞!求点赞!