2024 Blog Refresh
The code for this blog site was inspired by Next.js Portfolio Starter. Portfolio Starter Kit – Vercel
从 2021 年开始折腾博客到现在，已经是来到第三个年头了，这三年博客从外观到技术栈的实现都发生了翻天覆地的变化。
2021-Hexo
项目信息
2020 年底我开始接触前端，从 HTML CSS JS 三件套开始学起，对于前端的各种复杂布局和框架还是一头雾水，于是在 2021 年看到许多人用 hexo 构建博客时，我也一头扎进 hexo 的大家庭中。
Hexo 对于新手来说上手的成本很低，只需跟着文档一步步进行即可创建一个博客，同时开源社区中有大量可供选择的主题，在早期对前端了解未深入的时候，Hexo 就让我体验了一把创造属于自己的玩具的快乐。
Hexo 是通过生成静态文件的方式来进行部署。
Hexo 通过遍历 source 目录，建立索引，再根据索引生成纯静态文件放在 public 文件夹中，而使用者通过部署 public 中的文件到 VPS，云服务，或者 Vercel 这类平台上。
而这种方式的优缺点也很明显：
优点：
- 全为静态文件，部署方便。
- 可使用 CDN 加速几乎全部的静态文件。
缺点：
- 不支持动态内容，在客户端的 JS 逻辑较为繁重。
- 生成时间随着内容增长而增长，比较影响生成效率。
但 Hexo 陪伴我走过了那段初学者的时间，不仅让我第一次体验亲手去改动插件的源码，也让我学习到许多关于前端部署，CDN 相关的知识。
2023-Next.js+Sanity
项目信息
在 2023 年，因为工作的关系我重新对最新的前端知识进行学习，了解到了许多现代化的框架，比如
- Next.js
- Remix
- Svelte
这些框架都在不同方面满足了现代前端的开发需求，而其中 Next.js 是其中发展最快且开发者最多的框架，因此我又一头扎进了 Next.js 的海洋中。
在学习的过程中，我无意间看到 Cali 的开源博客文章，便抱着尝试的态度进行了部署与个性化的修改。
优点
- 优秀的用户认证
- 优秀的交互动画
- 优秀的 SEO
缺点
- SSR 导致首屏没有被 CDN 缓存，首屏显示延迟增加。
- 使用大量动画导致客户端的 JS 负担过重。
- 内容管理依附于 sanity，灵活度不足。
Cali 的博客设计风格十分出众，内容层级也很清晰，但毕竟不是自己的东西，在别人的框架上修修改改始终觉得差点意思.
在折腾的过程中我对 Next.js 与 SSR ISR PPR 相关的概念和实做不再模糊，而是可以自己上手去调试。
于是，在折腾的过程中还顺便帮 Cali 修了个小 BUG。
https://github.com/CaliCastle/cali.so/pull/29
对于我而言，我习惯将博客先在 notion 编写后，再同步至博客中，如果可以在博客中再加入一些自定义的组件或者样式就再好不过了。
但目前基于 sanity 的方案下，只能通过 sanity 获取基础的内容，如果需要更加灵活的样式和排版则很难实现。
因此在某一个使用 sanity 的编辑器抓耳挠腮编写博客的夜晚，我决定重头开始编写属于自己的博客。
2024-Next.js+MDX
项目信息
在重新开始设计与构建新的博客站点时，我尤为关心以下几点：
- Local MDX file management - 本地 MDX 文件管理
- Performance - 性能
- UI - 界面 UI
Let's Dive in!
本地 MDX 文件管理
在尝试过 hexo 的渲染引擎与 sanity 的在线编辑器后，我开始思考，是否有兼顾便捷与灵活性的解决方案？
在浏览 Next.js 的官方文档时，我注意到这篇介绍 markdown 与 MDX 的文章。
MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity and embed React components within your content.
总的来说 MDX 是 markdown 格式的超集，并且可以直接在 MDX 文件中编写 JSX 组件。
MDX 可以很好的兼顾本地存储与灵活添加各种组件的需求，并且对于习惯 markdown 格式的我来说几乎没有上手成本。
不仅如此，MDX 可以通过不同的方式进行渲染成页面，我既可以直接使用 @next/mdx 库来在构建时构建成页面，也可以通过next-mdx-remote库在运行时渲染云端的 MDX 文件。
同时, MDX 对 markdown 的兼容使得我可以很轻松的将 notion 上已经编写好的内容直接迁移至对应的 MDX 文件中，并且还可以在一些需要更加个性化的内容时，通过编写 JSX 组件的形式来添加到文章中。
最终选用 MDX 格式存储在本地文件中，使用 git 进行版本管理，在渲染方式上选用next-mdx-remote库。
这不仅可以保留一定的灵活性，同时对于当前的本地存储方式，也可以直接使用 SSG 的方式，在构建时直接编译为静态页面，可以很好被 CDN 捕获与加速。
性能
性能不仅对于用户体验十分重要，对于 SEO 也是十分重要的，详情可见这篇文章：
how-core-web-vitals-affect-seo
文章中提到 Core Web Vitals 是十分重要的，不仅仅会反映用户的实际站点体验，还会影响 SEO 的优先程度。
The Core Web Vitals report shows URL performance grouped by status (Poor, Need improvement, Good), metric type (CLS, INP, and LCP), and URL group (groups of similar web pages).
而对于站点响应速度，应该关注的指标有：
- First Contentful Paint 首次内容绘制
- Speed Index 速度指数
在开始构建之前，先看一下之前的旧版博客在 Lighthouse 中的得分吧。
可以看到，旧版的博客在性能表现上都不太好，主要的原因有：
- 网络负载过大，加载的文件太多，首屏加载时间过长
- 客户端 JS 负载过重，需要在客户端执行太多的 JS 逻辑
针对 首次内容绘制 优化，可以参考之前的博客。
而在新博客中，首屏中对于 framer-motion 库采用动态导入配合加载骨架图的方式，可以获得还不错的用户体验。
.png)
同时针对首屏出现的图片进行优化，采用 webp 格式来大幅减少图片占用的带宽大小，同时使用模糊图先进行占位，使图片不至于出现闪屏的效果。
.png)
以下是站点初次加载中的效果：
同时，尽可能减少客户端的 js 数量，优先使用服务端渲染，使得初始页面就有足够的信息可以展示，同时在禁用 js 的浏览器上也能有不错的浏览体验。
最后，尽可能减少页面的 First Load JS ,以加快网站初次加载的速度。
最后来看看最终的站点 Lighthouse 得分吧。
看起来好多了。
UI
在 UI 设计上，由于对设计方面本人确实是一知半解，因此参考了众多的站点。
在经历了几年的博客折腾后，我现在偏向内容为主，UI 设计与排版都倾向简约的风格。
当然也有一些很出众的设计，但是与我对博客的定位不太符合，因此没有参考。
在进行 UI 设计与开发时，我倾向通过小步修改，不断去对比，去达到心中预期的目标。
同时我喜欢统一的设计风格，用相同风格的元素去进行表达。
对需要等待的场景设计一些动效，让用户的等待变得更加有趣。
在博客内容页面的设计上，尽可能以内容为核心，不构建可能会干扰到阅读体验的控件，同时以移动端为首要目标进行开发，确保在移动端上也能有良好的阅读体验。
在页面切换动画上，farmer-motion 动画库是很广泛的选择，但是存在一个小问题：
- 在禁用 js 的浏览器中，初始内容很可能完全无法显示。
比如在 Nelson 的博客中，初始文字模糊渐入显示，在禁用 js 的状态下，内容则是完全无法显示。
虽然目前禁用 js 的情况为少数，但为了极端情况下，用户还是可以对站点内容进行阅读，因此对于页面内容，不应该使用 js 逻辑对其进行渲染。
在 CSS 中有一个较新的 API 可以实现页面切换的动画，并且这个 API 也十分强大，详情可看：
在 Next.js 中，可以使用 next-view-transitions库来快速使用这个 API。
通过这个 CSS API ，就可以在不依赖 JS 的情况下实现页面切换动画：
对于一些不依赖于内容，是在页面中增强用户体验的组件，farmer-motion 便尤为强大。
以上就是
- Local MDX file management - 本地 MDX 文件管理
- Performance - 性能
- UI - 界面 UI
这三点在新博客中的一些思考与应用。
部署上线
从 2021 年的第一个版本的博客开始，我就将博客部署在 Vercel 平台上。
Vercel 有着方便且强大的自动部署能力，而且 Vercel 的服务稳定性和良好的仪表盘使得用户使用体验非常好。
并且对于个人用户，免费的 Hobby 计划就已足够，还可以免去每月的 VPS 费用。
对于需要加速境内访问，只需在 DNS 解析中将 Vercel 官方的 cname 记录切换为
https://vercel.cdn.yt-blog.top/
即可。
后语
希望你也可以在这个博客站点中感受到代码的乐趣和各种有趣的小巧思。
我们 2025 年 Blog Refresh 再见 👋。