从 Hexo 到前后端,再到现在这个「不用伺候服务器」的个人站

我第一个正经博客是 Hexo 搭的------算是第一版

那时候觉得这就对了:Markdown 写好,hexo g 一把,丢到 GitHub Pages,主题换一换,域名绑上,就算有个像样的个人站了。周末改改 _config.yml,调调侧边栏,还挺有成就感。写文章反而成了顺手的事------毕竟生成静态页这件事,Hexo 已经替你干完了。

后来写着写着,开始不满足了。

我想要后台发文章,想要评论、搜索、访问量统计,想要「像正经产品一样」能登录、能改配置。于是很自然地从「静态博客」滑进了前后端项目------第二版来了:自己写 API、接数据库、做部署脚本,Nginx、HTTPS、PM2、Docker......一套一套往上叠。每次 push 之前心里都会紧一下:这次构建会不会挂?环境变量有没有漏?服务器磁盘又快满了吧。

说实话,那几年并不全是浪费。至少我搞清楚了请求怎么从浏览器走到 Node,也知道了个人项目上线到底卡在哪几个环节。但对一个主要用来写字、偶尔贴点作品链接的站点来说,维护成本明显偏高了。有时候半个月没更新,登录服务器一看,还有安全补丁要装------那一刻会问自己:我到底是来博客的,还是来当运维的?

中间又换过几套方案,CMS、自建后台、各种「博客 + 后台」模板都试过------第三版 就是这一阶段的产物。这版我玩得最狠的不是功能,而是动效

几乎每个页面都塞了动画:进出场过渡、卡片悬停反馈、列表滚动时的错落出现、背景里若有若无的漂浮元素......有些是我自己写的,有些是从各种动效库里拼出来的,但目的都一样------让站点「动起来」,打开每个页面都像在翻一本会呼吸的杂志。那时候我花在看动画调参上的时间,可能比写文章还多。截图只能留住某一帧,那种连贯的过渡和交互感,静态图是装不下的。

回头看,第三版是我个人站里视觉表达最放飞的一版。爽也是真爽------自己点开首页,看元素一个个滑进来,会有种「这站是我的作品」的满足感。但问题也出在这里:动效叠多了,JS 体积、首屏渲染、低端机和弱网环境下的卡顿,都会反过来咬你。每次换完头两周很爽,过两个月又回到老问题:依赖多了、迁移难了、本地起一套环境要半天,还得琢磨怎么别让动画把性能拖垮。

现在这个站,是第四版了。算是绕了一大圈又回到「简单」,但和当年 Hexo 又不完全一样。

这版我做了一个很明确的取舍:优先保证秒开。文章列表、归档、工具页这些高频入口,尽量静态、轻量,不再铺第三版那种全站大动画------页面切换就是干脆的切,不搞一长串进场编排。毕竟托管在静态构建上,首屏体验和 SEO 是实打实的硬指标,我不想让用户(也包括我自己)等一个博客首页等半秒。

但完全素面朝天又有点可惜。所以首页留了一个我觉得刚刚好的点缀:粒子 Logo 。用 Canvas 把沙砾般的粒子聚成站点标识,鼠标靠近会散开再弹回去,亮暗主题下颜色也会跟着变。它不算「复杂动效」,不挡阅读,不拖路由,但站点还是有那么一点生命力------和第三版那种全屏炫技不一样,属于克制版的有趣。

文章还是 Markdown,放在 content/posts/ 里,和图片一起进 Git。图片走 public/content/,正文里直接写路径就行。构建交给 Next.js,部署侧尽量往「无服务器 / 静态托管」靠------不用我半夜起来重启进程,也不用为了一台小 VPS 单独操心备份策略。需要改样式、改页面结构,就在这个仓库里改;要发文,就新开一个 .md 文件,和图片放在对应目录,提交,等构建完事。

写新文章大概就是这样:

text 复制代码
content/posts/某篇文章.md
public/content/posts/某篇文章/配图.jpg

正文里引用:

md 复制代码
![说明](/content/posts/某篇文章/配图.jpg)

没有 Redis,没有单独的同步服务,没有「内容在 A 系统、展示在 B 系统」那种分裂感。对我这种更新频率不算高的博客来说,这就够了。

四版下来,我自己的感受挺直白:

版本 大概方案 爽在哪 累在哪
第一版 Hexo 静态站 轻、快、几乎不用运维 功能扩展要绕弯子
第二版 自写前后端 + VPS 想加什么功能都能加 部署、备份、补丁全是自己的活
第三版 CMS / 模板 + 全站动效 页面动画多、视觉表达最过瘾 性能压力大、依赖和迁移成本高
第四版 Next.js + 本地 Markdown 秒开、内容和代码在一个仓库 动效克制,只留粒子 Logo 等轻量点缀

当然,这不是说 Hexo 不好,也不是说第三版那套大动效没意义------恰恰相反,那版让我摸清楚了「好看」和「好快」之间要怎么取舍。现在第四版把力气花在秒开和写作上,偶尔在首页看粒子被鼠标推开又弹回来,也挺开心的。如果哪天文章量真的上来了,或者要做更重的互动,再往上加东西也不迟------但至少底座不必一开始就扛那么重。

这篇就当第四版的开工说明吧。后面会在这里记技术笔记、项目复盘,还有一些一时半会儿说不清、但想先丢出来的想法。你要是也在纠结「个人博客到底该有多复杂」,希望我这四版的弯路能少让你走一点。

相关推荐
EAIReport7 分钟前
企业GEO全域运营技术落地路线与量化效果验证方案(AI大数据行业适配)
大数据·人工智能
极地野狼 音乐哔哔7 分钟前
AI Agent 30天速成|Day4 笔记
人工智能·笔记
小保CPP11 分钟前
OpenCV C++车型识别1-图像预处理
c++·人工智能·opencv·计算机视觉
普密斯科技14 分钟前
如何一键解决手机镜头磨切片微米级尺寸测量难题?
人工智能·计算机视觉·智能手机·测量
qq_4542450314 分钟前
认知自举:LLM自我指令泛化的三层逻辑
人工智能·架构·prompt
Luminbox紫创测控16 分钟前
可调UV宽光谱高功率的LED太阳能模拟器
人工智能·测试工具·汽车·安全性测试·uv·测试标准
董员外23 分钟前
RAG 系统进化论(一):纵览 RAG 的发展历程
前端·人工智能·后端
PC2005_cloud24 分钟前
Hotspot 技术实现全解:从零搭建自动化热点追踪系统
程序员
殷紫川25 分钟前
Agent Skills:把团队里"只会做一遍"的经验,变成 Agent 能反复调用的能力包
人工智能·agent
AI搅拌机30 分钟前
LoRA训练实战10:Wan2.2人物变火特效LoRA极简训练法,上手指南!
人工智能