Blog
Published on

分享一下小破站的迁移过程

缘起

某天, 在地铁上打开 V 站看到了这个帖子: 成功将 Hugo 博客迁移到 Next.js,很清爽的一个博客主题.

本来没觉得有什么, 但是点进去他的博客后, 有一点打动我的是, 访问速度真的很快, 并且试了下关闭🪜后, 打开也很丝滑。 我之前的博客是用 hugo + github pages 部署的, 经常就访问速度很慢或者说访问不到, 这是引发我迁移博客的最大原因。 其次就是这位兄弟的模版使用了 next.js+tailwindcss, 作为一名前端, 不要太熟悉了, 用这套开发模板后续自己魔改肯定体验拉满, 废话不多说, 那么咱就开干!

选择模板 https://vercel.com/templates

个人偏爱极简风，使用 tailwind-css-starter-blog。

原模板中使用的是 yarn，我二话没说就替换成了 pnpm 😂。另外 tailwindcss 的版本也可以升升级，就是需要改动的地方比较多，等我有时间了再整一整。

部署项目

使用 Vercel 提供的 Next.js 博客模板让它的部署变得异常简单，可以直接点击模板页的 Deploy 按钮或者 README.md 文件中提供的部署按钮, 然后按照页面步骤一步步来即可。没有使用模板就就Import Git Repository来发布吧。

部署完成后, Vercel 会自动生成一个域名, 大概长这样 blog-seven-fawn-22.vercel.app，后面我会回过头来替换成自己的域名。

切换 cloudflare 的 DNS 服务器

可以购买域名的云服务商很多，我这里使用的在腾讯云购买的域名，下面开始配置cloudflare的dns到腾讯云。

  1. cloudflare 主页. 进入主页后, 点击右侧的 加入域 按钮.
  2. 输入域名, 点击继续
  3. 选择白嫖计划 Free $0 😂, 点击继续
  4. 🌟关键点:, cloudflare 会自动分配 Cloudflare 名称服务器, 共有两个, 用来替换腾讯云的域名解析
  5. 进入腾讯云域名控制台, 进入需要配置的域名, 点击 修改DNS服务器, 然后把第4步产生的 DNS服务器 复制进去即可.

![腾讯云DNS配置](/static/images/daily/tencent-dns.png) ![添加DNS服务器](/static/images/daily/tencent-dns-add.png)

替换项目域名 & 加速访问

  1. 在 Vercel 上发布的项目中面板中，找到 Domains，点击添加即可，目的之一是可以让域名和项目关联，之二是可以使用 Vercel 免费的 SSL证书
  2. 到 cloudflare 的 DNS->记录，点击添加记录，把 www 和 你的域名 分别添加重定向到 Vercel 分配的域名，这样就把流量打到了 Vercel 服务器 剩下的就是等待了，一般一个小时以内就可以使用你的域名进行流畅地访问了🎉
  3. 到 cloudflare 的 SSL/TLS -> 概述，配置 SSL/TLS 的加密模式为 完全(严格) ![cloudflare cname](/static/images/daily/cloudflare-cname.png)

替换 contentlayer 为 keystatic

2025-12-04，今天逛github看到了独立开发者推荐使用的技术，其中 keystatic 吸引了我，它可以为静态网站提供一个后台管理的界面，还能接入GitHub，可以很方便的管理文章，我寻思我的博客也可以这么做呀，这样我甚至可以直接在手机上编辑blog了，平时也再也不用启动项目写markdown，说干就敢，于是在AI的帮助下，一个下午就完成了迁移，顺带还加上了跳页的功能，哈哈。