很多同學(xué)可能使用Github，Gitlab服務(wù)器，并通過其Pages發(fā)布個人網(wǎng)站或者博客。但是一個問題是其速度在國內(nèi)訪問實在不敢恭維，甚至有時候有些資源無法顯示。對這些同學(xué)，今天有一個好消息，Cloudflare也提供Pages服務(wù)，并且支持流行的JAMstack框架包括Gatsby，Jekyll，Hugo，Vue.js，Next.js等。

概述

網(wǎng)站是我們在網(wǎng)絡(luò)上表達自己的方式。無論是擁有博客的業(yè)余愛好者，還是擁有數(shù)百萬客戶的大型公司，這都沒有關(guān)系。

當(dāng)前，出現(xiàn)了如此多的前端框架，工具和靜態(tài)站點生成器來幫助我們使用靜態(tài)方式實現(xiàn)一個動態(tài)的網(wǎng)站。

而git，Github和Gitlab的流行，使得基于版本變化來是實現(xiàn)網(wǎng)站內(nèi)容變化而不是通過CMS后臺管理系統(tǒng)來實現(xiàn)?；贕it、Pages和JAMstack實現(xiàn)的網(wǎng)站可以便捷、高效而安全的呈現(xiàn)我們的內(nèi)容。

AMstack

很多同學(xué)可能對JAMstack不熟悉，其實我也最近才了解到。這一種大規(guī)模開發(fā)和部署網(wǎng)站的一種流行方法。它使可以充分利用全球邊緣網(wǎng)絡(luò)的性能。

JAMstack框架可以使前端與網(wǎng)站后端分離。每次網(wǎng)站進行更改時，整個前端都會預(yù)先構(gòu)建的。頁面將轉(zhuǎn)換為可以在全球邊緣網(wǎng)絡(luò)上托管和緩存的優(yōu)化靜態(tài)頁面。這樣，可以在幾毫秒內(nèi)在全球范圍內(nèi)投放頁面。

JAMstack網(wǎng)站不必是100%靜態(tài)的?？梢允褂没贏PI的服務(wù)的API實現(xiàn)動態(tài)的邏輯。還可以構(gòu)建自己的微服務(wù)，這些微服務(wù)可以按需加載并且可以輕松擴展。

Cloudflare Pages相當(dāng)于一個Pass服務(wù)，它將與GitHub存儲庫集成。配置好站點后，就一可以從Cloudflare的界面預(yù)覽每個提交，每個提交都有自己的唯一URL，并且有一個預(yù)覽環(huán)境。

可以通過邀請其他Cloudflare用戶加入個人Pages項目來與其進行協(xié)作和預(yù)覽。當(dāng)站點在預(yù)覽分支中看起來完全OK時，可以將其推送到生產(chǎn)分支。

Cloudflare Pages：讓前端開發(fā)人員盡其所能

Cloudflare Pages，通過將部署與現(xiàn)有的開發(fā)工作流程聯(lián)系起來，立足于簡化流程中的每個步驟，Cloudflare Pages提供了以下的特點：

無縫的Git集成，內(nèi)置版本

使用Cloudflare Pages，要做的就是選擇存儲庫，設(shè)置其使用的框架。當(dāng)有內(nèi)容提交到倉庫時候，Cloudflare就自動構(gòu)建和部署到網(wǎng)站。

對于生產(chǎn)中的站點，需要徹底檢查更改。作為審查者，查看代碼并略讀紅色標(biāo)志只會使走到目前。要進行徹底檢查，必須提交或進行g(shù)it stash更改，在本地下拉列表，使其運行以確保它真正起作用。

團隊中的其他開發(fā)人員不是唯一的利益相關(guān)者，相關(guān)的設(shè)計師，營銷人員，項目經(jīng)理都希望在更改發(fā)布之前能提供反饋。

獨特的預(yù)覽網(wǎng)址

Cloudflare Pages中每個提交都有一個唯一URL供對其內(nèi)容預(yù)覽。預(yù)覽URL使用戶可以很方面了解每次的變化?？梢宰孭M，設(shè)計師和營銷這些并不是懂代碼的人輕松地獲得最新迭代的反饋，從而彌合了模擬和代碼之間的鴻溝。

