从零开始的 Astro 博客设计

字少事儿大：

我的博客进行了完全重写。

不是改改配置，不是插入点 html，不是应用一点 style，更不是稍微插入点 JS 脚本增强体验，而是完全从零开始的重写。

一切的起点

众所周知，我在之前，用的是现成的 SSG 方案：hexo + theme-butterfly-newbee（以防你不知道，它是 theme-butterfly 的个人 fork）。

而让我想到「重写」的契机，则是学习前端 html + css + js 三件套（由于想要写一个自己的探针，于是准备学一下前端页面）。既然都已经有 web 应用程序开发的必要条件，那么为何不来练练手呢？而且，现有的 Hexo 问题实在是太多了——隔一个月就十几个 npm 包漏洞，html 检查器居然会查出 2k 个警告，CSS 文件过大，甚至整个博客运行时会爆出一堆 JS ERR。

当然，直接手搓 md 渲染 SSG 显然非常不现实，而且 100% 属于重复造轮子。于是想起了之前缺少 html/css/js 基础而放弃的 Astro 框架。它轻量、快速、组件编写简单，内置 markdown 渲染，可以继续使用现有的 vercel 平台，甚至可以按需要启用服务端动态渲染——对刚学会前端的我来说，是一个非常有意思的新玩意。

于是，花了一个下午跟着官方的搭建 blog 教程走了一遍，稍微对这个框架有了一定的了解也顺便补全了一些 JS 的妙妙语法。既然了解了 Astro 的基本用法，接下来就可以开始写一点自己的东西了……

视觉设计

不知道各位有没有看过一张梗图，大意是光鲜亮丽的前端外表后是胡乱堆砌的后端组件。是的——编写出阅读舒适的，美观的前端页面是非常重要的。其实之前学完 html/css 的时候，我已经设计过了主站 的视觉。它的配色和我的 obsidian 编辑器配色基本完全一致（是这个叫作 Obsidian Nord 的主题）。

这种视觉风格非常舒适——既不是亮瞎眼的白纸黑字，也不是让我这种散光人士退避三舍的深黑背景。稍微加亮的背景，金色易读的标题，突出的、带有边框的引用块，容易发现的下划线链接，以及可读性高的 web 字体（和加大的字号），都是针对用眼优化的。

正在阅读这篇文章的读者，是不是也感觉读起来很舒服呢？当然，如果你有任何建议，或者觉得很丑，也可以留言给我。

断舍离

提到留言，就不得不提到我的「断舍离」了。

是的，Artalk 评论区被我扬了。不可否认，它为我带来了许多「想法的碰撞」，很多读者都给我的文章留下了属于自己的见解。但是也遇到过问题——有些滥用者利用评论区发广告导致我加强评论管理，有些朋友留下的邮箱采用了邮件无法到达的邮箱提供商，Artalk 需要大量 JS 执行经常出现网络问题……

因此，在这次重写博客的时候，我没有再考虑 Artalk，而是只留下了 Hatsu（一个专为博客/ RSS 设计的 Fedi 软件）评论区。直接把博文链接贴近自己的 Fedi 软件，就可以看到对应的贴文啦。回复这个贴文，留言就会展示在文章的下方~

放心，各位在我这里留下的数据，也即 Artalk 的数据库，已经永久封存在我的机器上了，不用担心数据泄露问题，会好好珍藏的！

另一个断舍离是第三方分析脚本。之前为了对访问统计数据有更加深入的简介，博客同时接入了 cf 统计 / 自建 umami 实例 / Clarity Session 录像。它们引入了大量 JS 脚本，而且对各位读者的隐私也存在一定的问题（虽然他们自称隐私友好，但谁知道呢？）。所以这一次，我只留下了自建的 Umami，并打开了 Umami 的 Session 录像（替代 Clarity）。

对于页面访问量统计的话，此前用的是 Umami 公开一个只读用户，Butterfly 主题内置调用 API 的方式。而这次我复用了个人主页上的 Moe-Counter，针对每个路径生成一个唯一的 ID 作为计数，更美观也更安全。

小巧思

在打磨新版博客设计的过程中，特意做了下面的一些小组件(小巧思)，不知各位读者有没有发现呢？

• 博文的简介默认折叠「我就是手贱」，保持神秘感。
• TOC 的小标题、鼠标悬浮在链接上的平滑变色，是简单学了下过渡的结果
• 鼠标放在链接图片上，图片会转动，来提示这是链接
• ……还有更多，暂时不剧透了~

另外，博客也针对搜索引擎进行了优化，解决了多项 SEO 问题，引入了标题长度和 meta description 长度的单元测试检查。希望能提升一点搜索引擎排名……

服务端渲染

是的，astro 框架配合 Vercel 提供了服务端渲染。这就好玩了——你可以在服务端执行一些代码，实现按需运行的服务。

基于此，我对友链页面进行了升级，你可以打开友链尝试一下：应该可以看到每个友站的网络状态和状态码。注意，这些是在服务端进行测试的，和你当前所处的网络环境无关。

如果你发现这个页面加载有些缓慢，那也是正常的，说明一段时间没人访问，而且缓存已经失效了，服务端需要重新测试友链的状态，才能把数据发回给你。

可靠性问题 这个友链测试只是一个简单的 fetch 网页内容，并计算 fetch 的延迟，受到 CDN、源站区域等多种网络因素的影响，甚至自动程序可能被拦截导致显示为网络错误。因此——仅供参考！！

渐进增强

一个网页最重要的是什么？除了视觉设计之外，「用户体验」也是非常重要的。

渐进增强是一种设计理念，旨在为尽可能多的用户提供基本的内容和功能，同时为能够运行所有必要代码的最现代化的浏览器用户提供最佳体验。

这对网页提出了相当高的要求：

如果用户没有开启 JS，那么还能看到基本内容吗？

于是，我在编写整个网站的时候，尽量不引入任何 JS，所有的渲染都是 Astro 在构建阶段完成的。只有遇到无可避免的情况下，才使用 JS：

• 博客的评论区，需要动态加载 Hatsu 上的评论内容，无法在没有 JS 的静态网站上正常运行
• 友链监测在服务器端完成，但是加载动画的关闭用了几行 JS 实现
• Umami 数据分析和跟踪脚本需要 JS 才能执行，无法避免

因此，你现在可以看到一个非常干净的开发者控制台，网站的加载速度也非常快。

后记

对于新版的博客，我是比较满意的，不知各位读者怎么想呢？另外博客的 Atom 由于 Astro 不支持被移除了，不过 RSS 依然可用~

作为亲手几乎从零开始写的，有个人特色(代码堆屎)的东西，想了想还是不开放源代码给各位看了。毕竟，这个作品和看板娘 S 酱一样，作为「作者」，稍微有些私心，态度更像是「父母看孩子」一类，不希望别人拿走直接使用……

《水星冲浪日志 6》已经在写了，最近沉迷改网站所以拖更，各位读者应该能理解吧？（新建 markdown 文件）（逃）

版权声明

作者：Sam Hou

原文链接：https://blog.samhou.moe/blog-to-astro/

本博客所有文章除特别声明外，均采用 CC BY-NC-ND 4.0 许可协议。转载请保留此版权声明，注明来源 SamHou's Blog！