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

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！。

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

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

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

今天再去趟医院，争取明天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、部署方面尝试
- 使用github action 在推送代码时触发指定事件完成编译部署 aehyok.github.io/blog
- 使用goole/zx编写脚本，在本地编译时执行脚本一键自动打包到服务器vue.tuokecat.com/blog

4、畅想博客未来

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

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

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

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

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

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

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

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

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

5、总结

可以使用vitepress搭建一个属于自己的个人博客。
如果你想简单直接使用模版，我的源码在此，主要去填充笔记就可以了。
如果你有兴趣一起搞一点小玩意，小代码什么的，我们可以一起碰撞一下，欢迎来撩。
最后希望不努力的我和你能多参加一下若川大佬的源码共读活动，原来我们也可以读源码了，原来不努力的我们变成努力的我们其实就只差一个转身，一个前端经验不足两年的弱鸡告诉你，真的真的可以学到很多东西。
接下来有时候我会继续整理日常记录
当然也会不断的尝试着为我的个人博客添砖加瓦，学习就是一个慢慢积累的过程，不要操之过急，慢慢的坚持下去，收获就自然而来了