無限預(yù)覽

Cloudflare Pages，每個功能分支將具有自己專用的一致別名，從而使可以為最新更改提供一致的URL。

在"預(yù)覽"和"生產(chǎn)"環(huán)境中，所有功能分支和預(yù)覽鏈接都將使用預(yù)覽變量構(gòu)建，因此可以進行實驗而不會影響生產(chǎn)數(shù)據(jù)。

準備部署到生產(chǎn)環(huán)境時，將使用更新的生產(chǎn)環(huán)境變量為重新部署。

全民協(xié)作

協(xié)作是構(gòu)建出色網(wǎng)站和產(chǎn)品的關(guān)鍵，Cloudflare Pages無需共享密碼和憑據(jù)，可以無限的用戶免費提供多用戶訪問的原因。

最廣泛CDN網(wǎng)絡(luò)

借助Cloudflare Pages，站點可以在全球范圍內(nèi)直接部署到的Cloudflare CDN邊緣節(jié)點，距客戶數(shù)毫秒。

Cloudflare Workers

Cloudflare為Pages for JAMstack項目提供免費層和強大的基礎(chǔ)架構(gòu),目前pages的免費服務(wù)為:

如果你想要的不僅僅是一個靜態(tài)網(wǎng)站，Cloudflare還提供了一個無服務(wù)器平臺，稱為Cloudflare Workers。可以支持在Workers上部署一些代碼，并在Pages站點中使用它。使用Workers KV和耐用對象，還可以超越無狀態(tài)功能。

Cloudflare Workers，可以使前端開發(fā)人員可以使用與前端JavaScript相同的語言輕松地將可伸縮后端寫入其應(yīng)用程序。

Cloudflare表示將致力于將Workers和Pages集成到無縫的體驗中。它的工作方式與Pages完全相同：只需編寫代碼，git push，然后就會自動部署。唯一的區(qū)別是，它不僅可以作為前端，還將支持后端服務(wù)。需要明確的是：這不僅適用于無狀態(tài)功能。通過Workers KV和Durable Objects，可以在該平臺上真正構(gòu)建任何Web應(yīng)用程序。

實例流程：部署React應(yīng)用

最后我們以部署一個React應(yīng)用為例說明下pages交互部署的流程。

React是一個非常流行的框架，用于構(gòu)建反應(yīng)性和強大的前端應(yīng)用程序，由Facebook的開源團隊構(gòu)建。該實例中，我們創(chuàng)建一個新的React應(yīng)用程序并使用Cloudflare Pages進行部署。我們將使用create-react-app包含電池的工具來生成新的React應(yīng)用程序。

建立一個新項目

使用npx創(chuàng)建一個新項目，并為其命名為hello-chongchong。

npx create-react-app hello-chongchong

創(chuàng)建一個GitHub倉庫

在github創(chuàng)建一個新的GitHub存儲庫。創(chuàng)建新存儲庫后，可以將本地應(yīng)用程序推送到GitHub：

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

使用CloudflarePages部署

可以轉(zhuǎn)到Pages儀表板并創(chuàng)建一個新站點。選擇上一步新建的新GitHub存儲庫，然后在配置部分中提供以下信息：

Production branch ：mainBuild command npm ：run buildBuild directory ：build

配置站點后，就可以進行第一次部署。

部署網(wǎng)站后，目前預(yù)覽使用的是子域名pages.dev。每次將新代碼提交到React應(yīng)用程序時，Cloudflare Pages都會自動重建并部署項目還將獲得在新的請求請求上權(quán)限，預(yù)覽更改變化，然后再將其部署到正式環(huán)境中。

總結(jié)

Cloudflare的免費CDN給廣大中小站長提供了便利，這次推出又推出的Pages將是一個非常好的項目，可以讓很多托管在github的網(wǎng)站遷移，以提供更好的性能和便利。截止本文撰寫時候Cloudflare Pages還是Beta版本，使用需要先申請才可使用，大家可以申請試用。