很多同学可能使用Github，Gitlab服务器，并通过其Pages发布个人网站或者博客。但是一个问题是其速度在国内访问实在不敢恭维，甚至有时候有些资源无法显示。对这些同学，今天有一个好消息，Cloudflare也提供Pages服务，并且支持流行的JAMstack框架包括Gatsby，Jekyll，Hugo，Vue.js，Next.js等。

概述

网站是我们在网络上表达自己的方式。无论是拥有博客的业余爱好者，还是拥有数百万客户的大型公司，这都没有关系。

当前，出现了如此多的前端框架，工具和静态站点生成器来帮助我们使用静态方式实现一个动态的网站。

而git，Github和Gitlab的流行，使得基于版本变化来是实现网站内容变化而不是通过CMS后台管理系统来实现。基于Git、Pages和JAMstack实现的网站可以便捷、高效而安全的呈现我们的内容。

AMstack

很多同学可能对JAMstack不熟悉，其实我也最近才了解到。这一种大规模开发和部署网站的一种流行方法。它使可以充分利用全球边缘网络的性能。

JAMstack框架可以使前端与网站后端分离。每次网站进行更改时，整个前端都会预先构建的。页面将转换为可以在全球边缘网络上托管和缓存的优化静态页面。这样，可以在几毫秒内在全球范围内投放页面。

JAMstack网站不必是100%静态的。可以使用基于API的服务的API实现动态的逻辑。还可以构建自己的微服务，这些微服务可以按需加载并且可以轻松扩展。

Cloudflare Pages相当于一个Pass服务，它将与GitHub存储库集成。配置好站点后，就一可以从Cloudflare的界面预览每个提交，每个提交都有自己的唯一URL，并且有一个预览环境。

可以通过邀请其他Cloudflare用户加入个人Pages项目来与其进行协作和预览。当站点在预览分支中看起来完全OK时，可以将其推送到生产分支。

Cloudflare Pages：让前端开发人员尽其所能

Cloudflare Pages，通过将部署与现有的开发工作流程联系起来，立足于简化流程中的每个步骤，Cloudflare Pages提供了以下的特点：

无缝的Git集成，内置版本

使用Cloudflare Pages，要做的就是选择存储库，设置其使用的框架。当有内容提交到仓库时候，Cloudflare就自动构建和部署到网站。

对于生产中的站点，需要彻底检查更改。作为审查者，查看代码并略读红色标志只会使走到目前。要进行彻底检查，必须提交或进行git stash更改，在本地下拉列表，使其运行以确保它真正起作用。

团队中的其他开发人员不是唯一的利益相关者，相关的设计师，营销人员，项目经理都希望在更改发布之前能提供反馈。

独特的预览网址

Cloudflare Pages中每个提交都有一个唯一URL供对其内容预览。预览URL使用户可以很方面了解每次的变化。可以让PM，设计师和营销这些并不是懂代码的人轻松地获得最新迭代的反馈，从而弥合了模拟和代码之间的鸿沟。

无限预览

Cloudflare Pages，每个功能分支将具有自己专用的一致别名，从而使可以为最新更改提供一致的URL。

在"预览"和"生产"环境中，所有功能分支和预览链接都将使用预览变量构建，因此可以进行实验而不会影响生产数据。

准备部署到生产环境时，将使用更新的生产环境变量为重新部署。

全民协作

协作是构建出色网站和产品的关键，Cloudflare Pages无需共享密码和凭据，可以无限的用户免费提供多用户访问的原因。

最广泛CDN网络

借助Cloudflare Pages，站点可以在全球范围内直接部署到的Cloudflare CDN边缘节点，距客户数毫秒。

Cloudflare Workers

Cloudflare为Pages for JAMstack项目提供免费层和强大的基础架构,目前pages的免费服务为:

如果你想要的不仅仅是一个静态网站，Cloudflare还提供了一个无服务器平台，称为Cloudflare Workers。可以支持在Workers上部署一些代码，并在Pages站点中使用它。使用Workers KV和耐用对象，还可以超越无状态功能。

Cloudflare Workers，可以使前端开发人员可以使用与前端JavaScript相同的语言轻松地将可伸缩后端写入其应用程序。

Cloudflare表示将致力于将Workers和Pages集成到无缝的体验中。它的工作方式与Pages完全相同：只需编写代码，git push，然后就会自动部署。唯一的区别是，它不仅可以作为前端，还将支持后端服务。需要明确的是：这不仅适用于无状态功能。通过Workers KV和Durable Objects，可以在该平台上真正构建任何Web应用程序。

实例流程：部署React应用

最后我们以部署一个React应用为例说明下pages交互部署的流程。

React是一个非常流行的框架，用于构建反应性和强大的前端应用程序，由Facebook的开源团队构建。该实例中，我们创建一个新的React应用程序并使用Cloudflare Pages进行部署。我们将使用create-react-app包含电池的工具来生成新的React应用程序。

建立一个新项目

使用npx创建一个新项目，并为其命名为hello-chongchong。

npx create-react-app hello-chongchong

创建一个GitHub仓库

在github创建一个新的GitHub存储库。创建新存储库后，可以将本地应用程序推送到GitHub：

git remote add origin github.com/User/hello-chongchong
git branch -M main
git push -u origin main

使用CloudflarePages部署

可以转到Pages仪表板并创建一个新站点。选择上一步新建的新GitHub存储库，然后在配置部分中提供以下信息：

Production branch ：main
Build command npm ：run build
Build directory ：build

配置站点后，就可以进行第一次部署。

部署网站后，目前预览使用的是子域名pages.dev。每次将新代码提交到React应用程序时，Cloudflare Pages都会自动重建并部署项目还将获得在新的请求请求上权限，预览更改变化，然后再将其部署到正式环境中。

总结

Cloudflare的免费CDN给广大中小站长提供了便利，这次推出又推出的Pages将是一个非常好的项目，可以让很多托管在github的网站迁移，以提供更好的性能和便利。截止本文撰写时候Cloudflare Pages还是Beta版本，使用需要先申请才可使用，大家可以申请试用。