博客设计方案与实施

背景

在日常学习过程中，经常需要把遇到的问题记录下来，记录自己的成长之路，所以一直想拥有一个完全属于自己的博客。其间也体验过wordpress,无奈可定制化性不高，索性自己实现一个。

简介

本博客系统前端使用React技术栈，后端使用Go技术栈。从运维到设计都是自己完成的。

mermaidCopy
graph LR
  A[Webpack 构建] --> B[生成带 ContentHash 的文件]
  B --> C{静态资源类型}
  C -->|JS/CSS/图片| D[OSS 存储]
  C -->|HTML| E[自建服务器]
  D --> F[CDN 加速]
  F --> G[用户访问]
  E --> G

技术选型

博客主页

https://zeus.zzfzzf.com

1. 考虑到seo和加载性能，使用服务端渲染框架nextjs开发
2. 公共组件提取到@oc/designUI组件库中
3. 静态资源托管在阿里云cdn上
4. 使用 drone + K8S 持续集成

管理后台(宙斯系统)

https://zeus.zzfzzf.com

1. 使用从零搭建的webpack5+Typescript+React18方案
2. UI组件库使用antd
3. 静态资源托管在阿里云cdn上
4. 使用 drone + K8S 持续集成
5. 做了权限控制，可用测试账户test/test访问

服务端

1. 使用fiber框架开发
2. 数据库使用mysql，缓存使用redis，全文搜索引擎和日志使用elasticsearch
3. 使用rabbitmq和kafka处理异步任务
4. 文件上传至阿里云oss保存
5. 消息通知使用飞书消息
6. 服务监控使用 https://github.com/louislam/uptime-kuma

错误监控以及用户行为日志

1. 使用gif上报日志到es中
2. 采集方法参考此篇文章前端应用性能及错误监控设计方案

运维

1. drone+ K8S 持续集成
2. Grafana + Prometheus 对整个系统进行监控报警

数据库

1. Mysql数据库生产环境使用阿里云rds服务
2. redis、es等服务无备份只负责缓存和临时处理数据

特色

1. 完全开源，可折腾性高。
2. 博客支持暗黑模式，支持移动端
3. 从组件库到后台管理系统都是从零搭的，实现了esbuild插件 babel插件处理组件库markdown转html文档，自动生成类型表格