思考啊SIKAOA
5 分钟阅读幻灯片

从 WordPress 到 Next.js:博客重构的一天

今天的核心任务,是把老掉牙的 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 是亲兄弟。

但也不是一路顺风:

  1. 域名绑定出了问题,sikaoa.com 原来在 DNSPod,结果账号密码找不到了。最后靠阿里云 DNS 解决
  2. 图片存储空间不够用,Vercel 免费版才 1GB,很快爆了。我转战阿里云 OSS,搞定
  3. 手机访问慢得离谱,压缩图片 + CDN 加速后,明显快多了

数据迁移

这一步最难搞,整整花了两天时间处理那 3500 多篇文章。

从 WordPress 导出的数据不能直接用,得手动清理:

  • 去掉那些 WordPress 特有的短代码和格式垃圾
  • 把 base64 内嵌图片拆出来变成独立文件
  • 重新生成 slug 和摘要,保证 SEO 不崩
  • 最后同步进 Sanity CMS,才算完活

一天完成的成果

到今天晚上,新博客终于上线了!
不是随便跑通就行,是真的能用了:

  • 首页加载快了好几倍,用户说“秒开”
  • 明暗主题切换流畅,不用刷新页面
  • 搜索功能能搜文章内容,不再是摆设
  • 支持 11 种语言,国际化落地
  • Wiki 知识库上线,结构清晰好维护
  • 小红书风格的探索页也有了,好看又实用

从 WordPress 到 Next.js,不只是换了个框架。
更像是给自己的博客,重新定了个方向。