vuepress blog_免费搭建个人博客

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说vuepress blog_免费搭建个人博客,希望您对编程的造诣更进一步.

前言

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

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

上手VuePress

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

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

3.将 VuePress 安装为本地依赖

yarn add -D vuepress

4.创建你的第一篇文档

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

6.本地热编译

yarn docs:dev

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

配置问题

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

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

项目讲解

.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,但是这仅仅是开始，接下来要做的就是美化博客界面和增加一些功能，比如留言板(这肯定要加的)…

扩展点内容

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

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

结束语

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

如果你觉得不错求点赞！求点赞！求点赞！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13821.html