Fantetic Blog

静态博客流量分流,让站点打开速度快到飞起

阿里云 是国内TOP1云厂商,CloudFlare 是一个非常优秀的CDN服务商。那么如何将这两种优秀的资源利用起来,让站点速度达到最快,国内国外访问都很丝滑呢?

该篇文章通过与AI对话总结整理,经我验证可行,国内国外分流,国内走 OSS 、国外走 CloudFlare Pages ,丝滑流畅。

注意: 只要阿里云 CDN 加速区域包含中国内地,域名需要 ICP 备案 ! 没有备案的老老实实走 CloudFlare 优选IP 方案!此方案可以不用往下看了。

方案如下:

最终目标:

你自己的域名.com
        ↓ 301/302 跳转
blog.你自己的域名.com
        ↓ 阿里云 DNS 智能解析
        ├─ 中国内地 → 阿里云 CDN → OSS
        └─ 境外 / 默认 → Cloudflare Pages

这样做的好处是:你自己的域名.com 只作为入口和品牌域名,真正博客站点放在 blog.你自己的域名.com;这样做是因为 Cloudflare Pages 的根域名接入要求较多,但子域名可以在外部 DNS 服务商添加 CNAME 到 Pages,不必把整个域名 NS 转到 Cloudflare。(Cloudflare Docs)


0. 要准备的东西

先假设:

主域名:你自己的域名.com
博客域名:blog.你自己的域名.com

Cloudflare Pages 默认域名:
你的项目.pages.dev

OSS Bucket:
henniubi-blog

OSS 地域:
cn-hangzhou,华东 1 杭州

阿里云 CDN 国内 CNAME:
blog.你自己的域名.com.w.kunlunca.com

后面所有地方按自己的实际值替换。

还有一个前提:只要阿里云 CDN 加速区域包含中国内地,域名需要 ICP 备案。阿里云 CDN 文档说明,加速区域为“仅中国内地”或“全球”时,加速域名必须备案。(阿里云帮助中心)


1. Cloudflare Pages 添加 blog.你自己的域名.com

进入 Cloudflare:

Workers & Pages
→ 你的 Pages 项目
→ Custom domains
→ Set up a custom domain

添加:

blog.你自己的域名.com

不要添加:

你自己的域名.com

因为根域名接入 Pages 会要求把 nameserver 指向 Cloudflare;子域名则可以继续使用阿里云 DNS,只要在阿里云 DNS 里添加 CNAME 到你的 Pages 域名即可。(Cloudflare Docs)

Cloudflare 会提示你配置类似:

blog CNAME 你的项目.pages.dev

先记住这个 Pages 域名,例如:

henniubi.pages.dev

先不要急着做国内分流,第一步先让 Cloudflare Pages 的自定义域名能激活。


2. 阿里云 DNS 先临时配置 blog 到 Cloudflare Pages

进入:

阿里云 DNS
→ 权威域名
→ 你自己的域名.com
→ 解析设置
→ 添加记录

先添加一条默认线路:

主机记录:blog
记录类型:CNAME
解析线路:默认
记录值:你的项目.pages.dev
TTL:默认

例如:

blog CNAME henniubi.pages.dev

这样 Cloudflare 能检测到 blog.你自己的域名.com 指向 Pages。Cloudflare 官方也说明,手动添加 CNAME 之前,必须先在 Pages 项目里走 “Add custom domain” 流程,否则可能解析异常。(Cloudflare Docs)

等 Cloudflare Pages 里 blog.你自己的域名.com 状态变成:

Active

再继续下一步。


3. 创建 OSS Bucket

进入阿里云 OSS:

OSS 控制台
→ Bucket 列表
→ 创建 Bucket

建议配置:

Bucket 名称:henniubi-blog
地域:华东 1 杭州 cn-hangzhou
存储类型:标准存储
读写权限:先保持私有,后面按静态网站要求调整
版本控制:可不开

OSS 静态网站托管支持直接托管 HTML、CSS、JavaScript 等静态文件,适合 Astro 博客。(AlibabaCloud)


