纯静态站点的构建实践

在框架层出不穷的今天，纯静态 HTML 页面似乎成了一种"复古"的选择。 但当你只需要一个简单的博客或文档站点时，原生技术栈往往是最可靠、最持久的方案。

为什么选择纯静态

• 零依赖：没有运行时框架，没有 node_modules，没有构建步骤。
• 极速加载：HTML 和 CSS 可以直接由浏览器解析，无需等待 JS hydrate。
• 长期稳定：HTML 和 CSS 是 Web 的基石，十年后依然能正常渲染。
• 部署简单：任何 Web 服务器都能托管，甚至可以放到对象存储上。

项目结构

一个简洁的静态博客通常只需要这样的结构：

site/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── posts/
    ├── index.html
    └── hello-world.html

CSS 架构

我倾向于使用 CSS 自定义属性（变量）来管理主题，配合简洁的 BEM-like 命名：

:root {
  --bg: #fafafa;
  --text: #1a1a1a;
  --accent: #2563eb;
  --max-width: 720px;
}

现代 CSS 已经支持嵌套、容器查询、层叠层（Cascade Layers）等特性， 对于小型项目来说，PostCSS 都不是必须的。

部署到 Caddy

Caddy 是静态站点托管的绝佳选择，默认支持 HTTPS：

tg.yufish.dev {
    root * /srv/www/tg-blog
    file_server
    encode gzip
    header Cache-Control "public, max-age=3600"
}

只需要一行 file_server，你的站点就能对外提供服务，且自动获得 HTTPS 证书。

文件结构优化建议

• 所有链接使用相对路径（./about.html、../css/style.css），便于迁移。
• CSS 和 JS 全部本地化，避免外部 CDN 依赖。
• 图片使用 WebP 格式，必要时提供 fallback。
• 利用 Caddy 的 encode gzip 自动压缩文本资源。

结语

纯静态站点不是银弹，但对于内容型网站（博客、文档、个人主页）， 它往往是最简单、最持久的选择。少即是多。