边缘网络:白嫖 Cloudflare Pages 静态博客(DNS 国内外分流)

改造前本博客通过 DNSPod 解析,博客的静态页面存储在又拍云,这样的方案用着没什么问题,又拍云 CDN 有海外节点,访问也不慢,本次基于 Cloudflare Pages 的改造有以下几点

  1. 主观上想更多的体验 Cloudflare 免费服务(此处指代 Pages)
  2. 博客部署往更通用化方向改造,不依赖特定的平台、随时可迁移

上图即本次改造后的图例,在海外访问本博客,静态页面即由 Cloudflare 提供

部署 Cloudflare Pages

在 Cloudflare 面板找到 Workers & Pages,进入并点击链接 Git 仓库

仓库类型支持 Github、Gitlab(我的博客配置存储在 Github 私有仓库)

选择仓库

我的博客框架是 Python Pelican,使用 pelican 命令生成静态文件,仓库中需要有 requirements.txt 来告知 Cloudflare 安装依赖

# 本机执行命令,生成 requirements.txt 文件,推送到代码仓库
$ python3 -m pip install "pelican[markdown]"
$ pip3 freeze > requirements.txt

(可选)此处支持众多框架,如:Hexo、Jekyll 等,按需调整构建命令

点击执行

等待运行完成,页面提示可以通过 https://blog-yasking-content.pages.dev/ 访问静态博客

备注:此时点击链接还是会跳回到 https://blog.yasking.org,站点 URL 是在 Pelican 配置中定义的,因为我这里配置博客是 DNS 分流而不是在 Cloudflare 上的独立站点,所以是符合预期的

添加自定义域名与 DNS 分流

点击 “Continue to project” 继续,转到添加自定义域名处

如果你的域名由 Cloudflare DNS 托管解析,则指定一个自定义子域名即可,例如:“blog-next.donx-done.xyz”,Cloudflare 会自动配置好 HTTPS、解析等,我的域名由 DNSPod 解析,本次调整是让 DNS 分流,所以我填写的是 “blog.yasking.org”,后续需要手动添加 CNAME 解析到 Cloudflare

DNSPod 解析,我这里输入博客域名 blog.yasking.org

选择 “My DNS provider”

添加记录

进行检测

等待片刻后出现 Actice

测试 DNS 分流情况

从海外服务器请求,返回的 Headers 指明访问的时 cloudflare 服务器

国内继续使用又拍云

Cloudflare Pages 部署完成,符合预期,下篇会记录 “images.yasking.og” 图床的改造,之前博客图片也是存储在又拍云,同样计划采用 DNS 分流,海外图片使用免费的 Cloudflare R2 进行存储

参考