4. 开启 OSS 静态网站托管

进入 Bucket:

henniubi-blog
→ 数据管理
→ 静态页面
→ 设置

Astro 是静态博客,也就是构建后有很多:

/index.html
/about/index.html
/posts/xxx/index.html

建议配置:

默认首页:index.html
子目录首页:开启
子目录 404 规则:Redirect 或 Index
默认 404 页面:404.html
错误页面状态码:404

阿里云 OSS 静态网站托管文档中,默认首页建议设置为 index.html,复杂站点可开启子目录首页,让 /blog//docs/ 这类路径返回各自目录下的 index.html。(AlibabaCloud)

如果你的 Astro 实际是 SPA 模式,刷新任何路由都需要回到首页,那才用:

默认 404 页面:index.html
错误页面状态码:200

但博客站一般不建议这么做,因为文章不存在时应该返回 404。OSS 文档也把 404 → index.html → 200 作为 SPA 刷新路由的特殊配置。(AlibabaCloud)


5. 设置 OSS 公开访问

静态博客里的文件本来就是公开资源,所以 OSS Bucket 需要能被 CDN 读取。

进入:

Bucket
→ 权限控制
→ 阻止公共访问

关闭阻止公共访问。

然后:

Bucket
→ 权限控制
→ ACL

设置:

公共读

阿里云文档说明,静态网站托管需要让 HTML、CSS、JavaScript 等公开资源可被用户访问,同时提醒不要把敏感数据放在公共读 Bucket 中。(AlibabaCloud)


6. 创建阿里云 CDN:blog.你自己的域名.com

进入:

阿里云 CDN
→ 域名管理
→ 添加域名

填写:

加速域名:blog.你自己的域名.com
业务类型:图片小文件 / 静态内容
加速区域:仅中国内地
源站类型:OSS 域名
源站:henniubi-blog.oss-cn-hangzhou.aliyuncs.com

阿里云 OSS 官方文档说明,可以用 CDN 加速 OSS 静态资源,提升访问速度、降低延迟和回源压力;CDN 添加完成后会分配一个 CNAME,需要在 DNS 中指向它。(AlibabaCloud)

CDN 创建完成后,阿里云会给你类似:

blog.你自己的域名.com.w.kunlunca.com

记下来。


7. CDN 配置 HTTPS

进入:

阿里云 CDN
→ blog.你自己的域名.com
→ HTTPS 配置

开启 HTTPS,上传或申请证书:

证书域名:blog.你自己的域名.com

建议开启:

HTTP → HTTPS 强制跳转
TLS 1.2 / TLS 1.3

阿里云 CDN 的 HTTPS 回源和证书配置需要保证源站和证书正确,否则 CDN 回源可能出现 5xx。(AlibabaCloud)


8. CDN 缓存规则

进入:

阿里云 CDN
→ blog.你自己的域名.com
→ 缓存配置
→ 资源过期时间

建议:

/                         60 秒
*.html                    60 秒
/404.html                 60 秒

