使用 Cloudflare Pages 部署 Hexo 静态网站

自从 2021.02.09 申请 Cloudflare Pages 测试资格后一直杳无音讯,时隔将近一个月在今天 2021.03.06 凌晨收到了申请通过的通知。

因为时差的原因,我是在北京时间凌晨收到的申请通过通知,所以直到下午才体验了一把,体验结论:简单、方便。

因总所周知的原因,网站速度对中国大陆用户依然不够友好 😔。

cloudflare-pages-application-passed

Cloudflare Pages 是什么?

Cloudflare Pages 是一个使用 JAMstack 的网站部署平台,和 GitHub Pages 类似,都是一个静态站点部署平台。

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

Cloudflare Pages is currently in open beta.

Cloudflare Pages 官网

JAMstack 是什么?

JAMstack 最开始是 JavaScript、API、Markup 技术栈的一个缩写,由 Mathias Biilmann 提出(感觉就是为了推销 Netlify 服务的 🤔),当然现在已经不止于此了。

A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup

Mathias Biilmann (CEO & Co-founder of Netlify)

按照官网介绍,现在 JAMstack 是新一代的网站架构,通过预渲染和可重用的 API,使其同时拥有静态和动态站点的优势。

jamstack-architecture

Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

Jamstack 官网

当审核通过后,登陆 Cloudflare 就能在首页就能看到 Cloudflare Pages 的入口了。

cloudflare-pages-entrance

新建一个项目,项目的名字默认就是你的二级域名,如果有冲突的话,域名会自动给你生成一些后缀,所以有喜欢的域名得赶早抢坑,不过我不关注这些,反正都会做 CNAME 跳转的 😂。

比如我的项目名是:chengxiaobai,二级域名默认是:chengxiaobai.pages.dev。如果 chengxiaobai 被占用了,二级域名可能就是:chengxiaobai-xxx.pages.dev。

PS:按照描述习惯,这里把 pages.dev 当作一级域

然后就会让你关联 GitHub 账号,可以选择授予权限:全部仓库还是指定部分仓库,这个是可以在 GitHub 上改的,建议按照最小权限原则来授予项目权限,后期改动在个人中心的 Applications 修改即可。

cloudflare-pages-github-config

授权完后,就能在 Cloudflare Pages 上选择对应的仓库了,默认是 main 分支,可以自定义选择分支。

cloudflare-pages-repositories-config

下一步就是选择具体的构建工具或框架,点击这里看看到目前的支持列表,常见的比如:Hugo、Jekyll、Next.js、Vue 等等都有支持,并且配置项支持自定义构建命令,所以想实现自定义构建可以直接配置不同的构建命令即可。

cloudflare-pages-deploy-config

然后就可以开始构建了,过程和 GitHub Actions 差不多,只是最后多了一个部署到 Cloudflare CDN。

cloudflare-pages-deploy-doing

构建速度整体和 GitHub Actions 差不多,因为本博客的文章数量不多,所以差异不明显。

同时每一次的构建成功都会对应一个临时三级域名用于查看当前构建结果,在开发测试的时候很有用。

cloudflare-pages-deploy-success

因为是部署到 Cloudflare CDN,所以自带了 SSL 证书。

cloudflare-pages-certificate

接下来就是速度测试了,按照前面的描述,既然是部署到 Cloudflare CDN,那中国大陆的速度就有心里预期了。

Cloudflare Pages 速度测试:

本博客速度测试:

依据测速结果来看,Cloudflare Pages 的速度和 Cloudflare CDN 一样,国内惨不忍睹,国外很能打。

而我的博客之所以国内外访问速度尚可,是因为我接入了 Cloudflare Partner,国内外分流了:国内走国内 CDN(腾讯),国外走国外 CDN(Cloudflare),这样分流的前提是必须得走 CNAME 接入。

但是 Cloudflare Pages 是天然支持 CNAME 接入的,也就是说我们不用接入 Cloudflare Partner 也能使用 CNAME 接入,分流请求实现全球差异化加速。

那现在又有一个更好的折腾方案了,先说下我现在的博客架构是这样的:

graph LR
A["Client"] -->|Request| B("DNS")
B --> C{"dispatch"}
C -->D["Tencent"]
C -->E["Cloudflare"]
D -->|Source| G["GitHub Page"]
E -->|Source| G["GitHub Page"]

这架构的优点是:全部都是大厂服务,稳定性可靠、国内外分流速度快,并且都是免费或者成本很低。

但是有个 2 关键的问题就是:GitHub Page 必须是公开的仓库,也就是说我的站点可以被任何人 Fork 成镜像,这其实不是什么大问题,虽说有类似的情况发生过,但是其实没啥太大影响,就是存在安全性隐患而已。

第二个问题就是,使用 Cloudflare Partner 接入也是存在安全隐患的,安全和稳定全凭接入商的良心,所以找一个靠谱的接入商很重要。

如果使用 Cloudflare Pages 就可以完全避免这个问题了,因为 Cloudflare Pages 是支持私有仓库部署的同时也是支持 CNAME 接入的,所以最后的架构就成这样了:

graph LR
A["Client"] -->|Request| B("DNS")
B --> C{"dispatch"}
C -->D["Tencent"]
C -->E["Cloudflare Page"]
D -->|Source| E["Cloudflare Page"]

优点是移除了 GitHub Page 和 Cloudflare Partner 避免了潜在的安全隐患,同时国外请求直接由 Cloudflare Page 承载,理论上速度会更快点。当然 Cloudflare Partner 的 CNAME 接入对站点类型的选择会自由,我接入后只用来分流博客,这个选择是因人而异的。

以上就是对 Cloudflare Pages 的一个尝鲜体验,因为还是 Beta 版本功能也不是很多,但是对于我们而言多了一个 JAMstack 平台的选择也是极好的,还有其他的玩法可以留言一起折腾 🤟。