闲话

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

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

OpenWrt/LEDE 内网转发ipv6 。

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

第一次

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

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

但作为一个前端新手，我还是挺满意的，虽然现在看来代码写的稀烂。当时还写了一篇文章：基于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图片可配置化，导航栏可配置化。
• 完善的主题切换系统，支持：自动、白天和黑暗三种模式。
• 全面适配各个尺寸的屏幕，移动端友好，自适应布局。
• 静态生成页面，CDN与SEO友好。
• 增量渲染，自动根据最新的数据生成页面，无需重新构建。
• 资源消耗少，初始化后所有服务加起来 100M 内存左右。（默认开启了内存缓存后面会增大些）
• 带有快捷键的搜索功能。
• 内置访客、访问量统计。
• API First，后端自带swagger ，方便调试查看。（后面会补 API 文档）
• 理论上你可以只用后端和后台，网站的前台自己去实现。（其实就是把本项目当作无头 CMS也是完全可以的） 。。。

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

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