今天的核心任务,是把老掉牙的 WordPress 博客,搬到一套全新的技术栈上。
说实话,WordPress 用了这么多年,确实稳。但你懂的——现代前端体验它真跟不上了。
说到这个,我最头疼的就是加载速度和交互手感。
以前文章一多,页面就卡得像在用拨号上网。
技术选型
这次重构,我选了 Next.js 16 + App Router + TypeScript + Tailwind CSS + Sanity CMS 这个组合拳。
为啥挑 Next.js?
- App Router 的 Server Components 真香,客户端 JS 直接砍掉一大半
- ISR(增量静态再生)太实用了,内容更新不用全站重 build
- TypeScript 让代码写起来更安心,少踩坑
- Tailwind CSS 配合快速开发,样式调起来爽到飞起
内容管理这块,我果断放弃了 WordPress 数据库,改用 Sanity CMS。
不是嫌弃它,而是它真的更适合现在的需求:灵活建模、API 现代化、维护轻松。
设计方向
视觉风格我玩了个新花样——叫“前卫实验风”。
意思就是:大胆点、不拘一格,但别乱来。
具体做了这些事:
- 主色调是深色背景,加一点温暖的琥珀色(#c85a30),看着舒服
- 首页原本想用粒子动效,后来觉得太花,直接换成极简背景
- 标题用衬线字体,正文用无衬线,阅读节奏更清晰
- 大量留白,让页面有呼吸感,不是堆满信息的那种
部署流程
部署平台我锁定了 Vercel,毕竟跟 Next.js 是亲兄弟。
但也不是一路顺风:
- 域名绑定出了问题,sikaoa.com 原来在 DNSPod,结果账号密码找不到了。最后靠阿里云 DNS 解决
- 图片存储空间不够用,Vercel 免费版才 1GB,很快爆了。我转战阿里云 OSS,搞定
- 手机访问慢得离谱,压缩图片 + CDN 加速后,明显快多了
数据迁移
这一步最难搞,整整花了两天时间处理那 3500 多篇文章。
从 WordPress 导出的数据不能直接用,得手动清理:
- 去掉那些 WordPress 特有的短代码和格式垃圾
- 把 base64 内嵌图片拆出来变成独立文件
- 重新生成 slug 和摘要,保证 SEO 不崩
- 最后同步进 Sanity CMS,才算完活
一天完成的成果
到今天晚上,新博客终于上线了!
不是随便跑通就行,是真的能用了:
- 首页加载快了好几倍,用户说“秒开”
- 明暗主题切换流畅,不用刷新页面
- 搜索功能能搜文章内容,不再是摆设
- 支持 11 种语言,国际化落地
- Wiki 知识库上线,结构清晰好维护
- 小红书风格的探索页也有了,好看又实用
从 WordPress 到 Next.js,不只是换了个框架。
更像是给自己的博客,重新定了个方向。