用vitepress十分钟肝了一个博客,并把过去一年半每天的日常记录汇总了过来

简介: 其实一直有这样一个想法,想把自己的流水账记录,稍微整理一下,放在一个自己打造的个人博客下面,让知识不在孤零零的呆在哪里,有时候可能更方便自己,甚至可以启发很多同行......

image.png


前言


话不多说,先来看看十分钟肝出来的博客吧。两个地址:

第一个自己部署的地址:vue.tuokecat.com/blog

第二个github pages地址:aehyok.github.io/blog

最后本博客源码仓库地址:github.com/aehyok/blog


1、搭建个人博客背景


2020年9月底入行前端,2021年年初的时候就想着,之前三个月遇到的好多问题,或者看过的好多文章都已经连个毛都没有了。遇到相同或者类似的问题又需要进行百度或者google了。其实是一件挺痛苦的事情,浪费了自己的时间,关键是浪费了好多次,得不偿失。


于是我就在github上新建了一个仓库,然后开始书写markdown记录笔记了。以前都是在印象笔记里直接富文本了,相对来说md文档见过很多,自己确实也没尝试过。然后从2021年1月1日开始就开始记录每天看到的文章或者遇到的问题了,这是我的**github记录仓库**,有兴趣的可以点进去看看,其实就是流水账哈哈,但是对自己来说还是挺有用的。把自己日常中用到的知识,哪怕一个链接或者一个关键字,把它记录下啦,对于回头看看,回顾知识还是很有益处的。


其实一直有这样一个想法,想把自己的流水账记录,稍微整理一下,放在一个自己打造的个人博客下面,让知识不在孤零零的呆在哪里,有时候可能更方便自己,甚至可以启发很多同行......


一直拖拖拖没有去实践,最近因为那条腿只能呆在家里,所以空闲时间就比较多。这事既然想起来了,就把它肝出来了,其实也没花费多长的时间。其实主要就是把过去自己的记录进行汇总整理


image.png


今天再去趟医院,争取明天8月2日去上班了,已经三周没见过同事了,不知道公司是不是又裁员了,又或者这次该轮到我了 哈哈


当然接下来从8月份开始,一有时间我就会重新梳理一下过去一年半的笔记记录,让很多知识呈现出来,对知识进行加工,成为我自己的财富,也许不久后的面试就要用到呢?


刚开始还有一些犹豫一直想使用vuepress,因为之前也用vuepress搭建过,但后面不了了之了。现在是又想尝试新鲜的vitepress,在我正在犹豫的时候我看到一个非常亮眼的优点:可以在md文档里面混合使用vue3的组件,听说还可以全局引入,真的有点骚到爆了。有空的时候再去看看尤大大是如何将代码嵌入到markdown中执行的。


2、尝鲜vitepress搭建


// 1、创建项目并初始化package.json
mkdir vitepress-starter && cd vitepress-starter
pnpm init
//2、安装vitePress和vue3.0
pnpm i vitepress vue -D
//3、创建文件夹docs,并在其中添加一个md文档index.md
mkdir docs && echo '# Hello VitePress' > docs/index.md
//4、在package.json中添加scripts脚本
  "scripts": {
    "start": "vitepress dev docs",
    "build": "vitepress build docs",
  }
//5、通过命令运行项目
pnpm start
//ok一个最简单的博客出现了。


3、vitepress进阶


  • 3.1、基础使用


很多知识官网已经讲的非常清楚了,详见官网地址:vitepress.vuejs.org/,跟着官网去操作稍加调试便可以实现。


  • 3.2、md中嵌入vue组件特性


上面说过可以在md中直接添加vue的组件,来看看示例吧。


<script setup>
import middle from '../src/components/middle.vue'
</script>
<middle />


引入的middle组件我在下面会详细说明。


就这一项,可能对开发的来说就非常的友好了,因为有时候确实想做一些定制化的需求,尤其是对前端来说。


  • 3.3、md中自定义样式 之前我不清楚有没有,看vitePress官网可以在markdown下写样式


// 在markdown文件中直接写就可以了
<style lang="sass" scoped>
h2
    color: red
</style>


我自己试一下确实不错,不过有时候想定制化样式不知道是否可以添加class,自己简单尝试了一下不行,不过现在都可以嵌入vue组件了,那么在组件中定制样式就非常的简单了


<template>
  <div class="middle">
    <h2 className="message"><span @click="jumpClick()">我参与源码共读活动两个月的时间,写了七篇文章,但更重要的是学到更多的知识。源码共读活动,有兴趣的来一起参与一下吧</span></h2>    
  </div>      
</template>
<script lang="ts" setup>
  const jumpClick = () => window.open('https://juejin.cn/post/7079706017579139102','_blank')
