版本1：基础构建与快速验证
技术栈： HTML、CSS、JavaScript
优势与解决问题： 这个阶段追求快速实现与验证核心功能。通过直接使用前端三剑客，项目能够迅速上线，展示数据，验证了基本业务流程的可行性。页面结构简单，开发周期短，适合项目初期探索。

版本2：前端工程化与用户体验提升
技术栈： Vue.js (SPA)、前端工程化工具 (如 Webpack)
优势与解决问题：
提升开发效率： 引入 Vue.js 构建单页面应用 (SPA)，实现了组件化开发，代码复用性高，维护更便捷。
优化用户体验： SPA 带来了无刷新页面切换的流畅体验，减少了用户等待时间。
规范开发流程： 采用前端工程化，引入了模块化、自动化构建等，使协作更高效，代码质量更有保障。

版本3：解决首屏加载与 SEO 痛点
技术栈： Nuxt.js (服务端渲染 SSR)
优势与解决问题：
提升首屏加载速度： 纯 SPA 在首次加载时需要下载所有 JavaScript 文件，导致白屏时间较长。Nuxt.js 的 SSR 解决了这个问题，服务器直接返回渲染好的 HTML，用户能更快看到内容。
优化搜索引擎优化 (SEO)： 搜索引擎爬虫对 JavaScript 渲染的内容抓取不友好。SSR 确保了页面内容在服务器端就已生成，利于搜索引擎收录，提升了项目的曝光度。

