如果你的网站内容不常变（博客、文档、官网、作品集），静态化是最优解：快、稳、便宜、几乎不可能被打垮。

这篇讲静态网站怎么部署到服务器、怎么配合对象存储和 CDN，以及几种常见静态生成器的用法。

静态站对服务器要求极低。财富云计算 的云服务器跑静态站绰绰有余；内网服务、测试环境可选 NAT 型（无独立公网 IP，价格比带独立 IP 机型省一半以上）。

一、什么时候该用静态网站

适合：

• 博客、个人主页
• 产品文档、技术文档
• 企业官网（内容更新不频繁）
• 作品集、简历页
• 活动落地页
• API 文档

不适合：

• 需要用户登录/评论/购物车
• 内容实时更新（新闻、论坛）
• 需要服务端渲染的复杂交互

折中方案：主要页面静态化，需要动态的部分（评论、搜索）用第三方服务（如 Giscus 评论、Algolia 搜索）。

静态站的优势：

二、常见静态站点生成器

选哪个：追求速度选 Hugo；写技术文档选 VitePress 或 Docusaurus；博客且喜欢中文主题选 Hexo。

三、以 Hugo 为例：从零到部署

1）安装 Hugo

# Ubuntu/Debian
apt install hugo -y
# 或从 GitHub 下载最新版（推荐）
wget https://github.com/gohugoio/hugo/releases/download/v0.128.0/hugo_extended_0.128.0_linux-amd64.tar.gz
tar -xzf hugo_extended_*.tar.gz
mv hugo /usr/local/bin/
hugo version

2）建站

hugo new site myblog
cd myblog

# 加主题（以 PaperMod 为例）
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
echo "theme = 'PaperMod'" >> hugo.toml

# 写文章
hugo new posts/hello.md

3）本地预览

hugo server -D --bind 0.0.0.0 --port 1313
# 访问 http://服务器IP:1313

4）生成静态文件

hugo --minify
# 输出到 ./public/

5）部署到服务器

把 public/ 目录内容放到 Nginx 的网站根目录：

rsync -avzP --delete public/ root@服务器:/var/www/blog/

或者直接在服务器上生成：

cd /opt/myblog
git pull
hugo --minify
rsync -a --delete public/ /var/www/blog/

自动化部署脚本 /opt/deploy.sh：

#!/bin/bash
cd /opt/myblog
git pull origin main
hugo --minify
rsync -a --delete public/ /var/www/blog/
echo "$(date) 部署完成" >> /var/log/deploy.log

四、Nginx 配置静态站

server {
    listen 80;
    server_name example.com www.example.com;

    root /var/www/blog;
    index index.html;

    # 静态资源缓存（静态站的核心优化）
    location ~* \.(css|js|woff2|woff|ttf)$ {
        expires 365d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    location ~* \.(jpg|jpeg|png|gif|webp|svg|ico)$ {
        expires 30d;
        add_header Cache-Control "public";
        access_log off;
    }

    # HTML 不缓存或短缓存（保证更新能生效）
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public, must-revalidate";
    }

    # 干净的 URL：/about/ → /about/index.html
    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    # 404 页面
    error_page 404 /404.html;

    # 安全
    location ~ /\. { deny all; }
}

nginx -t && systemctl reload nginx

五、CDN 加速

为什么要用 CDN

没有 CDN：全国用户 → 你的服务器（可能跨几千公里）
有 CDN：全国用户 → 最近的 CDN 节点 → （缓存未命中时才回源）

好处：

• 访问速度大幅提升（就近访问）
• 源站压力骤降（90%+ 请求由 CDN 承担）
• 节省带宽（大部分流量走 CDN）
• 隐藏源站 IP（抗攻击）
• 免费 HTTPS 证书（多数 CDN 提供）

接入流程

1. 在 CDN 服务商添加域名，回源地址填你的服务器 IP
2. 按提示修改 DNS 解析（通常是 CNAME）
3. 配置缓存规则
4. 配置 HTTPS 证书
5. 等待生效，验证

# 验证是否走了 CDN
curl -I https://example.com
# 看有没有 CDN 特有的响应头，如：
# X-Cache: HIT
# Via: ...
# Server: ...CDN 厂商标识...

dig example.com +short
# 应该返回 CDN 的 CNAME

缓存规则建议

关键：文件名带 hash（Hugo/Hexo 等生成器支持指纹），内容变了文件名就变，可以放心设长缓存。

CDN 配置要点