/assets/*                 30 天
*.js                      30 天
*.css                     30 天
*.png                     30 天
*.jpg                     30 天
*.jpeg                    30 天
*.webp                    30 天
*.svg                     30 天
*.ico                     30 天
*.woff2                   30 天

Astro 构建出来的 JS、CSS 通常带 hash,例如:

index.Bx91sd.js
style.a81Hd.css

这类文件可以长缓存。HTML 短缓存,文章更新后国内用户不用等太久。

注意: 最好设置 流量限制别怪我没提醒啊,别被人恶意刷爆了!


9. 阿里云 DNS 配置国内外分流

现在修改 blog.你自己的域名.com 的 DNS。

进入:

阿里云 DNS
→ 你自己的域名.com
→ 解析设置

保留 / 修改成下面三条。

9.1 中国内地线路

主机记录:blog
记录类型:CNAME
解析线路:中国内地
记录值:blog.你自己的域名.com.w.kunlunca.com
TTL:600

9.2 境外线路

主机记录:blog
记录类型:CNAME
解析线路:境外
记录值:你的项目.pages.dev
TTL:600

例如:

blog CNAME henniubi.pages.dev

9.3 默认线路

主机记录:blog
记录类型:CNAME
解析线路:默认
记录值:你的项目.pages.dev
TTL:600

阿里云智能解析会根据 DNS 查询来源返回不同结果,文档示例中,中国内地来源会解析到中国内地地址,境外来源会解析到境外地址;同时阿里云建议必须保留默认线路,防止未命中具体线路时解析失败。(AlibabaCloud)

最终效果:

国内用户:
blog.你自己的域名.com
→ 阿里云 CDN
→ OSS

国外用户:
blog.你自己的域名.com
→ Cloudflare Pages

10. 配置 你自己的域名.com 跳转

现在希望:

https://你自己的域名.com

都跳到:

https://blog.你自己的域名.com

DNS 的 URL 转发虽然简单,但阿里云文档说明 URL 转发源域名只支持 HTTP,不支持 HTTPS;要做 HTTPS 跳转,建议用 CDN 或自己搭 Nginx。(AlibabaCloud)

所以推荐用 阿里云 CDN 边缘 301 跳转


10.1 添加 CDN 域名:你自己的域名.com

进入:

阿里云 CDN
→ 添加域名

添加:

加速域名:你自己的域名.com
业务类型:图片小文件 / 静态内容
加速区域:全球 或 仅中国内地
源站:可以先用同一个 OSS Bucket

如果希望全球用户访问根域名也能快速跳转,选:

全球

如果只关心国内入口,选:

仅中国内地

注意:加速区域包含中国内地时仍然要求备案。(阿里云帮助中心)

然后给 你自己的域名.com 配置 HTTPS 证书。


10.2 配置 CDN 301 跳转规则

进入:

缓存配置 → 访问 URL 改写

或:

规则引擎 → 创建规则

阿里云文档里也说明:如果要做按路径、按域名跳转到其他网站,需要用“重写访问 URL / 访问 URL 改写”,并结合规则引擎设置匹配条件;普通“HTTP 强制跳转 HTTPS”只负责 http → https,不是跳到另一个域名。(阿里云帮助中心)

现在要实现的是:

https://你自己的域名.com/*
301/302
https://blog.你自己的域名.com/*
在控制台里优先找这个入口

进入:

阿里云 CDN
→ 域名管理
→ 你自己的域名.com
→ 缓存配置
→ 访问 URL 改写

然后添加规则。

如果是新版界面,可能叫:

访问 URL 改写
URI 重写
URL 重写与重定向
重写访问 URL

核心不是名字,而是看它有没有这些字段:

待改写 URI
目标 URI
执行规则:Redirect / enhance_redirect / Break

阿里云官方文档里提到,Redirectenhance_redirect 是通过 302 跳转实现 URL 改写,并支持跳转到其他域名或其他协议。(阿里云帮助中心)

如果看到的是“访问 URL 改写”

按这个填:

待改写 URI:
^/(.*)$

目标 URI:
https://blog.你自己的域名.com/$1

执行规则:
Redirect

如果它要求写成完整路径,可以试:

待改写 URI:
/(.*)

目标 URI:
https://blog.你自己的域名.com/$1

如果它不支持 $1,就先简单跳首页:

待改写 URI:
/*

目标 URI:
https://blog.你自己的域名.com/

执行规则:
Redirect

这样至少能实现:

https://你自己的域名.com

https://blog.你自己的域名.com/

只是不能保留原路径。

如果控制台只能 302,不能 301

这个也正常。

阿里云“访问 URL 改写”里的 Redirect 很多场景是 302,不一定能选 301。文档也明确说 Redirectenhance_redirect 采用 302 跳转。(阿里云帮助中心)

如果你只是为了用户访问跳转:

302 也能用

如果为了 SEO,把 你自己的域名.com 权重长期转到 blog.你自己的域名.com,那更推荐用支持 301 的方式,例如:

阿里云 ESA / DCDN 规则
Nginx
Cloudflare Redirect Rules
静态跳转页 + meta refresh 不推荐

不过当前目标是访问入口跳转,先用 CDN 的 302 也可以。


10.3 根域名 DNS

阿里云 CDN 会给:

你自己的域名.com

分别分配 CNAME。

例如:

你自己的域名.com.w.kunlunca.com

DNS 配置:

根域名 @

优先用 ALIAS:

主机记录:@
记录类型:ALIAS
解析线路:默认
记录值:你自己的域名.com.w.kunlunca.com
TTL:600

阿里云 DNS 文档说明,ALIAS 类似 CNAME,但可以和根域名上的其他记录共存,适合解决根域名 CNAME 与 MX、TXT 等记录冲突的问题。(AlibabaCloud)

但是 ALIAS 居然收费了,那还是用会 CNAME 吧


11. GitHub Actions 自动上传 OSS

你的 Cloudflare Pages 已经自动部署,现在只补 OSS 上传。

在仓库中创建:

.github/workflows/deploy-oss.yml

如果你项目使用 npm,内容用这个:

name: Deploy to Aliyun OSS

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  contents: read

concurrency:
  group: deploy-oss-production
  cancel-in-progress: true

env:
  NODE_VERSION: "22"
  OSS_BUCKET: "henniubi-blog"
  OSS_REGION: "cn-hangzhou"
  OSS_ENDPOINT: "oss-cn-hangzhou.aliyuncs.com"

jobs:
  deploy:
    name: Build and upload to OSS
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build website
        run: npm run build

      - name: Check dist
        run: |
          test -f dist/index.html || {
            echo "dist/index.html 不存在,请检查 Astro 构建输出目录"
            exit 1
          }

      - name: Install ossutil
        run: |
          curl -fsSLO https://gosspublic.alicdn.com/ossutil/v2/2.3.0/ossutil-2.3.0-linux-amd64.zip
          unzip -q ossutil-2.3.0-linux-amd64.zip
          sudo install -m 755 ossutil-2.3.0-linux-amd64/ossutil /usr/local/bin/ossutil
          ossutil version

      - name: Upload dist to OSS
        env:
          OSS_ACCESS_KEY_ID: ${{ secrets.ALIYUN_OSS_ACCESS_KEY_ID }}
          OSS_ACCESS_KEY_SECRET: ${{ secrets.ALIYUN_OSS_ACCESS_KEY_SECRET }}
          OSS_REGION: ${{ env.OSS_REGION }}
          OSS_ENDPOINT: ${{ env.OSS_ENDPOINT }}
        run: |
          ossutil sync ./dist/ oss://${OSS_BUCKET}/ --delete --force

ossutil 支持通过环境变量读取 AccessKey 等配置,官方文档说明环境变量优先级高于配置文件,低于命令行参数。(阿里云帮助中心)

如果你用 pnpm,把 Node 依赖安装部分改成:

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: pnpm

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build website
        run: pnpm build

12. GitHub Secrets 配置

进入 GitHub 仓库:

Settings
→ Secrets and variables
→ Actions
→ New repository secret

添加:

ALIYUN_OSS_ACCESS_KEY_ID
ALIYUN_OSS_ACCESS_KEY_SECRET

不要用阿里云主账号 AccessKey。

建议创建一个 RAM 用户,只给 OSS 上传权限。

RAM 策略示例:

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "oss:ListObjects",
        "oss:GetObject",
        "oss:PutObject",
        "oss:DeleteObject"
      ],
      "Resource": [
        "acs:oss:*:*:henniubi-blog",
        "acs:oss:*:*:henniubi-blog/*"
      ]
    }
  ]
}

如果你后面要在 GitHub Actions 里自动刷新 CDN,再额外给这个 RAM 用户加:

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "cdn:RefreshObjectCaches"
      ],
      "Resource": "*"
    }
  ]
}

阿里云 CDN 提供 RefreshObjectCaches 接口用于刷新 CDN 缓存,刷新后对应资源在 CDN 节点上失效,下次访问会重新回源。(AlibabaCloud)


13. 是否要自动刷新 CDN?

刚开始不建议做复杂。

你已经把 HTML 缓存设置成:

60 秒

所以发布后最多等一分钟,国内就会更新。

如果你非要发布后立即刷新,可以后面再加 CDN 刷新步骤。前期先保持简单:

GitHub push
→ Cloudflare Pages 自动部署
→ GitHub Actions 上传 OSS
→ 国内 CDN 最多 60 秒更新

14. Astro 配置建议

因为最终博客地址变成:

https://blog.你自己的域名.com

建议检查 astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://blog.你自己的域名.com'
});

这样 sitemap、canonical、OG 链接会统一到 blog.你自己的域名.com

如果你坚持 SEO 主域名还是 你自己的域名.com,那就不建议跳到 blog.你自己的域名.com,因为 canonical 和真实访问域名会不一致。你现在这个方案里,应该把正式博客域名认定为:

blog.你自己的域名.com

你自己的域名.com 只是入口跳转。


15. 最终 DNS 记录总表

blog.你自己的域名.com

主机记录类型线路
blogCNAME中国内地blog.你自己的域名.com.w.kunlunca.com
blogCNAME境外你的项目.pages.dev
blogCNAME默认你的项目.pages.dev

你自己的域名.com

主机记录类型线路
@ALIAS默认你自己的域名.com.w.kunlunca.com

16. 验证方式

验证海外解析

用:

nslookup blog.你自己的域名.com 1.1.1.1

期望看到:

你的项目.pages.dev

验证国内解析

用:

nslookup blog.你自己的域名.com 223.5.5.5

期望看到:

blog.你自己的域名.com.w.kunlunca.com

验证跳转

curl -I https://你自己的域名.com

期望:

HTTP/2 301
location: https://blog.你自己的域名.com/

验证博客

curl -I https://blog.你自己的域名.com

期望:

HTTP/2 200

17. 常见问题处理

Cloudflare Pages 自定义域名一直 pending

先检查阿里云 DNS 里是否有:

blog CNAME 你的项目.pages.dev

而且至少默认线路要指向 Cloudflare Pages。

阿里云 CDN 显示 CNAME 未配置

如果你只给中国内地线路配置了 CDN CNAME,阿里云 CDN 控制台可能检测不到完整默认解析。阿里云 CDN 文档说明,分区域 DNS 只在某些区域配置 CDN CNAME 时,控制台可能显示“待配置”,但不一定影响实际加速服务。(阿里云帮助中心)

实际以这个验证为准:

nslookup blog.你自己的域名.com 223.5.5.5

只要返回阿里云 CDN CNAME,就说明国内线路生效。

OSS 访问 HTML 变成下载

说明你可能直接用 Bucket 域名访问,或者静态网站托管 / 自定义域名没配好。OSS 文档说明,为了让 HTML 作为网页展示,应该绑定自定义域名并使用静态网站托管。(AlibabaCloud)

国内访问 404

检查:

1. OSS 里是否真的有 index.html
2. GitHub Actions 是否上传到了 Bucket 根目录
3. OSS 静态网站托管是否开启
4. 子目录首页是否开启
5. CDN 源站是否指向正确 OSS Bucket

国内更新慢

先确认 CDN 缓存:

*.html 60 秒
/assets/* 30 天

如果 HTML 缓存设成 1 天,文章更新就会慢。


18. 最终发布流程

以后只需要:

git add .
git commit -m "update blog"
git push origin main

然后自动发生:

Cloudflare Pages:
自动构建 → 海外更新

GitHub Actions:
自动构建 → 上传 dist 到 OSS → 国内更新

阿里云 CDN:
国内用户访问缓存,没有缓存则回源 OSS

最终访问链路:

国内用户:
你自己的域名.com
→ 301
→ blog.你自己的域名.com
→ 阿里云 DNS 中国内地线路
→ 阿里云 CDN
→ OSS

国外用户:
你自己的域名.com
→ 301
→ blog.你自己的域名.com
→ 阿里云 DNS 境外 / 默认线路
→ Cloudflare Pages

你的最终方案是:

henniubi.com / www.henniubi.com
        ↓ 跳转
blog.henniubi.com
        ↓ 阿里云 DNS 智能解析
        ├─ 国内 → 阿里云 CDN → OSS
        └─ 国外 → Cloudflare Pages

这个方案整体是比较合理的,尤其适合你的 Astro 静态博客。


这个方案的优点

1. 国内访问速度会比 Cloudflare 稳很多

国内用户不再访问 Cloudflare,实际是:

国内用户 → 阿里云 CDN 国内节点 → OSS

这条链路基本都在国内,延迟、稳定性、首屏速度都会比“阿里云 CDN 回源 Cloudflare Worker / Pages”好很多。阿里云 CDN 主要按 CDN 边缘节点下行流量计费,CDN 未命中时才回源 OSS;官方说明 CDN 回源流量不计入 CDN 计费,但 OSS 源站可能单独产生出方向流量费用。(阿里云帮助中心)

2. 国外访问继续享受 Cloudflare Pages

国外用户访问:

blog.henniubi.com → Cloudflare Pages

Cloudflare Pages 免费版对个人静态博客很够用:免费版每月 500 次构建、每个项目 100 个自定义域名、单站点最多 20,000 个文件、单文件最大 25MiB。(Cloudflare Docs)

构建日志里现在大约:

1668 个文件
48.473 MiB

这个规模距离 Cloudflare Pages 免费版限制还很远,一般的静态博客站点完全足够使用了。

3. 不需要服务器

不用买 ECS,不用维护 Nginx,不用担心服务器系统更新、攻击、宕机。

整个系统是:

GitHub → Cloudflare Pages
GitHub Actions → OSS
OSS → CDN

纯静态部署,维护成本很低。

4. 成本可控

OSS 标准存储本身很便宜。阿里云文档示例里,标准型本地冗余存储单价为 0.12 元/GB/月。(阿里云帮助中心)

现在构建产物大约 48MiB,就算放大到 500MiB,OSS 存储费也几乎可以忽略。

5. 发布流程自动化

以后只需要:

git push

然后自动:

Cloudflare Pages 更新海外站
GitHub Actions 上传 OSS 更新国内站

整个部署流程完全自动化,不需要你自己操心。


这个方案的缺点

1. DNS 分流不是 100% 精准

阿里云 DNS 智能解析是根据 DNS 查询来源判断线路。大多数国内用户会走国内线路,但如果国内用户使用了国外公共 DNS、代理 DNS、DoH,可能会被解析到 Cloudflare Pages。

也就是说,分流大致是:

大多数国内用户 → OSS/CDN
大多数国外用户 → Cloudflare

但不是绝对精准。阿里云也说明,不同版本 DNS 支持的解析线路能力不同,智能解析调度不准时需要结合具体线路和版本排查。(阿里云帮助中心)

2. 你要维护两份部署

虽然源码是一份,但部署产物有两套:

Cloudflare Pages 一份
OSS 一份

如果 GitHub Actions 失败,国内站可能还是旧版本;如果 Cloudflare Pages 构建失败,国外站可能还是旧版本。

3. 你自己的域名.com 不是最终博客地址

现在方案是:

你自己的域名.com → blog.你自己的域名.com

从技术上没问题,但 SEO 上最好把正式 canonical 域名统一成:

https://blog.你自己的域名.com

也就是说,Astro 配置里建议:

export default defineConfig({
  site: 'https://blog.你自己的域名.com'
});

否则搜索引擎可能看到 你自己的域名.comblog.你自己的域名.com 两套入口,虽然 301/302 能缓解,但长期最好统一。

4. HTTPS 证书要配两处

至少要维护:

blog.你自己的域名.com       阿里云 CDN 证书
你自己的域名.com            跳转 CDN 证书

Cloudflare Pages 侧也会给 blog.henniubi.com 自动签证书。也就是说,同一个 blog.henniubi.com 国内和国外实际上由不同平台处理 HTTPS。

5. 阿里云 CDN 费用有被刷风险

如果有人恶意刷你国内 CDN 流量,费用可能上升。阿里云 CDN 基础服务一般按下行流量或带宽峰值计费,默认通常是按流量计费。(阿里云帮助中心)

所以一定要做:

阿里云费用预警
CDN 带宽/流量监控
OSS 防盗链
CDN Referer 防盗链
必要时限制大文件

可能产生的费用

本方案,主要费用来自这些地方。


1. OSS 标准存储费

这个非常低。

阿里云文档示例:

标准型本地冗余:0.12 元 / GB / 月

按现在构建产物:

48.473 MiB ≈ 0.047 GB

估算:

0.047 × 0.12 ≈ 0.0056 元 / 月

也就是几乎可以忽略。

即使以后博客变大:

OSS 文件大小估算存储费
500 MiB约 0.06 元/月
1 GB约 0.12 元/月
5 GB约 0.60 元/月
10 GB约 1.20 元/月

所以 OSS 存储本身不是重点。


2. OSS 请求费用

GitHub Actions 上传时会产生 PutObject、ListObjects 等请求;CDN 回源 OSS 时会产生 GetObject/ListObject 类请求。阿里云说明,对 OSS 的访问和管理操作,无论是 API、SDK、控制台还是 ossutil,本质上都是 OSS API 请求,可能产生请求费用。(阿里云帮助中心)

现在一次构建约 1668 个文件,上传时会有几千次请求。个人博客每天发几次文章,这部分也基本可以忽略。

真正要注意的是:如果 CDN 命中率很低,用户大量请求都打到 OSS,OSS 请求数和回源流量才会上来。


3. OSS 回源流量费

国内用户访问的是:

用户 → CDN → OSS

当 CDN 没缓存时,它会去 OSS 拉文件。阿里云说明,CDN 配合 OSS 使用时,客户端访问 CDN 会产生 CDN 流出流量;如果 CDN 节点无缓存需要回源 OSS,还会产生 OSS 的流出流量,两者由两个产品分别计费。(阿里云帮助中心)

但是只要缓存配置合理:

/assets/* 30 天
*.js / *.css / 图片 / 字体 30 天
*.html 60 秒

回源比例会比较低。

阿里云也提到,如果 CDN 字节命中率和请求命中率都是 90%,只有约 10% 的流量和请求需要回源 OSS。(阿里云帮助中心)


4. 阿里云 CDN 下行流量费

这是国内侧最主要的费用。

阿里云 CDN 文档说明,CDN 基础服务费是必选项,按流量计费、按带宽峰值计费、月结 95 带宽峰值计费三选一;下行流量指用户从 CDN 边缘节点下载数据产生的流量。(阿里云帮助中心)

中国内地按流量计费的公开示例里,0GB~10TB 阶梯单价约为:

0.24 元 / GB

阿里云文档示例里也用 10 TB × 约 0.24 元/GB ≈ 2457.6 元 来计算中国内地 10TB 流量按量费用。(阿里云帮助中心)

按个人博客估算:

国内 CDN 月流量估算费用
1 GB约 0.24 元
10 GB约 2.4 元
50 GB约 12 元
100 GB约 24 元
500 GB约 120 元
1 TB约 245 元

博客如果只是文章 + 少量图片,通常前期可能就是:

几毛钱 ~ 几块钱/月

如果开始放大量图片、视频、安装包下载,费用就会明显上涨。


5. CDN HTTPS 请求数费用

这个也要注意,但一般前期不会很高。

阿里云 CDN 开启 HTTPS 后,会按静态 HTTPS 请求数单独计费。官方文档说明:从 2024 年 2 月 1 日起,静态 HTTPS 请求数每月前 500 万次免费,超过后按每万次 0.05 元计费;而且 CDN 下行流量包不能抵扣 HTTPS 请求费用。(阿里云帮助中心)

对个人博客来说,500 万次/月基本够用。

举例:

每个页面加载 30 个资源
每天 1000 PV
每月请求数 ≈ 30 × 1000 × 30 = 90 万次

还在免费额度内。

如果你的页面资源很多,例如头像、图标、图片、字体、小 JS 文件很多,请求数会变高。


6. 阿里云 DNS 费用

如果你继续用免费版阿里云 DNS,理论上可以不额外花钱。

但阿里云公网权威解析有免费版和付费版。官方说明免费版更偏测试开发,生产环境建议升级付费版;付费版个人版价格为 48 元/个域名/年,企业旗舰版为 568 元/个域名/年 起,不同版本支持 SLA、智能解析、安全防护、技术支持等能力。(阿里云帮助中心)

你的个人站点可以先用免费版。如果以后你非常重视稳定性,再考虑:

个人版 DNS:48 元/年

7. Cloudflare Pages 费用

你当前用 Cloudflare Pages 免费版基本够。

免费版限制主要是:

500 builds / 月
1 个并发构建
100 个自定义域名 / 项目
20,000 文件 / 站点
25 MiB 单文件大小

这些限制官方文档都有列出。(Cloudflare Docs)

站点现在 1668 个文件、48MiB 总量,完全没问题。

需要付费的情况一般是:

每月构建超过 500 次
单站文件超过 20,000 个
需要更多并发构建
需要更高团队协作/高级功能
使用 Pages Functions 且请求量很高

纯静态 Astro 博客基本不用付费。


8. GitHub Actions 费用

如果你的 GitHub 仓库是公开仓库,标准 GitHub-hosted runner 的 Actions 使用是免费的;如果是私有仓库,就看账号套餐给的免费分钟和存储额度。GitHub 官方说明,public repositories 使用标准 GitHub-hosted runners 免费,private repositories 则按账号套餐享有一定免费额度。(GitHub Docs)

你的 OSS 上传 workflow 一次可能几分钟,个人博客即使每天部署几次,也很难超出免费额度。


一个实际费用估算

按博客当前规模:

构建产物:约 50 MiB
国内月访问流量:10 GB
CDN 命中率:90%
HTTPS 请求:100 万次以内
Cloudflare Pages:免费版
GitHub Actions:公开仓库

大概费用:

项目估算
OSS 存储< 0.01 元/月
OSS 请求基本忽略
OSS 回源流量很低
阿里云 CDN 下行流量 10GB约 2.4 元/月
CDN HTTPS 请求500 万次内免费
Cloudflare Pages0 元
GitHub Actions公开仓库 0 元
阿里云 DNS免费版 0 元

所以前期正常情况可能就是:

约 1 ~ 5 元/月

如果国内流量到 100GB/月,大概:

20 ~ 30 元/月

如果图片很多,月流量 500GB:

100 ~ 150 元/月

最容易踩坑的费用点

1. 图片太大

博客最贵的不是 HTML,而是图片。

建议:

图片转 WebP / AVIF
文章封面压缩到 100KB ~ 300KB
不要上传原图
不要把视频放 OSS/CDN

2. CDN 缓存设置太短

如果把所有文件都设置成:

不缓存

那每次访问都会回源 OSS,OSS 回源流量和请求都会增加。

建议:

HTML:60 秒
/assets/*:30 天或 365 天
图片/字体/JS/CSS:30 天以上

3. 被刷流量

一定要开:

阿里云费用预警
CDN 流量监控
OSS 防盗链
CDN Referer 防盗链

如果有下载类资源,不要直接放在站点同一个 CDN 域名下。


和其他方案对比

方案国内速度国外速度成本复杂度推荐度
只用 Cloudflare Pages一般/不稳定很好⭐⭐⭐
只用 OSS + 阿里云 CDN很好一般/贵⭐⭐⭐
阿里云 CDN 回源 Cloudflare不稳定一般
国内 OSS + 国外 CF Pages很好很好低~中⭐⭐⭐⭐⭐
自建服务器 + Nginx看服务器看服务器中~高⭐⭐

现在这个:

国内 OSS + CDN
国外 Cloudflare Pages
同一个 blog.henniubi.com 分流

是性价比比较高的方案。


对个人 Astro 博客来说,真正大头只会是国内 CDN 流量。只要不放大图、视频、下载包,整体费用会很低。

Cloudflare 阿里云 CDN DNS OSS