Embedding CSS Animation Demos in Hugo Articles

Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式： 1. 内联 CSS demo（无需外部服务） # 直接在文章里跑一个旋转加载动画： 纯 CSS 旋转加载器 一个渐变色文字动画：

Why Hugo # When picking a framework for a personal blog, my top criterion was low maintenance cost — I didn’t want to abandon writing three months later because of npm dependency hell. Hugo is a single binary, requires no Node.js, builds thousands of posts in 1-2 seconds, and the Blowfish theme comes with dark mode, full-text search, multilingual support, RSS, Open Graph, and reading time estimates out of the box. Day-to-day writing only requires touching Markdown files.

为什么选 Hugo # 做个人博客选框架，我的第一标准是维护成本低——不想三个月后因为 npm 依赖地狱放弃写作。 Hugo 是单二进制文件，无需 Node.js，构建几千篇文章只需 1-2 秒，Blowfish 主题开箱就有暗色模式、全文搜索、多语言、RSS、Open Graph、阅读时间估算。日常写作只需碰 Markdown。 整体架构 # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ┌─────────────────────────────┐ │ DNS 分线路解析 │ │ (阿里云云解析 GeoDB) │ └──────┬──────────────┬────────┘ │ │ 国内访客 ▼ 国际访客 ▼ ┌──────────────────┐ ┌─────────────────┐ │ 阿里云 CDN │ │ Cloudflare Pages │ │ ↓ │ │ (免费，全球CDN) │ │ 阿里云 OSS │ └─────────────────┘ │ (静态托管) │ └──────────────────┘ ↑ GitHub Actions 自动构建 & 双栈推送 这套方案全年花费约 ¥212：