编辑
2022-07-21
前端技术
00
请注意,本文编写于 592 天前,最后修改于 589 天前,其中某些信息可能已经过时。

目录

闲话
第一次
第二次
第三次(现在的版本)

闲话

我喜欢写博客,或者说喜欢有这么一个地方。因为哪怕平时不怎么写,但是有时候看到的好东西偶尔会想着有个放过来。

第一次知道个人博客这个东西是刚上大学,那时候搜索一些代码相关的问题,偶尔会搜到别人的博客里,就感觉好酷啊。 在互联网上有这么一个地方,可以抒发自己的见解并且分享知识。于是那时候搜索一番,用hexo写了第一篇博客:

OpenWrt/LEDE 内网转发ipv6

后续零零散散写了一些,但发现有些不方便:每次写完必须构建然后发布,然后刷新 CDN ,而且很大程度上我必须用常用的那一台电脑写,不然我就要重装环境(那时候还没有 codespace)。

第一次

2021上半年我准备出去找工作,第一份工作打算招前端的。于是我花了大概不到一个月学了一些前端知识和一点框架(reactumijseggjs)。当时觉得自己比较僵硬,想写个项目练练手,顺便简历有的写,于是就写了博客。当时用的 egg.jsumi.js 作为前后端的框架,还用了 服务端渲染 的方式。记得当初不熟悉部署那一套(docker啊,k8s啊),直接在裸机服务器部署的,nginx反代给我折腾半天,不过总算是搞明白了。

但是用着用着发现小问题不断,一方面是我代码写的不好,react 总是触发多次重复渲染;另一方面是cdnssr的配置不对,我新写的文章有时候在页面上刷新也不展示,缓存的奇奇怪怪。移动端展示也不优秀。

但作为一个前端新手,我还是挺满意的,虽然现在看来代码写的稀烂。当时还写了一篇文章:基于React/umi/egg自建博客系统 ,当初还想开源给别人用,结果文章后面说的那些一个也没实现。后面工作忙了我也没更新过这一版了。

第二次

后面我去了Authing,随着我工作带来的水平提高,我看原来的博客越来越不顺眼了。也愈发觉得SSR这种方式不适合个人博客的场景。于是我想用SSG(静态生成)来重新写一次博客。因为在公司也一直用react,所以这一次用了gatsby,顺手复习一下graphQL岂不是秒的很?

于是我就用了gatsby重新写了博客,其中遇到了一些问题,比如插件对接API或者mongoDB对数据的一致性要求很高,我当时的数据结构偶尔会丢数据,我就写了适配函数。当时还颇为认真的规划了一下css,因为写博客是对自己水平的考察,所以我没有用任何第三方库,组件啥的都是自己写的。还写了简单的搜索接口。

后来部署的时候发现每次都手动构建很傻,我还写了一个微服务叫blog-publisher,它接收后台的构建请求,拉取最新的代码,然后build,发版到cdn并自动刷新cdn缓存。虽然延迟长了一些,但是也还能用。

但它还是有一些问题:

  • 代码写的比较混乱,维护性差。尤其是写了一堆适配函数。
  • 不具备通用性,我没办法给别人用。一开始就是为了自用而开发的。
  • 黑暗模式没实现,搜索卡片简陋。
  • 样式还是不美观。
  • 构建到看到结果还是慢了点。

第三次(现在的版本)

2022年中我离职了,现在有了大把的时间。那就重构吧,这次就比较系统了,一开始就瞄准了以下几个目标:

  • 良好的代码维护性,清晰的层级逻辑
  • 面向开源,任何人都能用(所以得有完善的初始化功能、所有选项都可配置化)
  • 还用SSG但是要增量渲染,不要每次都手动刷新。
  • 支持黑暗模式,完美支持各个屏幕大小,样式好看。

其实在这之前我也调研过,考虑了一下要不要用现在的博客。但是要么我觉得不好看,要么觉得花里胡哨的,要么觉得功能不完备。想来想去还是自己实现比较好。 总之最终我决定把这个博客系统分为几个服务:

  • 后台服务: 采用nest.js实现。
  • 管理页面:采用antd pro实现。
  • 博客前台:采用next.js实现,完美支持需求。
  • 评论系统:直接用waline,以后会考虑自研。

具体到前后端我都尽量先规划好再写,这样避免了很大程度上的代码混乱(虽然有些地方还是小脏 2333)。

现在你所看到的就是重构之后的版本啦~ 基本能用了,但是文档还没写。我会慢慢补的。

具体大概有以下特点:

  • 一站式博客系统,功能全面。
  • docker-compose 一键部署。
  • 有完善的初始化和后台页面。
  • 支持百度、谷歌分析。
  • 支持 waline 评论系统。
  • 数据可以导入导出。
  • 具备完善的文章、分类、标签、草稿功能。
  • 站点信息可配置化,logo图片可配置化,导航栏可配置化。
  • 完善的主题切换系统,支持:自动、白天和黑暗三种模式。
  • 全面适配各个尺寸的屏幕,移动端友好,自适应布局。
  • 静态生成页面,CDNSEO友好。
  • 增量渲染,自动根据最新的数据生成页面,无需重新构建。
  • 资源消耗少,初始化后所有服务加起来 100M 内存左右。(默认开启了内存缓存后面会增大些)
  • 带有快捷键的搜索功能。
  • 内置访客、访问量统计。
  • API First,后端自带swagger ,方便调试查看。(后面会补 API 文档)
  • 理论上你可以只用后端和后台,网站的前台自己去实现。(其实就是把本项目当作无头 CMS也是完全可以的) 。。。

有兴趣的可以试试哈,有啥问题也欢迎和我联系,我会持续更新的。👀️

项目主页: https://vanblog.mereith.com

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:mereith

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!