天晴，夏日，猫和你https://cat.ruyuan.icu/zh_CNhttps://cat.ruyuan.icu/posts/how-i-built-this-blog/https://cat.ruyuan.icu/posts/how-i-built-this-blog/从 Next.js 换到 Astro，顺手踩了几个图床的坑。Tue, 10 Nov 2026 09:12:00 GMT<p>折腾了几天，这个站总算有点样子了。</p> <p>说"新家"其实不太准确——之前也搭过几个博客，最后都荒在那儿。这次想认真一点，先想清楚自己要什么：能安静写点东西，打开快，看上去顺眼。就这三条。</p> <h2>一开始选了个很漂亮的方案</h2> <p>最先看上的是一个 Next.js 写的博客，毛玻璃、3D 首屏、弹幕背景，视觉上确实漂亮。装下来跑通了，效果也没得说。</p> <p>然后我发现它首页要加载 4.3 MB 的 JavaScript。</p> <p>主力是那个 952 KB 的 three.js。为了首页那几秒的 3D 效果，每个访客都得先把一整个 3D 引擎下载下来、解析完、跑起来。我自己在本地打开都觉得卡，更别说手机。</p> <p>这件事让我想明白一个道理：<strong>好看的代价如果由读者承担，那就不算好看</strong>。</p> <h2>换成 Astro 之后</h2> <p>后来换成了 Astro + Fuwari。同样是静态博客，同样是毛玻璃卡片，但整个站的 JavaScript 只有 239 KB，缩小了 18 倍。构建一次 4 秒，产物 4.6 MB。</p> <p>页面还是那些页面，观感没有明显下降——因为原来那些炫技的东西，本来就只是炫技。</p> <p>Astro 的思路很简单：默认不发 JavaScript，只有真正需要交互的地方（比如搜索框、播放器）才加载一点点。剩下的全是提前生成好的 HTML。</p> <h2>配色是件挺难的事</h2> <p>Fuwari 原本整套配色由一个色相值驱动——你调一个数字，背景、按钮、链接全跟着变。省事，但也意味着永远不可能出现撞色，整个站永远是同一个色系的深浅变化。</p> <p>我把色彩拆成了两层：<strong>背景走冷色</strong>（雾蓝灰，色相 235），<strong>强调色走暖色</strong>（落日橙，色相 38）。两者在色相环上几乎是对角，但饱和度都压得很低，所以是灰调的对比，不是红配绿那种刺眼。</p> <p>这种配色有个好处：深色模式下橙色会很跳，浅色模式下又很克制，两边都能看。</p> <h2>图床踩的坑</h2> <p>图片一开始想用 Gitee 做图床，网上教程一抓一大把，步骤都是对的。</p> <p>问题在于这条路 2022 年就断了。Gitee 对图片加了防盗链：你在 PicGo 里点"验证上传"能过，自己点开链接也能看，但<strong>一旦文章发到别的网站，带着站点的 Referer 去请求，直接 403</strong>。</p> <p>更坑的是它返回的"直链"其实是个 15 分钟就过期的签名地址。</p> <p>后来换成阿里云 OSS。传了张壁纸上去，7.7 MB。这个体积放进博客是灾难——五张图就是 38 MB，移动端基本打不开。</p> <p>好在 OSS 有实时图片处理，在链接后面加一段参数就行：</p> <pre><code>?x-oss-process=image/resize,w_1200/format,webp/quality,q_85 </code></pre> <p>同一个文件，从 7.7 MB 变成 169 KB，肉眼看不出区别。原图还在桶里，只是访问时实时转码。</p> <h2>接下来</h2> <p>技术上的事基本齐了：文章、说说、相册、友链、分类标签、搜索、音乐播放器。</p> <p>剩下的就是填内容。</p> <p>一个博客最难的部分从来不是搭起来，是三个月后还愿意往里写。这次希望能久一点。</p>