🌸 鱼小鳄のBLOG

我开源了自己的博客系统

为什么又要自己写博客？

市面上有 Hexo、Hugo、WordPress，还有各种框架，为什么还要"重复造轮子"？

不仅是因为之前我开始做的时候不太了解这些框架😅，更主要的是我想从 AI 那里从底层学习前端以及服务器这方面的东西。

我想要的博客不只是一个内容发布工具——它可以是一个个人项目展示平台，也可以是我展示自己喜欢的东西（以及发疯😅）的平台。

于是，便有了这个博客。

项目速览

项目名称：鱼小鳄の个人博客（暂定）
技术栈：Node.js + 原生前端（HTML/CSS/JS）
数据存储：纯 JSON 文件（零数据库依赖，因为我还没怎么了解过数据库😅）
特色功能：樱花 Canvas 动画、OC 角色展示、时段切换、音乐播放器、瀑布流图库、评论审核
开源协议：MIT
GitHub：github.com/yuxiaoe666/yuxiaoe-blog

亮点功能实现

🌸 樱花飘落效果
使用 Canvas 绘制每一片花瓣，每片花瓣拥有随机的大小、旋转角度、飘落路径和透明度。飘落轨迹采用正弦波动，模拟真实空气流动。性能优化上，控制粒子数在 100 片以内，并利用 requestAnimationFrame 实现流畅动画。

🌓 时段切换（早晨/下午/夜晚/自动）
根据访问时间自动切换 Hero 区域的背景色、文字颜色和装饰元素。用户也可以手动选择时段，体验不同氛围。背景图支持自定义，只需在uploads/hero/下放置对应图片即可。

🎭 OC 角色互动
这是最有趣的部分——我在首页放置了一个原创角色"yuxia"（stable diffusion 生成底图，然后我自己修改了一些，虽然目前还是有点小问题，不过我之后慢慢修改就是了😋）。

🎵 音乐播放器 + 歌词同步
支持上传 MP3 和歌词文件（.lrc），前端解析 LRC 时间戳并高亮当前行。

🖼️ 瀑布流图库
图片和视频混排，利用 CSS column-count 实现简单瀑布流。上传时自动生成缩略图（使用 sharp 库）并保存原图，列表接口返回统一的 URL 格式。

💬 评论系统
访客无需登录即可评论，但所有评论需要管理员审核（默认自动通过，管理员可后台删除）。为了防止刷屏，每个 IP 每小时限评论 5 条，利用 express-rate-limit 实现。

项目结构一览

blog/
├── css/ # 样式（含主题变量）
├── data/ # JSON 数据库（运行时生成）
│ ├── posts/ # 每篇文章单独 .json 文件
│ ├── comments.json
│ ├── gallery.json
│ ├── music.json
│ └── settings.json
├── js/ # 前端模块（樱花、背景、模态框等）
├── server/ # 后端核心
│ ├── db/init.js # 数据初始化
│ ├── middleware/auth.js
│ ├── routes/ # RESTful API
│ ├── uploads/ # 上传资源
│ └── server.js
├── index.html # 主页面
├── post.html # 文章详情
└── start.sh / stop.sh # 便捷管理脚本

一键部署流程：

git clone <repo>
cd blog/server
npm install
cp .env.example .env # 修改密码和密钥
npm start

就是这么简单。没有数据库安装，没有复杂的配置，开箱即用。

未来计划

这个博客还在不断成长中，接下来打算做的事情：

☐ 动态化
☐ 访客统计看板（轻量级，不使用第三方服务）
☐ 思考ing......一边学一边做吧，想到什么是什么

给想自己造轮子的人一些建议

如果你也想动手写一个个人博客系统，不要被"全栈"吓到。从最小的 MVP 开始——先跑通一个能读写的 HTML 页面，再慢慢加入动画、认证、上传。不要一上来就追求完美架构，先让代码能跑，再让它好看，最后让它健壮。

（当然，我自己的做法还是先看看教程，一边自己写一些，一边vibe coding，有句话怎么说，“先杀出一条血路，再来打扫战场”，先做出来，再考虑怎么做得更好，就这样一点点改善就好）

另外，安全永远是第一位：修改默认密码、使用 HTTPS、限制文件类型、做好输入过滤（XSS 和注入防范）等。

最后

这个博客系统算是一个学习的证明。代码开源，希望它能帮到同样喜欢折腾、热爱二次元的你。

如果喜欢，欢迎给个 Star ⭐，也欢迎提 Issue 和 PR 一起完善。

——2026年7月6日