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