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

Thu, 27 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);

这几行 CSS 能做出毛玻璃，但不会改变背景像素的位置。玻璃下面的线条没有弯曲，边缘也没有凸透镜感，更像一张半透明塑料片。

后来我不再只看模糊程度，而是检查这些细节：

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

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

截图很容易骗人。我把六个公开项目下载到本地，保留各自的引擎和默认参数，再做了一页统一入口。对比对象如下：

项目	实现路线	我最后记住的特点
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。以后改页面时先看组件是做什么的，不再见到一个框就套一层玻璃。

这套 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。

液态玻璃也绕了不少路。我先做出毛玻璃，发现不对后又下载原项目比较，接着处理玻璃叠加、背景突变、文字对比度和性能问题。最后整理出了一套使用边界。

Hugo on 黄启轩的博客