从毛玻璃到液态玻璃：这个博客是怎么搭起来的

Fri, 28 Aug 2026 00:00:00 +0800

这个网站最早只是一个很普通的想法：家里已经有一个 huangqixuan.com 域名，与其一直空着，不如拿来写教程。

我以前也试过免费建站。当时用 InfinityFree 的免费空间和 wuaze.com 子域名，做过带评论区的网站，甚至还折腾过论坛。后来账号因为长时间没有使用被暂停并删除，子域名也出现了 DNS 解析错误。那次经历让我明白，网页文件、域名和服务器其实是三件不同的东西。免费平台一旦收回空间，网站内容和网址都有可能一起失效。

这一次我想把源文件留在自己电脑里。托管平台可以换，域名也可以重新解析，但文章不能跟着平台一起消失。

先决定网站该怎么运行

博客常见的方案大致有两类。

动态网站会在访问时查询数据库，再生成页面。WordPress、论坛和带用户系统的网站通常属于这一类。它适合登录、发帖、后台管理和复杂评论，但也需要长期运行的服务器、数据库、更新和安全维护。

静态网站则提前把文章生成成 HTML。读者访问时，服务器只需要发送已经做好的文件。教程博客不需要注册和数据库，静态方案更省事，也更不容易因为服务器配置出错而打不开。

最后我选了：

Markdown 文章
 ↓
Hugo 生成 HTML
 ↓
Cloudflare Pages 发布
 ↓
www.huangqixuan.com

GitHub 在这里不是必须的服务器。它更像一个代码仓库，可以保存修改历史并触发自动部署。当前网站即使不依赖 GitHub，也能用 Wrangler 命令直接发布到 Cloudflare Pages。以后要换成 GitHub 自动构建，文章源文件也不需要重写。

为什么用了 Hugo Stack

我看过几个教程博客，比较喜欢 Hugo Stack 的三栏布局：左边放头像和导航，中间是文章，右边放搜索、分类和标签。它在桌面上信息密度合适，缩到手机后也能改成单栏。

Hugo 本身只负责把内容生成网页，Stack 提供基础模板。文章依然是普通 Markdown，例如：

---
title: "文章标题"
date: 2026-08-28
categories: ["建站笔记"]
tags: ["Hugo"]
---

正文写在这里。

这样做的好处很直接。网站样式可以重做，文章本身不用搬家。哪天不想用 Stack，甚至不想用 Hugo，这些 Markdown 文件仍然能打开。

第一版为什么看起来不像液态玻璃

一开始，我只知道自己喜欢苹果的 Liquid Glass 风格，于是先找有没有现成的 Skill。最初找到的是 apple-design、frontend-design 一类设计规范，它们能说明层级、动效和控件应该怎么组织，但不能自动带来真实折射。

第一批 Demo 主要用了这些 CSS：

background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.2);

它能做出漂亮的毛玻璃，却没有改变背景像素的位置。玻璃下面的线条不会弯，边缘也没有凸透镜感。看起来像一张半透明塑料片，而不是有厚度的玻璃。

后来我把判断标准改成了下面几项：

背景细节在玻璃边缘发生位移。
曲面边缘有连续折射，不只是模糊。
色差和高光要克制，不能像霓虹描边。
控件移动时要重新采样它下面的画面。
内容仍然清楚，按钮和输入框也必须能点。

把六个原项目放在一起比较

只看截图很容易误判，所以我把六个公开项目下载到本地，保留原引擎和默认参数，再做了一页统一入口。对比对象包括：

项目	实现路线	我最后记住的特点
ybouane/liquidglass	WebGL Shader	折射、色差和光照完整，适合独立按钮和工具栏
archisvaze/liquid-glass	SVG + WebGL	像一个光学实验台，适合理解厚度、IOR 和边缘宽度
xanaxknight/liquid-glass-css-svg	SVG displacement	单文件也能做出可见位移，适合研究位移图
el-gladiador/liquid-glass-react	React + WebGL2	共享 WebGL 上下文，适合 React 项目中的多层玻璃
deepika-builds/liquid-glass	JavaScript + SVG	中心清楚、边缘折射，普通 DOM 内容仍可交互
dpawlikowski/liquid-glass	CSS + SVG	不依赖 WebGL，也能组合折射和色差

这一步推翻了我最早的做法。不同引擎里的参数不能硬凑成一套。例如，一个项目里的 IOR 并不能直接换算成另一个项目的 refraction。原项目调好的默认值通常比随手改出来的数字更平衡。

我最后最喜欢的是 1 号的 WebGL 光学和 5 号的可读窗口。5 号 Demo 还有一套很特别的果冻拖动：窗口用 stiffness = 0.12 和 damping = 0.72 追赶鼠标，再根据速度沿移动方向拉长，最大形变约 8%。折射和拖动其实是两套机制，一个负责看起来像玻璃，一个负责动起来像有弹性。

把研究结果写成自己的 Skill

原项目解决的是效果，建站还需要一套选择规则。于是我把研究结果整理成 liquid-glass-webgl-jelly Skill，让以后修改页面时先判断组件职责，而不是看到一个框就加玻璃。

现在这套规则大致是：