① 缓存策略：静态资源长缓存，HTML 短缓存或不缓存
② 开启 Gzip/Brotli 压缩
③ 开启 HTTP/2 或 HTTP/3
④ 配置 HTTPS（用 CDN 提供的免费证书或上传自己的）
⑤ 开启防盗链（Referer 校验）
⑥ 配置访问控制（频率限制防 CC）
⑦ 设置回源超时和缓存刷新方式

更新内容后要刷新 CDN 缓存：

• 在 CDN 控制台手动刷新（刷新 URL 或目录）
• 或用 API 自动刷新（配合部署脚本）
• 或使用带 hash 的文件名自动规避

部署脚本里自动刷新 CDN（以某云 API 为例）：

#!/bin/bash
# 部署后刷新 CDN
curl -X POST "https://cdn.api/RefreshObjects" \
  -H "Content-Type: application/json" \
  -d '{"Paths":["https://example.com/"]}'

六、对象存储 + 静态托管（更省）

如果站点是纯静态，可以完全不需要服务器：

本地生成 → 上传到对象存储 → 开启静态网站托管 → 绑定域名

优势：

• 费用极低（按存储和流量计费，几块钱一个月）
• 无需运维服务器
• 天然高并发、高可用
• 不怕被打（对象存储扛得住）

做法：

# 安装 rclone
curl https://rclone.org/install.sh | bash
rclone config          # 配置对象存储

# 同步
rclone sync --delete public/ remote:mybucket/

或者用各厂商的 CLI 工具（ossutil、coscli、s3cmd）。

部署脚本：

#!/bin/bash
cd /opt/myblog
git pull
hugo --minify
rclone sync --delete public/ remote:mybucket/
echo "$(date) 已同步到对象存储" >> /var/log/deploy.log

七、GitHub Pages / 托管平台（零成本）

不想买服务器的话：

GitHub Actions 自动部署示例：

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: '0.128.0'
      - name: Build
        run: hugo --minify
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

八、性能优化清单

静态站也要优化：

• [ ] 开启 Gzip / Brotli
• [ ] 图片压缩并转 WebP
• [ ] 文件名带 hash，配长缓存头
• [ ] 使用 HTTP/2
• [ ] 字体子集化（中文字体很大）
• [ ] 懒加载图片（loading="lazy"）
• [ ] 内联关键 CSS
• [ ] 减少第三方脚本
• [ ] 接入 CDN
• [ ] 开启 HTTPS

Nginx 开启 Brotli（比 Gzip 压缩率更高）：

# 需要编译模块，Ubuntu 可装
apt install libnginx-mod-brotli -y

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript
             application/xml text/xml image/svg+xml;

九、动态功能怎么加

静态站也能有评论、搜索：

配合 Git 提交自动构建：

1. 用 Headless CMS 写内容
2. Webhook 触发 CI
3. 自动构建并部署

十、常见问题

十一、方案对比与选择

推荐组合：

• 个人博客：Hugo + 对象存储/CDN
• 企业官网：静态生成 + CDN
• 技术文档：VitePress + GitHub Pages 或对象存储
• 需要动态功能：Typecho（见《用云服务器搭建 Typecho 博客》）

静态站对服务器配置要求极低，一台低配云服务器就能跑很多个站。财富云计算 提供多种规格，NAT 型（无独立公网 IP，价格比带独立 IP 机型省一半以上）很适合做源站或内网文档站，配合 CDN 对外提供服务，成本低、体验好。

相关阅读：

• 《Nginx 安装与配置入门》
• 《域名解析与 DNS 记录详解》
• 《网站打开慢的排查流程》
• 《用云服务器搭建 Typecho 博客》

延伸阅读

1. 网站环境怎么选：LNMP 手动 / 宝塔面板 / Docker / 云开发
2. 问卷表单系统搭建：SurveyKing / Formbricks，数据自己收
3. 图床搭建：Lsky Pro / Lychee，自托管图片托管方案
4. 邮件列表搭建：listmonk 自托管 Newsletter，把读者握在自己手里
5. 文档站点搭建：MkDocs / VuePress / Docsify，产品文档与技术手册方案
6. RSS 阅读器搭建：FreshRSS 自托管，把信息流拿回自己手里
7. 短链接服务搭建：Shlink 自托管，链接数据自己掌握
8. 网站状态监控页搭建：Uptime Kuma，服务器挂了第一时间知道

更多阅读

1. 上一篇：网站被 CC 攻击怎么办：识别、缓解、防御的完整流程
2. 下一篇：网站迁移完整流程：换服务器不丢数据、不掉 SEO