版本4：轻量级定制化 SSR 实践
技术栈： 自研 SSR 脚手架  (https://github.com/dirkhe1051931999/vue-ssr-template)
优势与解决问题：
更灵活的控制： 相较于 Nuxt.js 这样的全功能框架，自研脚手架提供了更高的定制化能力。可以根据项目具体需求，精准控制 SSR 的实现细节，避免不必要的冗余功能。
降低项目体积： 摆脱了大型框架的束缚，自研方案通常会更轻量，减少了不必要的依赖，有助于提升整体性能。

版本5：自动化部署与初步性能考量
技术栈： GitHub Actions (CI/CD)
优势与解决问题：
提高部署效率与稳定性： 引入 CI/CD 流程，通过 GitHub Actions 实现了代码提交后的自动化构建与部署。这大大减少了人工操作的错误，缩短了发布周期，确保了项目迭代的快速与稳定。
发现性能瓶颈： 在自动化部署后，发现虽然部署效率提升，但每次接口请求都直接查询 MySQL 数据库，导致首屏数据加载速度较慢，这促使思考更深层次的性能优化。

版本6：基础设施优化与访问速度提升
技术栈： 阿里云 ECS、HTTPS、DNS 解析、自研后台管理系统
优势与解决问题：

提升访问速度与稳定性： 将服务器从海外（香港）迁移至阿里云 ECS，并使用阿里云的 HTTPS 和 DNS 解析服务。通过国内优质网络资源，显著提升了用户访问速度和连接稳定性。

优化资源管理： 放弃了海外的对象存储服务（Tebi、Cloudflare），转用阿里云，实现了资源本地化部署，进一步减少了网络延迟。
精细化运营： 配合自研的后台管理系统，实现了对项目内容的高效管理与维护。

版本7：多级缓存策略与极致性能优化
技术栈： 阿里云 CDN、又拍云对象存储、Redis、MongoDB
优势与解决问题：
加速静态资源分发： 引入阿里云 CDN 和又拍云对象存储，将图片、CSS、JS 等静态资源分发到离用户最近的节点，大幅提升了资源加载速度。
提升动态数据响应速度： 将不变或更新频率较低的信息缓存到 Redis，实现了毫秒级的读取速度，极大减轻了数据库压力。
优化博客内容加载： 针对博客信息，将其缓存到 MongoDB，并在 MySQL 数据更新时同步更新 MongoDB。这种双写策略确保了数据一致性，同时利用 MongoDB 的读性能，显著提升了博客首屏渲染速度。
深度 SEO 优化： 通过 CDN、缓存等技术，页面加载速度更快，用户体验更好，这些都是搜索引擎排名考量的重要因素，从而大幅度优化了 SEO。

版本8：用户体验与界面美学提升
技术栈： 前端 UI/UX 优化
优势与解决问题：
提升用户友好度： 针对 UI 进行了全面优化，增加了博客目录功能，方便用户快速定位内容，提升了阅读体验。
视觉美化与细节完善： 通过一系列前端美化和细节处理，如字体、排版、动画效果等，使页面更加美观、专业，提升了用户的整体视觉享受和交互满意度。

版本9：新增个人空间与高效记录
技术栈： Redis，Mysql，HTTP
优势与解决问题：
提升用户友好度：
视觉美化与细节完善： 新增了专属的个人记录模块，设计灵感来源于树洞的私密性和微博的即时性。拥有一个便捷高效的平台，随时随地记录稍纵即逝的灵感、日常碎念及个人感悟

版本10：性能优化与组件化升级
技术栈: IntersectionObserver API
优势与解决问题:
1. 提升性能与用户体验
   自定义懒加载: 通过自定义v-lazy指令，实现了图片的按需加载。这项优化极大地减少了页面初始加载时间，特别是在图片较多的页面上，显著提升了加载速度和用户体验。
   资源精简: 移除了一些加载时间长且非必要的图片资源，使页面更加轻量化，进一步加快了渲染速度。
2. 增强开发效率与模块化
   组件封装: 封装了一系列常用的基础组件，包括toast、notify、dialog和popup，并将它们统一挂载到this下。
3. 优化博客内容管理
   博客分类与筛选: 针对博客内容，新增了按分类和年份筛选的功能，让用户可以更高效地查找感兴趣的文章。同时，新增的置顶功能可以突出重要内容，让信息传达更清晰。
4. SSR timeout问题

对于一篇非常长的文章，致 504 Gateway Time-out问题，经排查，后台侧API查询正常，缓存侧API响应正常，只有主站timeout，经分析，ssr出现问题

ctx.body = await renderer.renderToString(context);

改成

const renderStream = renderer.renderToStream(context);
ctx.body = renderStream;

页面显示正常

原因是：renderStream () 绕过了 renderToString() 在处理超长字符串时造成的 CPU 密集型阻塞问题

5. 博客后台，本地保存正常，生产保存timeout

pm2的日志太大，多达33g，而我的磁盘只有40g

使用pm2-logrotate切割，文件切割，时间切割，自动压缩，保留天数，成功降低了服务器I/O，博客后台正常保存

6. 博客后台支持批量上传图片和视频，新增博客支持随便选封面图片

版本11（更新）：强调 GitHub OAuth2 的留言板互动（Guestbook）

这个阶段核心是在留言板引入了“可识别身份的登录体系”，让用户从匿名互动升级为“GitHub 账号驱动的真实身份互动”。访客点击“GitHub 登录后留言”后，会发起标准 OAuth2 授权流程：前端根据 window.location.origin/guestbook 生成 redirectUri，并在跳转前生成随机 state（存入 sessionStorage），用于 OAuth 回调阶段的基本防 CSRF 校验。OAuth 回调落在同一路由（/guestbook）后，页面在 mounted 阶段解析 URL query 中的 code/state，调用后端的 githubOAuthLogin 完成 code 换取登录态；若 state 校验通过，则将 OAuth 返回的用户信息写入 github-userInfo Cookie（并在前端持久化展示 token/头像/用户名），同时清理 URL query，避免重复回调与脏链接问题。登录后留言区会自动展示用户头像/昵称，并允许基于 memos-userInfo 的 token 显示博主侧“回复/删除”能力。

总结

技术栈演进上，我不是“换框架”，而是把所学知识串起来做闭环：从原生 HTML/CSS/JS 快速验证业务，到 Vue SPA 组件化提升迭代效率，再到 SSR（Nuxt 思路） 解决首屏与 SEO 的硬痛点，最后落到自研 SSR 脚手架以换取更精细的性能与渲染控制（如超长内容通过 renderToStream 绕过 renderToString 的阻塞问题）。

性能优化上则是分层对症：静态资源走 CDN + 对象存储，动态数据用 Redis 承接高频读、缓解数据库压力；博客再引入 MongoDB 读缓存 + MySQL 写更新的双写策略，在一致性可控的前提下把首屏体验拉到更快的水平。同时配合工程化部署与基础设施迁移（海外到阿里云 ECS、HTTPS/DNS 优化）提升稳定性与访问速度。

工程化与运维方面，把 CI/CD 作为“能力模块”内化：使用 GitHub Actions 自动构建部署，减少人为差错；生产侧再用 pm2-logrotate 解决日志暴涨带来的 I/O 风险，保证服务长期可运行。整体目标始终围绕“把前后端、缓存、渲染、部署、运维这些知识点串成可交付的系统”，让每次优化都能落到可观测的效果上。