这个网站是怎么搭起来的

Sun, 13 Sep 2026 00:00:00 +0000

选型:静态站,越简单越省心

本站是纯静态站,技术栈:

不用数据库、不用后端、不用容器编排。文章就是 markdown 文件,构建产物就是一堆 HTML——十年后还能跑起来的那种站。

主题拿来后做了一轮整体改造:

1. 配色 把默认色板换成自定义的海洋蓝系:浅色主题用陶瓷白卡片配浅蓝底,暗色主题直接进「深海模式」(深蓝底 + 长春花蓝点缀)。

2. 背景 全站铺一张海底场景图,内容区做成半透明磨砂玻璃(backdrop-filter),滚动时背景若隐若现。

3. 图片 站里的鲸鱼娘插画和场景图都是自己生成的:人物走本地 ComfyUI 工作流(绿幕直出 + 抠像),背景走云 API,合成工序用脚本完成。

4. 动效 首页 hero 有气泡上升、头像浮动,卡片 hover 上浮。全部纯 CSS,不引第三方库。

日常更新流程被压缩成一个脚本:

.\发布.cmd # 双击也行,菜单选站点

背后做的三件事:

博客写完 → 双击 → 看到三个绿勾 → 上线。整个过程二十秒左右。

1. 中文字体 slug Hugo 默认拿标题当网址,中文标题会变成一串百分号编码。修法是给每篇文章显式写 slug。

2. 未来日期的文章不发布 给文章写了未来的日期,Hugo 会认为「还没到发布时间」而跳过它——页面直接 404,排查半天才反应过来。

3. 预览图缓存 改完图上传,浏览器还是显示旧图。换文件名(或加版本号)是最省事的解法。

4. 批量替换跨区块误伤 用脚本批量改 HTML 时,如果锚点文字在导航栏和页脚里都出现,一次替换会把两处都改掉。批量操作前先定位区块,别用「页面级通用锚点」。

整站从零到上线用了几天,顺手沉淀了一套工具链:一键发布脚本、批量出图流水线、抠像工具。如果你也想搭个类似的小站,欢迎来交流。

主站: wyr233.com · 看板娘鲸鱼娘在左栏等着跟你打招呼。