个人博客 3.0:迁移至 Astro + Vercel

TL;DR: 我利用Astro框架和Vercel平台,搭建了一个全新的博客。该博客不仅绑定了自定义域名,还集成了Vercel Analytics以追踪访问数据。欢迎访问,一同探索这个数字空间:tada:

我为什么要搬迁博客

最近终于下定决心,给我的博客2.0来了一次大改造。其实早就想改了,原来的主题已经停止维护,页面设计也显得有些复杂,问题越积越多,比如:

  • 性能问题:加载速度慢,体验不够流畅
  • 审美疲劳:样式看腻了,现在更偏爱简约风格
  • 更新效率低:每次修改内容后,页面刷新慢
  • 阅读体验差:字体、代码块等细节不够友好
  • 内容陈旧:堆积了不少低质量的文章
  • 搜索功能弱:找东西费劲
  • 缺少黑暗模式:晚上看博客有点刺眼

前两天打游戏打得有点腻,又不想碰毕设,于是心血来潮决定折腾一下博客。正好在浏览别人博客的时候,发现了Astro这个框架,随后又遇到了一个深得我心的主题——Cactus。它的设计简约大方,完全以内容为中心,还提供了许多实用的功能(以下是官方特性的翻译摘录,我个人特别喜欢的部分加粗了):

  • Astro v5 极速体验 :rocket:
  • Tailwind v4 支持
  • 符合语义化的 HTML 标记,无障碍友好
  • 响应式设计 & SEO 优化
  • 深色 & 浅色模式
  • 支持 MD 和 MDX 格式的文章与笔记
    • 包含 Admonitions 提示框
  • 使用 Satori 生成 Open Graph 图片
  • 自动生成 RSS 订阅
  • Webmentions 支持
  • 自动生成:
    • 站点地图
    • robots.txt
    • Web 应用清单
  • 集成 Pagefind 静态搜索库
  • Astro Icon SVG 图标组件
  • Expressive Code 代码块与语法高亮

另外,部署在 Vercel 上也有不少好处:免费、操作便捷、构建速度快、自动化程度高,还能保证高可用性。于是,我花了两天时间完成了迁移。

迁移过程

由于之前折腾过不少静态网站,也用过 Vercel 部署项目,所以这次迁移过程非常顺利,总共花了两天时间。第一天主要是把新博客部署起来,迁移旧文章,并绑定域名;第二天则是对博客样式进行微调,并添加了 Vercel Analytics 支持。

这里要特别感谢 Sanqiz 的 B 站教程,帮我节省了不少时间。整个过程非常流畅:fork/clone 项目,导入 Vercel,几分钟就部署完成了。接下来就是一些简单的自定义操作,比如更换名称、图标、社交媒体信息,以及修改首页和关于页面的文字,这些都没花太多时间。至于文章的迁移,只需要把旧博客的 Markdown 文件复制到新博客的对应文件夹,再调整一下 front-matter 的字段就行了。少数文章中的图片需要重新上传到图床,顺便也清理了一些旧博客中自认为“低质量”的笔记和文章。

关于域名,博客 1.0 时买了个便宜的 .top 域名(确实不太行);博客 2.0 直接用了 GitHub Pages 的默认域名;到了博客 3.0,Vercel 免费提供的域名在大陆会被墙,于是正好搞个新域名。这次在 Spaceship 上买了个 .dev 域名,价格比 Cloudflare 便宜,和同前缀的 .com 差不多。不过 .com 已经被注册了,于是选择了更专业且适合技术博客的 .dev 域名。第一年只要 60 元,第二年续费 90 元。域名购买后托管在 Cloudflare,绑定域名只需要在 Cloudflare 中添加 DNS 解析,再在 Vercel 中配置一下就行了。

Astro Cactus 主题的样式本身已经很完善了,而 Sanqiz 的版本 还对间距、宽度等细节做了调整,于是我就以这个版本为基础(2025-02-05 更新:该版本存在一些 bug,比如无法生成 site-map.xml 等,建议还是以原版为基础)进行了一些自定义。虽然改动不多,但作为一个只在 20-21 年简单接触过前端的人,还是比较耗时的。好在 F12 开发者工具和 AI 的帮助让这项工作变得轻松不少。为了实时查看样式修改效果,我选择创建一个新分支,通过 Vercel 部署预览。每次修改提交后,Vercel 都会自动更新,刷新页面就能看到效果。不过这种方式不如本地调试方便,不太推荐,只是个人懒得去配置环境了。为了避免分支提交记录混乱,我用 git rebase 把多个提交合并成一个,最后通过 PR 合并到主分支,确保主分支的提交记录干净整洁。

主要的样式修改包括:

  1. 字体放大:除了博客标题,几乎把所有字体都放大了。原主题和 Sanqiz 版本的字体都偏小,阅读体验不太好。
  2. 目录组件优化:Sanqiz 版本的目录组件不支持手动展开/关闭,而且在移动端隐藏了。我觉得原版的设计更好,尤其是移动端,目录对导航很有帮助,支持展开/关闭也能更好地展示页面内容。这部分花的时间最多。
  3. 首页调整:Sanqiz 的首页只展示了最新博客,我加上了简短的个人介绍和社交媒体信息。
  4. 其他细节:比如调整间距、修改日期格式等。

