从Github Pages迁移至CloudFlare Pages,提升一点点的速度
本文最后更新于 257 天前,其中的信息可能已经有所发展或是发生改变。

CloudFlare Pages 好像在2021年某月正式上线了,其速度比Github Pages(以及Github Pages + CloudFlare CDN)快了不少,至少在我把 huli.li 迁移过去后感觉是这样的。并且 CF 的 Pages 相比 Github 的 action 配置起来更加方便,还支持 React, Next.js, Nuxt.js, Vue, Hugo, JekyII 的部署预设。而且 DF Pages 可以部署私有仓库,这在 Github 还要Pro以上套餐。

配置CloudFlare Pages

点击链接快捷跳转至 CF Pages 或在控制面板左侧点击 Pages(注意不是点进域名后,是在域名列表的左侧边栏)。然后根据提示配置与 Github 或 Gitlab 的连接,登录后可以选择让 CF Pages 读取全部仓库(包括私有),或者手动选中想要让 CF Pages 读取的仓库。回到 Pages 首页点击蓝色的 Create a project 按钮来到新建一个项目,来到新建流程。

在新页面选中 Github/Gitlab 账号并选择需要构建的仓库,然后点击下一步 Begin Setup。(没看到你要的仓库,说明上一步可能你没有授权 CF Pages 可以读取的仓库)。

在新页面上方填好 Project name 和需要进行构建的分支,page页面默认的域名会被配置到<ProjectName>.pages.dev,不过后面可以配置自定义自己的域名。

在下方的构建设置中可以选择预设方案,也可以自定义构建配置,例如Vite.js, Build command 是 npm run build,输出目录就是 dist。Frame preset 预设可以空着,它只不过是可以帮助你自动填写构建配置。

这里的构建并不需要npm i,因为 CF Pages 会自动运行安装依赖的命令。并且 CF Pages 的构建环境预安装了 Java 8,Python 2.7,Node.js 12.18.0 等环境,可以在Language support and tools页面看到,并且 pip、npm 也预装在环境里,在刚才的链接页面下方也有写道。

如果是纯静态内容,可以在command里面填写 exit 0 来跳过执行构建阶段。

继续点击下一步就可以保存并构建了。有一说一这个构建过程相比 Github Actions 来说真的是太慢了,主要就是在初始化环境那里,单一个环境配置就基本要花个两三分钟,对比图在下面。虽然比较满,但是访问速度快就行了,也不是不能接受。

Github Action 构建日志
CloudFlare Pages 构建日志

构建完成就可以打开生成的域名来访问了,然后就可以在 Custom domains 页面配置自定义域名了,如果域名DNS也是在 CloudFlare 托管那么 CF 还可以直接自动配置(如果之前对应域名有 DNS 记录记得先删掉然后再自动配置,否则可能会出现问题,如果出现问题了删除自定义域名重新添加就好了)。

CloudFlare Pages Custom domains

此时 Github 仓库对应的提交号旁边也会显示构建成功(下面图片里第一个是 Github Action 自动构建,第二、三个是代码检查,最后一个是 CF Pages 的构建)

可能出现的问题

我自己最开始配置 huli.li 时一直出现这个问题:

构建失败日志

猜到可能是 Node.js 版本太低导致的(构建环境的才 12.18.0,我本地都16.13.1了),于是尝试在构建命令加上 npm i -g npm && npm i -g n && n stable && npm run build 升级 npm 和 Node.js,又提示权限不足没法安装,然后才找到刚才的 Language support and tools 文档,发现只要指定特定的环境变量 Environment variables 就可以预装指定版本的环境,按照文档配置好后就可以了。

CloudFlare Pages 环境变量

其他小笔记

CF Pages 会在每次 Github 仓库有新提交时构建(不论任何分支),因此为了不频繁构建还是尽可能将多个 commits 一起 push 以避免频繁构建。(除非你暂停掉)。

CF Pages 也会保留所有成功构建的记录,成为预览 preview,url为 <构建UUID前8位>.<ProjectName>.pages.dev 并且也可以随时访问,Github 仓库构建记录也会展示出来,如果不希望这些 preview 被展示出来,需要在 设置->通用设置->访问策略(Settings -> General -> Access policy)配置谁可以访问,不过如果想使用这个需要建立 CloudFlare Team,其需要验证信用卡或 Paypal,即使免费版也需要验证,但是国区的 Paypal 也可以使用。

CloudFlare Pages Access policy

最后,欢迎各位 Fork 狐狸狸仓库用来测试,如果需要正常显示狐狸狸页面的天气和位置需要安装文档自行申请并替换 API Key。(记得给个Star~)

文章首发于https://blog.orangii.cn/2022/cloudflare-pages/,转载请注明出处。博客所有文章遵循CC BY-NC 4.0协议

评论

  1. Windows Chrome
    1月前
    2022-8-23 14:49:51

    感谢,通过环境变量解决了Nodejs版本得问题。

  2. 常瑞
    Windows Edge
    8月前
    2022-1-29 19:02:47

    是不是你gitpage没有配置cf缓存啊?

    • 博主
      常瑞
      Windows Chrome
      8月前
      2022-1-29 21:49:19

      本来 GitHub Pages 就是纯静态,都是CF默认的缓存策略,速度差距有点大,可能就是CF缓存政策,但是也不好说。反正CF Pages是直接部署到CF的缓存服务器,速度好一点也可能是免去回源了

  3. Windows Chrome
    9月前
    2022-1-21 0:26:55

    这样我可以把docsify部署上去,跑在cf上好像也不错。

    • 博主
      土拨许
      Windows Chrome
      9月前
      2022-1-21 9:43:32

      Docsify应该直接拉静态文件就可以了,就不用构建什么的了

  4. Windows Chrome
    9月前
    2022-1-20 18:47:35

    cf yyds 那个页面也很漂亮

    • 博主
      攀大汇
      Windows Chrome
      9月前
      2022-1-20 22:19:37

      CF对静态文件加速还是非常不错的,就是对动态内容就差一点了,而且不知道为什么明明是一样的内容 CF CDN + gh pages 就没有 CF Pages 快

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
甘城猫猫
上一篇
下一篇