</script>
<style lang="scss" scoped>
.middle {
  display: flex;
  align-items:center;
  justify-content: center;
  margin-top: 80px;
  color: var(--vp-c-brand);
  cursor: pointer;
  text-decoration: underline;
  &:hover {
    color: var(--vp-c-brand-dark);
  } 
}
</style>


其实这段代码就是我开头引用的middle组件。


  • 3.4、部署方面尝试



  • 使用goole/zx编写脚本,在本地编译时执行脚本一键自动打包到服务器vue.tuokecat.com/blog


4、畅想博客未来


比如说我自己吧,接下来的八月份一有时间我就先把我之前整理的笔记记录,重新看一遍、整理汇总一下,更方便自己查看阅读。然后有时间会思考,接下来怎么样来给自己的博客添砖加瓦呢?


比如:想加个登录,对接一部分接口,不知道能否调通,要去尝试


再比如:统计一下每个markdown的浏览量,应该有插件可以支持


再比如:是否可以添加一部分接口,通过权限控制一下显示


再比如:某些没写好的文章,或者比较重要的笔记不想展示出来,是否可以对接控制


再比如:给每个markdown记录下面添加一个评论系统,这样有一个互动,可能对来阅读的人来说更加友好,可以很好的跟博客作者互动


再比如:在markdown里添加一个代码调试器,这样写博文时嵌入的代码会更加生动,当然有可能这个功能已经有了,只是我没看到而已


再比如:源码共读活动,如何在博文中展示会对读者更加友好呢


可以加入代码,本身就增加了很多的乐趣和想象的空间


5、总结


  • 可以使用vitepress搭建一个属于自己的个人博客。


  • 如果你想简单直接使用模版,我的源码在此,主要去填充笔记就可以了。


  • 如果你有兴趣一起搞一点小玩意,小代码什么的,我们可以一起碰撞一下,欢迎来撩。


  • 最后希望不努力的我和你能多参加一下若川大佬的源码共读活动,原来我们也可以读源码了,原来不努力的我们变成努力的我们其实就只差一个转身,一个前端经验不足两年的弱鸡告诉你,真的真的可以学到很多东西。


  • 接下来有时候我会继续整理日常记录


  • 当然也会不断的尝试着为我的个人博客添砖加瓦,学习就是一个慢慢积累的过程,不要操之过急,慢慢的坚持下去,收获就自然而来了
目录
相关文章
|
JavaScript 关系型数据库 MySQL
网站 | 懒了很久的博客(基础版)
在好久好久以前,就在写个人博客,那个时候的域名也还是现在这个,但是用的是hexo,局限性有不少。于是打算自己开始瞎弄一个自己的博客网站,太懒了,以至于现在才写了基础的版本。😭
|
开发工具 git 索引
吐血整理,全网最全Git命令手册(下)
吐血整理,全网最全Git命令手册(下)
|
存储 开发工具 git
吐血整理,全网最全Git命令手册(上)
吐血整理,全网最全Git命令手册(上)
|
Kubernetes Ubuntu 关系型数据库
这不是愚人节玩笑,我们回来了:Typecho 1.2.0 发布!
这不是愚人节玩笑,我们回来了:Typecho 1.2.0 发布!
316 0
这不是愚人节玩笑,我们回来了:Typecho 1.2.0 发布!
|
移动开发 数据可视化
备忘整理
百度脑图 绘制脑图 naotu.baidu.com 百度H5   h5.baidu.com 畅言: 畅言是一个简单而强大的社会化评论及聚合平台。用户可以直接用自己的社会化网络账户在第三方网站发表评论,并且一键评论同步至社交网络将网站内容和自己的评论分享给.  http://changyan.kuaizhan.com/ 快站 搜狐快站是一款可视化建站工具,包括拖拽生成页面,强大的内容管理,丰富美观的模板,适配所有移动设备,一键生成App等功能。
897 0
|
JavaScript 前端开发 调度
勘误,昨天文章中的知识性错误
勘误,昨天文章中的知识性错误
89 0
|
9月前
|
前端开发 API C++
完结撒花啦
完结撒花啦
|
缓存 运维 前端开发
火爆!GitHub 标星 144k 的前后端学习路线,2021 年最新整理,看完后不再迷茫不再徘徊
火爆!GitHub 标星 144k 的前后端学习路线,2021 年最新整理,看完后不再迷茫不再徘徊
5317 3
火爆!GitHub 标星 144k 的前后端学习路线,2021 年最新整理,看完后不再迷茫不再徘徊
|
9月前
|
Python
Python:晚上把附近的足浴店都给爬了一遍,好兄弟针不戳
Python:晚上把附近的足浴店都给爬了一遍,好兄弟针不戳

热门文章

最新文章