二〇四〇

11 Jan 2024

博客迁移至 Cloudflare Pages

前言

最近把这个博客以及其他静态网站都迁移到了 Cloudflare Pages,除了速度相比服务器托管(亚洲的服务器)有所下降之外,其他的都是优点,本文就来做一下记录。

GitHub Pages

GitHub Pages 是一个由 GitHub 提供的服务,允许用户将自己的网页直接托管在 GitHub 上。GitHub Pages 非常适合托管静态网站,如个人、项目或组织的主页。GitHub Pages 可以直接从 GitHub 仓库中的文件生成网页。GitHub Pages 为公开的仓库提供免费的静态网页托管服务,GitHub Pro 或者 GitHub Enterprise 还支持私有仓库。除了提供一个默认的域名(例如 username.github.io),GitHub Pages 还允许用户绑定自定义域名。

Cloudflare Pages

Cloudflare Pages 是 Cloudflare 推出的一项服务,专门用于构建、部署和托管静态网站和 JAMstack 应用程序。Cloudflare Pages 提供了一种快速且易于使用的方式来发布网站,同时利用了 Cloudflare 的全球网络来确保高性能和安全性。

Cloudflare Pages 可快速部署静态网站,只需将代码库连接到 Cloudflare Pages,就可以自动构建和部署站点。Cloudflare Pages 提供无限制的部署次数和版本历史,方便回滚至先前的版本。Cloudflare Pages 集成了持续集成和持续部署(CI/CD),每次提交到代码仓库时,Cloudflare Pages 都会自动构建和发布最新版本的网站。

网站内容通过 Cloudflare 的全球内容分发网络(CDN)进行分发,确保了加载速度和响应时间的优化。Cloudflare Pages 自动为所有部署的网站提供免费的SSL证书,确保安全的 HTTPS 连接。Cloudflare Pages 支持绑定自定义域名,并通过 Cloudflare 提供的 DNS 服务进行管理。Cloudflare Pages 支持多种静态站点生成器和前端框架,如 React、Vue、Angular、Hugo、Jekyll 等。

迁移

要把静态网站迁移到 Cloudflare Pages,其实非常简单,只需要以下几步:

  • 登陆 Cloudflare 后台,点击「Workers & Pages」,点击「Create application」,切换到 Pages,然后 Connect to Git;
  • 在连接 GitHub 部分,保险起见只授权需要的项目,平时也要牢记权限最小化原则;
  • 连接 GitHub 成功后,选择项目,然后做一些设置,主要就是你的项目用的什么框架,如何编译,编译好的目录在哪里,设置好后就会自动 Build 和 Deploy。

完成以上步骤后,访问 yourdomain.pages.dev 就可以查看效果,如果确认无误,可以绑定自定义域名,成功后就可以把服务器上的 Nginx 配置删掉并重启。假设你的域名是 yourdomain.com,还想通过 www.yourdomain.com 访问,那么在 Cloudflare Pages 页面还需要设置一条 www.yourdomain.com 的记录,设置好后会自动添加一条 CNAME 的记录。

Cloudflare Pages 默认使用的软件都是比较新的,如果 Build 失败,可以调整下版本,具体方法可以设置环境变量,具体的教程可以点击 此处

此外还有一点,建议设置 _headers,设置方法可以点击 此处

小结

GitHub Pages 有的优点 Cloudflare Pages 全有,而且产品体验更好。如果使用服务器托管,虽然有 Webhook 等方法实现 GitHub 提交后,服务器自动编译发布,但使用体验还是没有 Cloudflare Pages 那么好。如果你也有静态页面托管的需求并且不那么在意访问速度,可以考虑使用免费的 Cloudflare Pages,省下来的钱可以给 ChatGPT Plus 充值。

Long Bitcoin,
Robin at 01-11

2040