用 Hugo 和双栈 CDN 搭建个人网站

Mon, 04 May 2026 00:00:00 +0000

为什么选 Hugo
#

做个人博客选框架，我的第一标准是维护成本低——不想三个月后因为 npm 依赖地狱放弃写作。

Hugo 是单二进制文件，无需 Node.js，构建几千篇文章只需 1-2 秒，PaperMod 主题开箱就有暗色模式、全文搜索、RSS、Open Graph、阅读时间估算。日常写作只需碰 Markdown。

整体架构
#

                  ┌─────────────────────────────┐
                  │       DNS 分线路解析          │
                  │   (阿里云云解析 GeoDB)        │
                  └──────┬──────────────┬────────┘
                         │              │
              国内访客    ▼    国际访客  ▼
          ┌──────────────────┐  ┌─────────────────┐
          │  阿里云 CDN      │  │ Cloudflare Pages │
          │  ↓               │  │  (免费，全球CDN) │
          │  阿里云 OSS      │  └─────────────────┘
          │  (静态托管)      │
          └──────────────────┘
                  ↑
        GitHub Actions 自动构建 & 双栈推送

这套方案全年花费约 ¥206：

在 Hugo 文章里内嵌 CSS 动画 Demo

Mon, 04 May 2026 00:00:00 +0000

Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式：

1. 内联 CSS demo（无需外部服务）
#

直接在文章里跑一个旋转加载动画：

纯 CSS 旋转加载器

一个渐变色文字动画：

折腾记录 on 卓琪的开发笔记

用 Hugo 和双栈 CDN 搭建个人网站

为什么选 Hugo #

整体架构 #

在 Hugo 文章里内嵌 CSS 动画 Demo

1. 内联 CSS demo（无需外部服务） #

为什么选 Hugo
#

整体架构
#

1. 内联 CSS demo（无需外部服务）
#