新站点

jimmycai.com 这个域名用了快八年时间了，期间也没换过别的域名。一直有考虑过买个短域名或者 Domain Hack，可惜没找到合适的（喜欢的域名要么太贵要么已经被注册了）。后来我把那些已经被注册了但是续费价格还可以的域名记录了下来，想着说不定哪一天其中某个域名就过期了。

去年六月底的时候机缘巧合打开了 Notion，默认加载的就是上面提到的页面。随手点开了第一个 cai.im，结果发现出现的是 Dynadot 的域名清仓界面（Closeout）：域名已经过期，拍卖也没有人要，还有不到三天时间就会被删除，这时候可以直接一口价购买，先到先得。当时还剩下不到 48 小时域名就会被删除，只要支付十三块就能拿下。.im 后缀续费价格比 .com 还要低（Dynadot 续费一年 $8.81），没有多想就买了。付完钱还得等一两天才能开始用。估计因为是过期域名，所以处理的方式不一样。

我还记得几年前点开这个域名的时候还挂着出售页面，写的一口价 $98,000 (?)，着实离谱。

最后一次写文章是 23 年的九月份。再后来博客也被我停止解析，到现在主站上也只挂着一些联系方式。注册新域名后就想着重新把博客搭建起来，感觉偶尔写点什么记录下也挺有意思的。

Hugo to Astro

Hugo 也用了好几年了。没记错的话我可能在 18 年左右就开始用了。当时想使用静态博客，但市面上的 Jekyll 和 Hexo，或其他基于动态语言的静态站点生成器，在我还配备着机械硬盘的笔记本上运行实在是太慢了，每次生成和调试都非常煎熬，即使线上 CI 生成速度并不慢。Hugo 就不一样了，在本地也可以快速的编译，用起来很顺滑。

但是我不喜欢 Hugo 的模版语言，没有编辑器的高亮与自动补全，也没有自动格式化代码的支持：由于后缀是 HTML，每次格式化都会按照 HTML 的标准来，导致模版的各类函数被当成一般的字符串处理，代码的层级变得混乱。UX 我认为是不及格的。

现在电脑性能也更好了，Node.js 生态下的静态站点生成器速度比 Hugo 慢但是也不是不能接受。牺牲一点速度换来更好的 UX 和生态我不觉得是件坏事。最后选择了 Astro，因为官方的文档写的很详细，对各类 Worker 平台的支持也很好。现在这个博客就完全部署在了 CloudFlare Page 上。

相比于 Hugo，Astro 可以算是毛胚房，许多基础功能都要自己手动去写，但这也给了开发者更大的空间去发挥。小到翻页，大到如何定义路由全都要自己决定如何设计，折腾一圈下来很有成就感。感觉更像是面向静态博客优化的简化版 Next.js，路由的定义方法非常类似。

和 Astro 相比，我认为 Hugo 的模版语言有个很大的缺点是没有 JSX 那样的组件化语法：在 JSX 里我可以定义一个 Container 组件，就例如 <div class=“container”><slot/></div>，然后在其他的页面中调用 <Container>内容</Container>。如果以后要给 Container 这个组件添加样式只要改一个文件就好。组件传参也有 TypeScript 类型检查，可以提前发现问题。每个组件的 CSS 样式不会影响到别的组件，所以可以放心的写低优先级的样式例如 div { CSS style } 。

相比之下 Hugo 没有组件的概念，所有的模版文件都是 HTML，可以使用 partial 函数来引用别的文件，类似于 C 和 PHP 的 include 。但是不能嵌套，做不到 JSX 中的 <List><Item/></List>。

说了这么多，其实静态博客生成器能做到的都差不多，只是在开发体验上的区别罢了（绕弯路）。想要极致的生成速度就用 Hugo，想要更好的 UX 就选别的。换到 Astro 后还是很想念一些 Hugo 的功能，例如 Render Hooks 可以很方便的替换文章中的图片样式。还有短代码 Shortcode 功能，用来插入第三方平台内容比直接写 HTML 优雅许多。

设计

去年在参加夏校的时候完成了第一版主题的设计和编写。布局和现在的类似，但是首页除了联系方式以外还添加了教育经历，GitHub 的热力图，相册和音乐板块。第一次写 Astro 主题，只实现了最基础的展示功能，主打一个能用就行。博客也不拆开放子域名了，和个人主页一起生成。博客域名这么短个人感觉子目录比子域名看着顺眼点：blog.cai.im 对比 cai.im/blog。

可惜看久了感觉还是太乱了。最后把多余的板块都删掉，只留下了最基本的介绍和联系方式。嗯，看起来舒服了。这次放假稍微修改了下字体和配套的样式，就有了现在的版本。我很喜欢这种像素风字体，只不过可读性有点差。我尝试了好几个类似风格的字体：

• Pixelify Sans
• Press Start 2P
• Silkscreen
• VT323

最终留下来的是第一个 Pixelify Sans。

图片储存

使用 Hugo 时习惯把图片和文章放在一起，这样就可以在主题函数里获取到图片的长宽信息，避免页面加载时候的布局偏移（CLS）。问题在于这样图片也会被上传到 Git，久而久之仓库就变大了，每次 Clone 的时间也会变长。

这次把图片转移到了 CloudFlare 的 R2 上，有足够的免费额度。图片的长宽信息被我写到了 URL 里，这样就可以在 Astro 编译时处理图片。图片上传用到了 PicGo。没有使用带 UI 的版本，因为没有签名所以不能直接在 Mac 上运行，需要去改设置。我觉得没什么必要，CLI 版加 picgo upload 命令就够用了。

互动

以前花时间给静态博客加上自己写的评论系统，这次换了 Astro 后本来想用自带的 Action 功能配合 CloudFlare D1 做一个评论系统。有了前几次的经验之后写的很顺利。麻烦的是搞评论邮件提醒这类，得调用第三方 API 还得考虑如何不被刷。最后写了一半放弃了，太浪费精力，做完了也没什么人评论，还不如多写点别的文章。

最后决定把评论系统改成 Reactions，参考了 Disqus 和 GitHub Issues。个人感觉这种互动方式比写评论简单，读者的压力不会那么大，我也不用考虑怎么去回复评论（有时候收到评论完全不知道怎么回复，但不回又怕不太礼貌）。