likes
comments
collection

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

作者站长头像
站长
· 阅读数 11

前言 话不多说,先来看看十分钟肝出来的博客吧。两个地址: 第一个自己部署的地址: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记录仓库**,有兴趣的可以点进去看看,其实就是流水账哈哈,但是对自己来说还是挺有用的。把自己日常中用到的知识,哪怕一个链接或者一个关键字,把它记录下啦,对于回头看看,回顾知识还是很有益处的。

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

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

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

今天再去趟医院,争取明天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、部署方面尝试

4、畅想博客未来

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

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

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

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

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

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

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

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

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

5、总结

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

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

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

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

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

  • 当然也会不断的尝试着为我的个人博客添砖加瓦,学习就是一个慢慢积累的过程,不要操之过急,慢慢的坚持下去,收获就自然而来了