可读窗口、搜索框和信息面板使用边缘位移方案，中心尽量保持清楚。
独立按钮和紧凑工具栏可以使用 WebGL，但不能在一页堆几十个 Canvas。
长文章、表格和重复列表不做强折射，阅读比材质展示重要。
玻璃后面必须有可辨认的壁纸、线条或网格，否则无法确认折射是否真的存在。
选中、按下和成功状态不能只靠折射，还要有文字、边框或圆点提示。
prefers-reduced-motion 和降低透明度设置必须有对应降级。

其中一条是被实际 Bug 逼出来的。早期 Demo 在玻璃导航条里又放了一层透明 WebGL 选中透镜。它没有填充色，却会重新折射下面的竹林背景。点击标签后，看起来不像胶囊移动，而像背景突然换了一块。后来我删除了第二层折射，只保留清晰的选中状态。

这个经验后来又用在网站分类卡上。外层窗口已经有真实折射，里面的卡片就不应该再套一层光学滤镜。内层只需要稳定的浅色衬底、细边框和很小的悬浮变化。玻璃叠玻璃不仅容易变脏，还会拖慢滚动。

把 Stack 改成现在的样子

网站没有直接照搬某个 Demo。我保留了 Stack 熟悉的三栏结构，然后逐项修改。

左栏删掉了多余介绍，只留下头像、标题、首页、归档、关于和暗色模式。中间仍然是普通文章流，整张文章卡都可以点击。右栏把多个搜索入口合并成一个苹果式搜索框，避免顶部按钮、侧栏输入框和导航菜单重复出现。

背景最终用了 Tahoe 亮色壁纸。原图是 6016 × 6016 的 PNG，直接放进网页会太大，所以压成了 2560 像素的 WebP。页面仍能看到足够的线条和色彩变化，文件却只剩几十 KB。

当前站点加载的主要光学方案是 SVG 位移滤镜。脚本会给头像区、导航、工具栏、搜索面板、文章卡和正文窗口初始化折射；不支持 SVG backdrop-filter 的浏览器使用磨砂降级。研究时准备的 WebGL 和果冻拖动代码还保留着，但这一版没有把它们同时铺满页面。滚动流畅比多几个 Shader 更重要。

页面样式前后改了很多次，比较明显的问题有：

整页套了暗色滤镜，导致亮壁纸变灰，文字也发闷。
搜索框沿用了暗色主题背景，变成一块纯黑矩形。
某些文字为了显得精致被缩得太小，在手机上很难看清。
卡片静止时完全透明，鼠标移上去才突然出现一大块底色。
移动端背景高度计算错误，页面底部出现黑色区域。
每次切页都重新加载全部效果，滚动和跳转显得卡。

这些问题没有靠一个“大改版”解决，而是对照截图逐个修。现在卡片的静止和悬浮状态是连续的，正文有稳定的对比度，手机端也不会再露出黑底。

发布到 Cloudflare Pages

本地写文章时先启动 Hugo：

hugo server -D

浏览器可以在本地立即看到修改。确认页面正常后，再生成用于发布的静态文件：

hugo --minify --cleanDestinationDir --destination .cloudflare-dist

最后用 Wrangler 上传到已有的 Pages 项目：

npx wrangler pages deploy .cloudflare-dist `
 --project-name huangqixuan-blog `
 --branch main

Cloudflare Pages 会生成一个版本地址，同时把生产版本更新到 huangqixuan-blog.pages.dev。项目目前绑定了 www.huangqixuan.com，Hugo 的 baseURL 也使用这个地址。

我的发布流程现在固定成了四步：写 Markdown，本地构建，视觉和功能检查，同步到 Cloudflare 后再确认生产部署状态。托管平台只保存生成后的网页，真正需要长期保存的仍然是 Markdown、模板、样式和脚本。

现在回头看

这个网站并不是先选好一套技术，然后一次搭成的。它从一个闲置域名开始，绕过免费空间、GitHub Pages、闲置电脑服务器和动态博客，最后才落到 Hugo 与 Cloudflare Pages。

液态玻璃也走了同样的弯路。先做出毛玻璃，再发现不对；下载原项目对比之后，又遇到玻璃叠加、背景突变、文字对比度和性能问题。最后留下来的不是一个夸张 Demo，而是一套知道什么时候该用、什么时候该停的规则。

这篇文章本身就是下一次测试。以后网站哪里改坏了，我可以回来看看当时为什么这样选，而不是重新从十几个标签页和聊天记录里找答案。

你好，欢迎来到我的博客

Wed, 26 Aug 2026 00:00:00 +0000

我想给自己留个能长期写东西的地方。以后遇到值得记下来的问题，就把过程和最后能用的办法放在这里，不再只丢进聊天记录或收藏夹。

这里会写什么

大多是软件怎么用、电脑出了问题怎么查，还有搭这个网站时踩过的坑。偶尔也会放一点我不想忘掉的东西。

📝 备注

现在还是个刚搭起来的空架子，内容会慢慢补。

一段示例代码

教程里可以直接放命令。比如查看网络配置：

ipconfig /all

搜索和分类已经能用。下一步是把真正遇到过的问题整理成文章。

建站笔记 on 黄启轩的博客