Zeshawn
返回博客

个人网站

2026-03-223 min 阅读

一、前端工程师视角

个人博客网站 — 前端开发

技术栈： React 19 / Next.js 16 (App Router) / TypeScript / Tailwind CSS 4

项目描述：
独立设计并开发了一个高质量个人网站，包含首页、博客、项目展示、留言板、关于页和完整的管理后台，注重交互细节和视觉体验。

工作内容：

  • 基于 Next.js App Router 架构，采用 RSC（React Server Components）与客户端组件混合渲染策略，首页及博客列表使用 SSR + ISR 缓存（30s/60s 按需 revalidate），留言板和管理后台使用 CSR，实现了性能与实时性的平衡
  • 实现了一套精细的交互动画系统：
    • Canvas 粒子引擎： 亮色模式下绘制可交互的连线粒子网络（鼠标排斥力），暗色模式下切换为带闪烁、流星和点击波纹的星空效果，使用 delta-time 实现帧率无关动画
    • 鼠标追踪光效系统： 基于 React Context 的 SpotlightSection 跨卡片鼠标感知，GlowCard 实现边框渐变发光 + 内部蓝色光晕，MagneticButton 实现悬停磁性光晕
    • ScrollReveal 滚动动画： 使用 IntersectionObserver 触发 fade-up 进入动画，动画完成后移除 transform 避免合成层导致的溢出裁剪问题
  • 实现完整的暗色模式方案：<head> 内联脚本防 FOUC（闪烁），CSS 变量驱动全站色彩切换，Shiki 代码高亮双主题通过 CSS 变量实现零开销切换
  • 搭建 Markdown 渲染管线（unified 生态）：remark-gfm + remark-math + rehype-katex + Shiki，支持 GFM 语法、KaTeX 数学公式、VS Code 级代码高亮
  • 开发管理后台：响应式三态布局（高视口固定侧栏 / 低视口 Tab 栏 / 移动端抽屉），集成 @uiw/react-md-editor 实现 Markdown WYSIWYG 编辑，支持图片粘贴/拖拽上传
  • 使用 React Context 实现站点配置的服务端注入与客户端消费，避免了 props drilling 的同时保持了类型安全

二、后端工程师视角

个人博客网站 — 后端开发

技术栈： Node.js / Next.js 16 API Routes / SQLite (better-sqlite3) / Drizzle ORM / JWT / Nginx

项目描述：
独立设计并实现了一个全功能博客系统的后端，包含 9 张数据表、20+ RESTful API、完整的认证鉴权、速率限制和 IP 归属地查询，部署于阿里云 Linux 服务器。

工作内容：

  • 设计了 9 张表的数据库架构（projects、experiences、skill_groups、posts、comments、guestbook、site_config、images、pdfs），使用 Drizzle ORM 实现类型安全的查询，采用 JSON 模式存储标签数组，图片/PDF 以 base64 编码存储于数据库中实现零文件系统依赖
  • 实现自动化数据库迁移机制：应用启动时自动建表 + 增量 ALTER TABLE 添加列（捕获并忽略"列已存在"异常），确保版本升级时零人工干预
  • 设计并实现完整的认证体系：bcryptjs 密码哈希存储 → JWT 签发（7 天有效期） → HttpOnly + Secure + SameSite=Strict Cookie 存储，生产环境检测默认凭证并输出安全警告
  • 实现内存级滑动窗口速率限制器，留言 5 次/分钟/IP、评论 10 次/分钟/IP，定期清理过期条目防止内存泄漏
  • 集成 ip-api.com 实现访客 IP 归属地查询（国内显示省+市、海外显示国家），使用 Map 内存缓存（24h TTL）+ 3s 超时控制，查询失败不影响主流程
  • 实现博客评论系统：支持楼中楼回复（parent_id 自关联）、自动楼号计算（MAX(floor) + 1）、分页查询 + 主评论与回复批量关联加载
  • 实现图片生命周期管理：上传时生成 UUID、强缓存响应（Cache-Control: max-age=31536000, immutable），cleanupUnusedImages 扫描所有文章内容中的引用关系后删除孤儿图片
  • 编写一键部署工具链：WSL 构建脚本确保 better-sqlite3 原生模块编译为 Linux ELF 格式，部署脚本自动检测二进制兼容性；server-init.sh 实现 Nginx 反代 + Let's Encrypt SSL + systemd 服务的一键初始化

三、全栈工程师视角

个人博客网站 — 全栈开发

技术栈： Next.js 16 (App Router) / React 19 / TypeScript / Tailwind CSS 4 / SQLite + Drizzle ORM / JWT / Nginx + systemd

项目描述：
从零独立完成了一个生产级个人网站的全部设计、开发和部署，涵盖前端 UI、后端 API、数据库设计、认证系统和自动化运维，已上线运行于 zeshawn.me。

工作内容：

  • 架构设计： 选用 Next.js App Router 实现前后端一体化，SQLite 单文件数据库实现零运维成本，standalone 输出最小化部署体积。采用 RSC + CSR 混合渲染策略，SSR 页面配合 ISR 缓存（30s/60s），管理后台纯客户端渲染
  • 数据库： 设计 9 张表，使用 Drizzle ORM 保证类型安全。图片/PDF 以 base64 存储于数据库实现一个 .db 文件包含所有数据，简化备份与迁移。编写 migrate.ts 脚本实现 JSON/MDX → SQLite 的一次性数据迁移
  • 博客系统： 支持 Markdown 和 PDF 两种文章类型。Markdown 通过 unified 管线渲染（GFM + KaTeX + Shiki 双主题高亮），PDF 通过独立 pdfs 表存储并在前端以 iframe 内嵌阅读。评论系统支持楼中楼回复、分页、排序和 IP 归属地显示
  • 安全体系： JWT 认证 + HttpOnly Cookie + bcrypt 密码哈希；内存级 IP 滑动窗口限流；前后端双重输入验证；文件上传白名单（图片 5MB / PDF 50MB）；管理后台 robots noindex 屏蔽
  • 交互体验： Canvas 双模式粒子动画引擎（亮色连线网络/暗色星空流星），GlowCard 鼠标追踪发光效果，ScrollReveal 滚动进入动画，完整暗色模式（内联脚本防 FOUC），导航栏滑动高亮指示器
  • 管理后台： 8 个模块（博客、项目、经历、技能、评论、留言、图片、站点设置），响应式三态布局适配不同屏幕尺寸，Markdown WYSIWYG 编辑器支持图片粘贴/拖拽上传，未使用图片自动清理，站点配置在线修改（KV 存储 + React Context 全局消费）
  • DevOps： 编写完整的部署工具链：WSL 内 Linux 构建 → SCP / GitHub Release 两条部署路径 → 自动检测 ELF 二进制兼容性 → server-init.sh 一键初始化（Nginx + Certbot + systemd）。data/ 目录通过 symlink 实现升级时数据持久化

📌 关键数据

维度 数据
代码量 ~90 个源文件，涵盖前端组件、API 路由、数据层、部署脚本
数据库 9 张表，Drizzle ORM 类型安全查询
API 20+ RESTful 端点（认证 3 + 公开 2 + 管理 15+）
前端页面 7 个页面路由 + 1 个管理后台（8 模块）
交互组件 12 个自定义组件（粒子引擎、发光卡片、滚动动画、主题切换等）
部署 阿里云 VPS + Nginx 反代 + Let's Encrypt SSL + systemd 守护进程

评论

0/1000
返回博客列表