# Yancey Blog 大事记 > 从 Blog 初代上线, 到现在已然是第三代了. Blog 项目陪伴了我大学最后的时光和职业生涯的前两年, 这篇文章记录了 Blog 项目一代一代的发展历程... ## 诞生 Blog 第一个版本是在 18 年 2 月份上线的. 至于当时为什么要做个博客网站, 一是为了应付毕设, 二是给自己大学生涯做个交代. 当时会写点儿 Python, 后端就选了 Django 和 MySQL; 那个年代 BootStrap 和 jQuery 还活着, 前端就选了这俩. 项目大约从年初动工, 开发的那段时光早已模糊不清了, 只记得当时图书馆只剩下我一个人, 暖气也停了, 用的是一台白色的 VAIO, 偶尔中午去喂喂猫...... 毕业后的两年似乎被什么追逐着, 有时连回忆都是奢侈的. 大约折腾了一个来月, 项目也终于上线了, 后来的答辩也很顺利, 那篇论文《基于 Bootstrap + Django 响应式博客网站的设计与实现》还获得了优秀毕设, 有趣. 后来毕业了, 搬家和职场转换交织在一起, 论文的备份也弄丢了, 那时还没有使用 GitHub 的习惯, 项目最终也丢了, 下面这两张图, 还是翻推特找到的. ![封面图](https://static.yancey.app/DtA6rMEU4AAtFBG.jpeg) ![blog summary 页](https://static.yancey.app/DtA6tTiU8AAKhY2.jpeg) ```ts I could not look back, you'd gone away from me I felt my heartaches, I was afraid of following you When I was looking the shadows on the wall I started running into the night to find the truth in me ``` ## 前后端分离 第一版上线后不久就找了家公司实习, 期间偶尔看到了 [樱花庄的白猫 | ねこ・しろ・ましろ](http://2heng.xin/) 这个网站做得很 cool, 就萌生了想要模(chao)仿(xi)的念头. 后来毕业工作了, 在公司有幸独立完成了一个比较有规模的后台系统(Vue.js) —— 一个刚毕业的菜鸟有幸去做这种项目, 还是很感谢当时 leader 的信任. 待这个项目结束后有一小段空闲期, 我意识到新版的 Blog 也该到了“折腾”的时候了. 项目分为三部分: [前台](https://github.com/Yancey-Blog/BLOG_FE)用的是 React + mobx, [后台管理系统](https://github.com/Yancey-Blog/BLOG_CMS)是 React + mobx + Antd, [后端](https://github.com/Yancey-Blog/BLOG_BE)是 express + MongoDB 写 RESTful 接口. 我业余做些 MIDI 音乐, 所以单独开辟了一个音乐板块. 项目于 18 年 10 月 14 日正式上线, 之后前台又做了几次迭代优化: * 2018-12-30 code splitting, 代码优化 * 2019-01-13 使用 TypeScript 重构 * 2019-04-03 升级到了 CRA3, 给所有的动态加载增加了 Skeleton 直到 GraphQL 项目上线, 这一期收获了 6000 多 pv. ### FE ![首页](https://static.yancey.app/68747470733a2f2f79616e6365792d6173736574732e6f73732d636e2d6265696a696e672e616c6979756e63732e636f6d2f4a6965747532303139303531332d31323038353425343032782e6a7067.jpeg) ![blog summary 页](https://static.yancey.app/68747470733a2f2f79616e6365792d6173736574732e6f73732d636e2d6265696a696e672e616c6979756e63732e636f6d2f4a6965747532303138313031372d3138313433384032782e6a70673f782d6f73732d70726f636573733d696d6167652f7175616c6974792c515f3630.jpeg) ![blog archive 页](https://static.yancey.app/68747470733a2f2f79616e6365792d6173736574732e6f73732d636e2d6265696a696e672e616c6979756e63732e636f6d2f4a6965747532303138313031372d3138333533304032782e6a70673f782d6f73732d70726f636573733d696d6167652f7175616c6974792c515f3630.jpeg) ![music 页](https://static.yancey.app/68747470733a2f2f79616e6365792d6173736574732e6f73732d636e2d6265696a696e672e616c6979756e63732e636f6d2f4a6965747532303138313031372d3138343133304032782e6a70673f782d6f73732d70726f636573733d696d6167652f7175616c6974792c515f3130.jpeg) ### CMS ![登录](https://static.yancey.app/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f31302f32302f313636393231323536633938353438303f773d36343026683d34303026663d67696626733d31393039333537.gif) ![blog list 页](https://static.yancey.app/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f31302f31382f313636383564393136303961313630343f773d3338343026683d3234303026663d6a70656726733d313933333436.jpeg) ![blog detail 页](https://static.yancey.app/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f31302f31382f313636383564393136363033343731633f773d3338343026683d3234303026663d6a70656726733d323237383238.jpeg) ## GraphQL 时代 后来各种原因换了公司, 前后端分离版本也平稳运行了一年多了. 看到 Twiiter, FaceBook, 甚至 GitHub 都使用了 GraphQL, 我意识到 GraphQL 的时代终将到来. 新的东西在公司内部总是难以推广, 尤其在小公司而且当你不是 leader 的时候. 加之前后端分离版本的 Blog 积累了一些技术/业务债务, 遂决定将 Blog 进行一次升级. 项目大约是从 19 年 9 月零零散散开始动工, 到 20 年 5 月 2 日正式上线运行. 项目仍然分为三部分. ### 前台 [前台](https://github.com/Yancey-Blog/blog-fe-v2)用的是 Next.js + Apollo client + GraphQL + styled-component. 这次使用了服务端渲染, 我心心念念的推特大图分享终于回来了; 尝试了 css-in-js, 使用 styled-component 轻松实现了 light/dark 主题的切换 (虽然原生 css 的 var 也是不错的选择). 整体样式没有太多的变化, 但生产环境明显比上个版本顺滑多了. ![暗黑色 blog summary 页](https://static.yancey.app/Jietu20200505-042858.jpg) ![暗黑色 blog detail 页](https://static.yancey.app/Jietu20200505-042926.jpg) 最后跑个分吧, 除了 a11y 其他都还不错! ![lighthouse](https://static.yancey.app/Jietu20200514-122909.jpg) ### 后台管理系统 [后台管理系统](https://github.com/Yancey-Blog/blog-cms-v2) 用了 React + Apollo client + GraphQL + Material UI. ![Material 风格的 Dashbord](https://static.yancey.app/Jietu20200505-043334.jpg) 为灵活控制展示顺序, 通过权重的方式为一些模块增加了上移/下移/置顶的功能. ![支持上移/下移/置顶](https://static.yancey.app/Jietu20200505-043729.jpg) 增加了 blog statistics 的功能, 相当于对每篇文章创建/修改/发布 or 草稿等操作做了埋点. ![blog statistics](https://static.yancey.app/Jietu20200505-044146.jpg) 增加了 Agenda 模块, 可以做些简单的日程管理. ![Agenda 模块](https://static.yancey.app/Jietu20200505-044045.jpg) Profile 模块: 可修改 name (不是 UserName), 地区, 组织, 网站, Bio, 头像, 修改后会和左边 Drawer 实时同步. ![修改基本信息](https://static.yancey.app/Jietu20200505-044712.jpg) Account 模块: 支持修改用户名/密码/删除账号 ![Account](https://static.yancey.app/Jietu20200505-044725.jpg) Security 模块做的较多, 支持修改密码, 二步验证, 绑定手机号, 还可以申请 Recovery Codes 等. ![修改密码](https://static.yancey.app/Jietu20200505-045200.jpg) ![二步验证 - 选择手机系统](https://static.yancey.app/Jietu20200505-045213.jpg) ![二步验证 - 扫码](https://static.yancey.app/Jietu20200505-045226.jpg) ![二步验证 - 手动录入](https://static.yancey.app/Jietu20200505-045520.jpg) ![二步验证 - code 验证](https://static.yancey.app/Jietu20200505-045231.jpg) ![绑定手机号](https://static.yancey.app/Jietu20200505-045242.jpg) ![Recovery Codes](https://static.yancey.app/Jietu20200505-045251.jpg) ### 后端 [后端](https://github.com/Yancey-Blog/blog-be-next)用了 Nestjs + MongoDB + Apollo server + GraphQL, Nestjs 使用了 AOP 的思想, 虽然代码量繁琐了, 但可维护性指数型提高! 并且 Nestjs 的文档一级棒, 绝对值得学习一下. (我成功安利了我们部门后端团队将他们的项目全面迁移到 Nestjs, 但 GraphQL 似乎是没戏了) ### 运维 项目运行在一台 Debian 系统的 vps 上, 服务器在米国, 有时比较慢; fe 和 be 使用 pm2 守护进程, 其中 be 开启了集群模式; 三个项目都用 Travis CI 做了 CI 和 CD, master 只要一 push, 代码更新分分钟的事儿, 妈妈再也不用担心我手动上线了; 用 Caddy 做反向代理(没用 nginx 主要是懒得手动申请 https 证书). ## Monorepo & Keycloack 时代 21 年 11 月开始使用 rushjs, 将所有项目收敛到 monorepo, 即 [beg-monorepo](https://github.com/Yancey-Blog/beg-monorepo). 并且 CI/CD 从 travis 迁移到 GitHub Actions, 并且打通了 Slark 机器人. 此外, 放弃了手写 auth & role 管理, 采用 Keycloack 做全局的 SSO. ![image.png](https://static.yancey.app/urc1gb5f-1698218271650.png) ## 未来 未来可能做的? 比如后端用 rust 重写, 前端样式换成 tailwindcss? 一切都将一去杳然, 任何人都无法将其捕获, 我们便是这样活着. --- Source: https://yanceyleo.com/post/9aef0fc9-eb16-4ccc-bf18-388f885f2cd6 Published: 2020-05-03 Tags: 大事记