改造前本博客通过 DNSPod 解析,博客的静态页面存储在又拍云,这样的方案用着没什么问题,又拍云 CDN 有海外节点,访问也不慢,本次基于 Cloudflare Pages 的改造有以下几点
- 主观上想更多的体验 Cloudflare 免费服务(此处指代 Pages)
- 博客部署往更通用化方向改造,不依赖特定的平台、随时可迁移

上图即本次改造后的图例,在海外访问本博客,静态页面即由 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”

添加记录

进行检测

等待片刻后出现 Active

测试 DNS 分流情况#
从海外服务器请求,返回的 Headers 指明访问的是 cloudflare 服务器

国内继续使用又拍云

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