最后,添加 Vercel Analytics 也非常简单。只要网站部署在 Vercel 上,导个包、加个组件就搞定了。个人博客的 SEO 通常都不太好,阅读量也有限,通过 Analytics 可以更直观地了解博客的访问数据。

个人博客历史

博客 1.0

最开始搞博客是在 2021 年,推免结束后,我觉得作为一个计算机专业的学生,应该有一个个人博客。不过,由于本科教育偏”文科化“,加上一直忙于刷绩点,我对 Web 开发几乎一无所知。于是,我选择了 Notion 作为博客平台,毕竟它的自由度很高,上手也简单。由于 Notion 提供的默认域名很难记,我还特意买了个域名,并通过 Cloudflare 进行绑定。这个博客主要记录一些生活和兴趣相关的内容,没什么技术干货,链接在这里

不过,这个博客的寿命并不长。因为我的 Notion 账号是用本科邮箱注册的教育版,毕业后邮箱被学校收回,而 Notion 的登录又只能通过邮箱验证码。我尝试过发邮件证明邮箱归属,但都没用。加上很快又搞了第二个博客。于是,这个博客很快就被弃用了。一年后,域名过期,这个博客的生命也就正式“结束”了。直到昨天偶然搜索,我才发现它的域名,算是勾起了一些回忆吧。

博客 2.0

2022 年本科毕业的那个暑假,我利用空闲时间更系统地学习了一些缺失的计算机知识,开始接触 GitHub,并动手做了一些实验和小项目。渐渐地,我觉得自己需要一个更“正经”的博客:一来可以记录学习过程中的收获;二来以后找工作面试时,写在简历上也能留个好印象。于是,我选择了 黄玄的博客主题,基于 Jekyll 框架搭建了博客 2.0。这次直接使用 GitHub Pages 进行部署,域名也用了 GitHub 提供的默认域名(这个挺好记的,就是用户名 + github.io),链接在这里

就这样,博客 2.0 从 2022 年 6 月一直服役到了 2025 年 2 月,差不多三年时间,总共更新了 90 篇文章。它几乎记录了我整个硕士阶段的成长与思考,对我来说意义非凡。虽然现在搭建了博客 3.0,但这个博客会一直保留下来,只是不再更新。它就像一段数字化的记忆,承载着过去的努力和收获。

博客 3.0

2025年,我即将从学生身份转变为职场新人。新的阶段,新的博客,希望能够在这里产出更多高质量的内容!

不同博客的灯塔跑分

博客1.0:这个版本的博客得分出乎意料,但仔细想想又在情理之中,毕竟 Notion 是工业界的产品。

博客2.0:各方面表现都很一般,这也是我决定更换的主要原因之一。

博客3.0:这个版本的博客在各项评分中都获得了满分,非常满意。

另外,博客3.0的构建速度也非常不错。

最后

无论博客的样式如何变化,博客的核心始终是内容。

58 Likes

恭喜恭喜,我现在用hugo+vercel,但是部署好之后一直没怎么写文章 :nerd_face:

20 Likes

哈哈,可以先上传一些笔记。

20 Likes

和佬用一样的主题 同是Astro+Vercel :sunglasses:

20 Likes

btw,l站学生群体多吗?如果多并且大家感兴趣的话,我可以把自己今年秋招的经验文章搬运过来。

18 Likes

支持
我博客懒得搬了
凑合随便写点东西吧

15 Likes

样式不重要,有内容就行!

14 Likes

我仍旧还在用php

14 Likes

太强了,大佬

4 Likes

没有,这个人很菜 :smile:

太强了,恭喜大佬

1 Like

佬友好厉害,我也想把我的博客从 hexo 迁移到 astro,就是一直没动手。

1 Like

谢谢佬友分享,我也是astro+vercel​:+1:

1 Like

迁移起来应该比较丝滑

Astro+Vercel的搭建教程可以分享一下么

可以看一下文章中的视频教程,很完整,如果有疑问可以再给我评论或者发邮件。

准备换到vue了,移到cos,套个cdn,每年付个域名钱:heavy_plus_sign:不到30的资源包,已经没有精力玩博客了,现在只追求稳⊂(˃̶͈̀ε ˂̶͈́ ⊂ )

前面才从notionnext迁移到hexo :tieba_087:

哈哈,我就是直接fork的,懒得自己改。我还参考这篇博客添加了评论模块,佬也许你也可以参考一下https://liruifengv.com/posts/add-comments-to-astro/
还可以优选一下域名,加速国内的访问参考:Vercel优选域名加速网站 • Faust

评论在博客2.0的时候添加过,不过没有人评论哈哈,这次索性就不加了,也比较影响整体美观,后续可能会在GitHub讨论区实现类似的效果;我试试优选域名,谢谢!

1 Like