就在昨天， Cloudflare 官方博客宣布了 Cloudflare Page的正式上市，作为一个正经的白嫖怪和cf粉，马上就来体验一下Cloudflare Page

优势

Cloudflare Page对比其它类似产品一个明显的优势在于它提供的免费的Web分析

img

官方给出的例图

启用也是相当的简单

img

但是要注意启用的时候要等到第二次构建时才会生效

image-20210413120536995

_redirects 文件支持，这个文件用于定义额外的web重定向， 每一行表示一个规则， 格式如下

1
[source] [destination] [http code]

例如

1
2
3
/home / 301
/contact-me /contact 301
/blog https://www.ghost.org 301

偶尔需要改动url又不想在自己原有的项目里设置一堆后向兼容的情况下很方便

当然还有更多例如图片压缩， gzip支持等等， 可以通过官方博客了解，这里就不多说了

另外免费版的Cloudflare Page限制每个月的构建次数为500次， 这对个人项目来说是相当充足的， 当然如果有需求或是想要支持他们，可以订阅他们的Pro高级版本或者是Business企业版本

image-20210413115447271

部署体验

点击这里直接查看最终效果

打开Cloudflare 首页 https://pages.cloudflare.com/ 按照提示，首先我们需要关联自己的cloudflare账号与GitHub仓库， 这里我只选择了一个数据结构课程写过的一个小项目Huffman-example

image-20210413113636154

紧接着我们选择这个仓库，然后开始设定它的部署配置

image-20210413114001811

名称什么的我就懒得改了， 选择自己想要部署的分支，这里是master

image-20210413114033296

至于组件设定， 由于我这里的项目使用Vue.js框架使用yarn作为构建工具， 所以这里配置如下， 这里配置依照自己的项目来就可以， 基本上没有什么很难理解的

image-20210413114151258

而Cloudflare也是贴心的在每一处都提供了文档链接供参考

image-20210413114314904

确认后只需要等待了， 大概需要几分钟的时间(依据项目情况时间长短不同)， 这里我花费了大概4分钟左右的时间

image-20210413114434073

确认后我们可以看到这样的管理界面

image-20210413114603795

点击造訪網站就可以看到自己的网站了

例如

image-20210413114717404

个人认为非常适合作为自己一些小项目的demo站

需要注意的是， 这里我选择了master分支， 那么master分支每次提交和pr都会触发构建过程， 一些较小的无意义的提交可能会浪费掉免费的500次构建机会(比如我， 悲)， 所以建议新建分支单独用来构建或单独用来开发