lastModified: 2024-08-02
介绍
- 本博客使用 Nextjs 构建，使用 MDX 作为 Markdown 的语法扩展.
- 博客部署于 Vercel.
- 本博客使用 GitHub 作为代码托管平台.
- AI使用 腾讯混元大模型, 因为免费.
- 开发出于学习目的, 之前未有使用过 React 相关的技术, 所以会存在不少的问题.
- 因为 Vercel 指不定的时候会墙掉, 所以以后出现了无法访问的情况也挺正常, 但是也没人看, 所以我自己能上去就行(笑).
- 虽然计划写博客已久, 但是各种各样的原因, 一直没有写出来, 虽然这个算是出来了一点点, 但是依然有不少问题等待解决, 毕竟是第一次没啥经验.
- 腾讯的混元AI比较智障, 但是免费, 所以就凑合凑合吧, 原本想要尝试调用通义的网页端接口, 但是还挺麻烦的, 所以就直接用腾讯的SDK了.
- 因为完全没有审美, 所以基本UI照抄 vivia 的, 由于这个UI本身也有些问题, 所以做了些修改, 但是由于没有审美, 有些地方的设计确实自己都看不下去.
闲话
写博客网站的想法从前年到了今年才完成一部分, 工作一个原因, 另一方面私事也稍微有点点多. 但是考虑还是要整一个的, 不然感觉这几年工作都白干了一样, 没有啥进步(虽然确实没有).
写博客本身是为了记录学习过程, 但是因为不想去CSDN之类的博客写, 再加上想尝试尝试新的技术栈, 所以就写了这个博客.
开发中也是遇到了不少的问题, 原本想要使用nextjs的mdx页面, 但是由于无法读取元信息, 也没有找到相关的社区文档, 所以就直接使用了remote-mdx的方式, 自己引入mdx文件.
到目前位置也还存在不少的问题, 但是影响比较大的bug应该是没有那么多. 同时原子化css对于复杂样式不太行, 较为复杂的样式依然需要引入css文件, 出于能不写就不写的目的, 所以有些地方的样式没有原设计那么好.
没有独立的服务器, 所以也不需要维护, vercel 确实省心的多, 缺点就算整不好啥时候就被墙了. 原本是使用CDN的, 但是未知原因, CDN无法回源vercel, 所以还是直接使用了vercel的解析.
当开始写的时候才发现, 长期写业务已经让我对于业务以外的技术感到有些棘手, 长期使用UI框架, 也让我对样式的书写和想象力有所下降.为此现在也开发看各类CSS书籍尝试能够补充些知识.
样式的编写感觉要比javascript的编写变得更加麻烦, 尤其我最后一次看CSS的内容甚至在两年前(2022年以前), 这让我最现在的浏览器特性了解的少之又少.
前端技术现在基本每年都有较大的变化, 虽然可能实际应用针对的客户端版本不是那么高级, 但是未来也总有天会普及.
而CSS的功能也越来越强大, 对于数年前需要靠javascript实现的功能, 现在已经能够使用CSS实现.
因此最近也开始阅读一些CSS书籍, 比如大漠老师的现代 Web 布局防御式 CSS 精讲现代 CSS等等.
为什么使用unocss
nextjs构建脚手架的时候使用的是tailwindcss, 不过出于习惯还是使用了unocss, 之前公司项目写的移动端和响应式大屏展示使用unocss写的很爽.
不使用现在的styled-component的原因是因为不想写太多组件, 不过使用了unocss也不见得代码写的有多好. 过于分散的类名, 有时候写着写着就忘了写哪了.
除此之外, 由于不是需要非常多的复杂样式, 所以原子类css库能够减少开发状态样式文件的数量, 而且对于响应式编辑来说也非常方便.
为什么使用nextjs
一方面为了扩展技术栈, 在公司长期使用Vue技术栈, 虽然偶有复杂的业务需求和技术需求, 但是大部分都是表单化增删改查.
同时现在低代码和AI的使用也使思考能力和逻辑能力都有所下降, 所以尝试新技术的同时也为了活跃一下自己的思考能力.
另一方面nextjs作为全栈类型框架, 而考虑加载速度和SEO(虽然不需要), 所以使用nextjs作为框架进行SSG的方式进行渲染.
因为vercel是无状态的, 所以无法使用数据库, 而相关数据存储服务又是收费的, 所以需要数据存储相关的功能就砍掉了.
而且作为nextjs的开发方, vercel对nextjs的支持也相对友好?
作为前端, 了解一点后端知识也算是必要的, 也是为了和后端对撕的时候占据有理的一方(笑).
为什么不使用服务器
没钱, 而且会增加程序的复杂度, 过于复杂的程序作为个人很难坚持下去.
尤其是从设计到开发到维护都需要自己一个人做.
为什么不用hexo之类的博客库
已经完善的东西当然很好, 不过没有喜欢的样式, 正如前面的介绍, 没有什么审美能力, 所以无法自己设计UI.
当然, 比较重要的原因应该是为了挑战新的技术栈了.
在很早之前, 其实是想要做一个由nestjs构建的后端, 由vite + react构建的前端.
但是独立编写需要太长的时间, 那个时候又还要出差, 工作也比较忙, 最终还是放弃了.
而且完善的后端需要考虑非常多的东西, 比如安全性, 权限控制, 数据库设计等等等等.
虽然我会一丢丢的mysql, 但是让我从头折腾还是有点为难人了.
结尾
就算这个博客最终还是废弃了, 但是这个过程至少还是比较有益的(大概). 如果未来离开了计算机行业, 或许我依然能够感觉到写代码的乐趣(?), 作为一个纯粹的兴趣. 不过还是希望能够找到更好的工作, 能够学会更多的东西, 做出更好玩的东西来. 毕竟没有需求, 很难创造需求, 就算是学了也很快就会忘掉了.
剩下的东西还是准备写关于页面里面, 只不过还未想好怎么设计, 所以就先这样了.
使用的包
基本框架
工具库
- dayjs 时间处理
- ahooks 常用的hooks
- clipboard.js 代码复制部分
- classnames 类名处理
- lodash-es 常用的函数
- sharp 图片处理
- yaml 文章元信息处理
- glob 文件扫描
- image-size nodejs部分图片大小处理
- @vercel/speed-insights 速度检测
- immer immutable数据处理
- is-mobile 判断是否是移动端
- react-hook-form React表单
MDX相关
- remark-gfm Github Flavored Markdown
- remark-imgattr MDX中为图片添加更多属性
- unist-util-visit 不算是MDX的库 但是这里为了遍历MDX的AST
- next-mdx-remote Nextjs的MDX渲染器
UI相关
- @floating-ui/react 弹出框
- react-icons 图标库
react-syntax-highlighter 代码高亮framer-motion 动画库- NProgress 进度条
- chroma-js 颜色处理, 用于对于版本略低的浏览器的主题颜色进行处理
- @uiw/react-split 拖拽分割
- react-photo-view 图片预览
- shiki 代码高亮
状态管理
- zustand 简单的状态管理
AI库
- tencentcloud-sdk-nodejs 腾讯云的SDK
css库
- postcss nextjs自带css预处理
- reset-css 重置样式
- unocss 原子样式库
- @unocss/postcss unocss的postcss插件
- @unocss/transformer-directives 用于对unocss的指令进行处理
- @unocss/transformer-variant-group 用于对unocss的变体组进行处理, 但是没有生效
webpack
- copy-webpack-plugin 用于将资源文件复制到public下, 以供vercel能够访问
- terser-webpack-plugin 用于压缩js文件
开发工具库
- eruda 移动端调试
- prettier 代码格式化
- prettier-plugin-tailwindcss Tailwindcss的prettier插件
代码编辑器
- monaco-editor 代码编辑器
- @monaco-editor/react react的代码编辑器
- monaco-editor-webpack-plugin 用于打包monaco-editor
- emmet-monaco-es 用于代码编辑器支持emmet
- @typescript/ata 用于代码编辑器支持typescript
- @babel/standalone 用于转换代码用于显示预览