选型:静态站,越简单越省心
本站是纯静态站,技术栈:
- Hugo — 一个用 Go 写的静态网站生成器,几百篇文章构建只要几百毫秒
- Stack 主题 — 卡片式布局,结构清晰,改起来不费劲
- Nginx + HTTPS — 部署在自己的一台云服务器上,证书用 Let’s Encrypt 自动续期
不用数据库、不用后端、不用容器编排。文章就是 markdown 文件,构建产物就是一堆 HTML——十年后还能跑起来的那种站。
视觉:从零改出「海洋味」
主题拿来后做了一轮整体改造:
1. 配色 把默认色板换成自定义的海洋蓝系:浅色主题用陶瓷白卡片配浅蓝底,暗色主题直接进「深海模式」(深蓝底 + 长春花蓝点缀)。
2. 背景 全站铺一张海底场景图,内容区做成半透明磨砂玻璃(backdrop-filter),滚动时背景若隐若现。
3. 图片 站里的鲸鱼娘插画和场景图都是自己生成的:人物走本地 ComfyUI 工作流(绿幕直出 + 抠像),背景走云 API,合成工序用脚本完成。
4. 动效 首页 hero 有气泡上升、头像浮动,卡片 hover 上浮。全部纯 CSS,不引第三方库。
部署:一条命令的事
日常更新流程被压缩成一个脚本:
.\发布.cmd # 双击也行,菜单选站点
背后做的三件事:
hugo --minify构建静态文件scp上传到服务器对应目录- 用
curl验证线上返回 200,把结果打在屏幕上
博客写完 → 双击 → 看到三个绿勾 → 上线。整个过程二十秒左右。
踩过的坑(挑几个有意思的)
1. 中文字体 slug
Hugo 默认拿标题当网址,中文标题会变成一串百分号编码。修法是给每篇文章显式写 slug。
2. 未来日期的文章不发布 给文章写了未来的日期,Hugo 会认为「还没到发布时间」而跳过它——页面直接 404,排查半天才反应过来。
3. 预览图缓存 改完图上传,浏览器还是显示旧图。换文件名(或加版本号)是最省事的解法。
4. 批量替换跨区块误伤 用脚本批量改 HTML 时,如果锚点文字在导航栏和页脚里都出现,一次替换会把两处都改掉。批量操作前先定位区块,别用「页面级通用锚点」。
最后
整站从零到上线用了几天,顺手沉淀了一套工具链:一键发布脚本、批量出图流水线、抠像工具。如果你也想搭个类似的小站,欢迎来交流。
主站: wyr233.com · 看板娘鲸鱼娘在左栏等着跟你打招呼。