CloudFlare-githubpages配置

cloudflare
Markdown
发布日期:   2022-08-31
更新日期:   2022-11-18
文章字数:   7.2k
阅读时长:   26 分
阅读次数:  

CloudFlare+githubpages 配置

1.概述

1.1CDN简介

关于 CDN 是什么，我想应该不用做过多的介绍，毕竟现在是一个 “云” 的时代，你至少也听说过 阿里云 或者 腾讯云 吧，当然其中就包括 CDN 业务。

CDN 的作用有很多，比如可以用来加速网站的访问，可以用来防护网站等。本篇文章讨论的就是使用 cloudflare 作为 CDN 来加速博客网站，并让博客开启 https，提升博客安全等级。

由于 GitHub Pages 在国外，而且有时候因为图片过多等原因，静态博客页面在国内访问速度可能会非常慢，我们可以用 CDN 来加速，选择 CDN，对于个人来说，主要考虑的还是访问速度以及价格，既免费又快的 CDN就最好了。经过一番寻找，发现 Cloudflare 免费版速度还可以，而且配置起来非常简单，所以在此选用 CloudFlare CDN 来加速页面访问。也就是说，借用了cloudflare免费提供的serveless服务：workers。搭建一个反向代理。

反向代理的话相当于是我们的节点代替github pages接受了客户端的请求，所以其实我们只需要做两件事：

  1. 接收客户端的请求，对其进行必要的修改之后发送给真正的服务端（github pages）。这些修改主要是针对一些headers的设置，包括替换Host地址，允许任意源头资源共享(access-control-allow-origin: *)等，具体见代码。
  2. 接收服务端的响应，同样地我们需要对响应的内容做一些修改再发送给客户端的浏览器。这部分主要是把响应中所有的github pages出现的部分改换成workers站点的url，否则我们的客户端就获取这些信息之后下一次就会直接访问github pages源站了。这一步可以通过简单的文本查找和替换来实现，我们可以维护一个替换对字典，对响应的内容进行正则查找替换后把响应发送给客户端。

1.2 DNS简介

域名系统(Domain Name System,DNS)是Internet上解决网上机器命名的一种系统。它将简单易记的域名转换成可由计算机识别的IP地址，以便客户端对服务器的正常访问，就像拜访朋友要先知道别人家怎么走一样。Internet上当一台主机要访问另外一台主机时，必须首先获知其地址，TCP/IP中的IP地址是由四段以“.”分开的数字组成(此处以IPv4的地址为例，IPv6的地址同理)，记起来总是不如名字那么方便，所以，就采用了域名系统来管理名字和IP的对应关系。

1.3域名介绍

1.3.1域名的形式

域名可以划分为各个子域，子域还可以继续划分为子域的子域，这样就形成了顶级域、二级域、三级域等。
如下图所示：
这里写图片描述
其中顶级域名分为：国家顶级域名、通用顶级域名、反向域名。

国家顶级域名 中国:cn， 美国:us，英国uk…
通用顶级域名 com公司企业，edu教育机构，gov政府部门，int国际组织，mil军事部门 ，net网络，org非盈利组织…
反向域名 arpa，用于PTR查询（IP地址转换为域名）

1.3.2域名的层级

  • 根域名 ：.root 或者 . ，根域名通常是省略的
  • 顶级域名，如 .com，.cn 等
  • 次级域名，如 baidu.com 里的 baidu，这个是用户可以进行注册购买的
  • 主机域名，比如 baike.baidu.com 里的baike，这个是用户可分配的
主机名.次级域名.顶级域名.根域名
baike.baidu.com.root

在这里插入图片描述

换一种形式展示，如下图所示：
这里写图片描述
例如 :我们熟悉的，www.baidu.com

  1. com: 一级域名. 表示这是一个企业域名。同级的还有 “net”(网络提供商), “org”(⾮非盈利组织) 等。
  2. baidu: 二级域名，指公司名。
  3. www: 表示主机域名为 www。

域名是分层结构，域名服务器也是对应的层级结构。
有了域名结构，还需要有一个东西去解析域名，域名需要由遍及全世界的域名服务器去解析，域名服务器实际上就是装有域名系统的主机。

由高向低进行层次划分，可分为以下几大类：

分类 作用
根域名服务器 最高层次的域名服务器，本地域名服务器解析不了的域名就会向其求助
顶级域名服务器 负责管理在该顶级域名服务器下注册的二级域名
权限域名服务器 负责一个区的域名解析工作
本地域名服务器 当一个主机发出DNS查询请求时，这个查询请求首先发给本地域名服务器

注：一个域名服务器所负责的范围，或者说有管理权限的范围，就称为 区域 （Zone）
关于分层， 需要注意的是:

  • 每个层的域名上都有自己的域名服务器，最顶层的是根域名服务器
  • 每一级域名服务器都知道下级域名服务器的IP地址
  • 为了容灾, 每一级至少设置两个或以上的域名服务器

域名的层级有关要点，说明如下：

（1）“www.baidu.com” 的一个最完整的形式应该是 “www.baidu.com.”。

即在每个域名后面会有一个 “.” ，“.” 来表示根，我们统称这种域名叫绝对域名“ Fully Qualified Domain Name ”(FQDN)，相当于Linux 系统中的文件绝对路径。可以通过在计算机中输入 “www.baidu.com.” 或 “www.dianrong.com.” 来确认是否可以打开网站。

不需要输入，不代表不存在。

“.” 来表示根,通常我们不需要输入这个根 ，因为计算机和浏览器默认已帮我们输入了这个“.” 根。

（2）域名体系，使用 逆向树 所示，树中的每一个分支，都称为域，一个域名可以属于多个域，如域名 www.baidu.com 属于baidu.com域的一部分，同时也是 com 域的一部分。

（3）“.” 是最树状结构中最顶层的域名，统称为“根”，即每个域名都是由根开始索引的，所有域名都属于根。

（4）域名体系是通过倒着来叙述一个域名，如 www.baidu.com 是先写最下面的 www，在写中间的 baidu ，接着写上面的 com ，最后写 “.” ，只是根可以省略。

（5）顶级域名下面的分支是二级域名，即我们平时通过阿里云、腾讯云购买的域名，如 baidu.com 、fastcp.cn 、dianrong.com 等。

（6）二级域名下面的分支为三级域名，有时也可称为服务器名称，如 baidu下面的 www 代表了百度的网站服务名称，music 代表了百度的音乐网站服务器名称。

（7）由根分支出的域名叫 顶域域名（一般简称为 TLD ），一般分为国家地区顶级域名和通用顶级域名。

  • 国家顶级域名如我们了解的 cn、jp等。
  • 通用顶级域名如我们了解的 com、org、net、edu等，其中表示工商企业的是 .com；表示网络提供商的 .net，表示非盈利组织的 .org ；表示教育的 .edu 。
  • 通常我们只能注册二级域名，如果需要注册顶级域名，比如注册类似 .com 这样的域名，在国内需要联系 CNNIC ，由他们进行代理注册，通常价格不菲。大多数情况下，二级域名已经可以完全满足当下的业务需求。

当然三级域名下还可以在分支四级域名出来，DNS 类似于 Unix 文件系统的结构，由根节点在上的反转树表示。最多分分支 127 层，每一层可以由最多 63 个字符组成，每层中间都以 “.” 进行分隔，类似 Unix 文件中以 “/” 分隔每一个目录。域名的总长度不可超过255个字符，仅可使用字符、数字和连字符，不区分大小写。

1.3.3DNS 资源记录

由DNS构建起的域名与IP地址之间的对应关系，称之为“DNS资源记录”（record）。通过设置不同的解析记录，可以实现对主机名不同的解析效果，从而满足不同场景下的域名解析需求。在 DNS 服务器上，一个域名及其下级域名组成一个区域 （Zone）。一个 Zone的 相关的 DNS 信息构成一个数据库文件。

下面是一条A类型的资源记录（简称为A记录）：域名 www.zdns.cn 的数据为 202.173.11.10

在这里插入图片描述

记录一条域名信息映射关系，称之为资源记录（RR）。当我们查询域名www.zdns.cn的时候，查询结果得到的资源记录结构体中有如下数据：

  • TTL，就是生存周期，是递归服务器会在缓存中保存该资源记录的时长。
  • 网络/协议类型，它的代表的标识是IN，IN就是internet，目前DNS系统主要支持的协议是IN。
  • type，就是资源记录类型，一般的网站都是都是A记录（IPv4的主机地址）。
  • rdata是资源记录数据，就是域名关联的信息数据。

每个区域（Zone）数据库文件都是由资源记录（RR）构成的，一个资源记录就是一行文本，提供了一组有用的 DNS 配置信息。在DNS系统中，最常见的资源记录是Internet类记录，该记录由包含4个字段的数据构成：Name、Value、Type、TTL。其中Name和Value可以理解为一对键值对，但是其具体含义取决于Type的类型，TTL记录了该条记录应当从缓存中删除的时间。

常见的资源记录类型如表所示。

类型 编码 内容
A 1 主机记录，将 DNS 域名映射到 IPv4 地址，基本作用是说明一个域名对应了哪些 IPv4 地址
NS 2 权威名称服务器记录，用于说明这个区域有哪些 DNS 服务器负责解析
CNAME 5 别名记录，主机别名对应的规范名称，用于将多个DNS记录指向已存在A记录的主机
SOA 6 起始授权机构记录，NS 记录说明了有多台服务器在进行解析，但哪一个才是主服务器，NS 并没有说明，SOA 记录了说明在众多 NS 记录里哪一台才是主要的服务器
PTR 12 指针记录，IP 地址反向解析，是 A 记录的逆向记录，作用是把 IP 地址解析为域名
MX 15 邮件交换记录，指定负责接收和发送到域中的电子邮件的主机
TXT 16 文本资源记录，用来为某个主机名或域名设置的说明
AAAA 28 主机记录，将 DNS 域名映射到 IPv6 地址，基本作用是说明一个域名对应了哪些 IPv6 地址
SRV – 用于指定服务器提供服务的位置（如主机名和端口）数据

1.3.4 域名记录的区别和联系

问题：域名解析中，A记录、CNAME、MX记录、NS记录的区别和联系?

联系：

都是区域（Zone）数据库文件都是由资源记录。

A记录: 又称IP指向

用户可以在此设置子域名并指向到自己的目标主机地址上，从而实现通过域名找到服务器。

说明：指向的目标主机地址类型只能使用IP地址；
附加说明：

  • 泛域名解析即将该域名所有未指定的子域名都指向一个空间。在“主机名”中填入*，“类型”为A，“IP地址/主机名”中填入web服务器的IP地址，点击“新增”按钮即可。
  • 负载均衡的实现：负载均衡(Server Load Balancing，SLB)是指在一系列资源上面动态地分布网络负载。负载均衡可以减少网络拥塞，提高整体网络性能，提高自愈性， 并确保企业关键性应用的可用性。

当相同子域名有多个目标地址时，表示轮循，可以达到负载均衡的目的，但需要虚拟主机服务商支持。

CNAME : 通常称别名指向

您可以为一个主机设置别名。
比如设置 test.mydomain.com，用来指向一个主机www.rddns.com ,那么以后就可以用test.mydomain.com来代替访问www.rddns.com了。

说明：·

  • CNAME的目标主机地址只能使用主机名，不能使用IP地址；
  • 主机名前不能有任何其他前缀，如：http://等是不被允许的；
  • A记录优先于CNAME记录。即如果一个主机地址同时存在A记录和CNAME记录，则CNAME记录不生效。

MX记录 : 邮件交换记录

用于将以该域名为结尾的电子邮件指向对应的邮件服务器以进行处理。如：用户所用的邮件是以域名mydomain.com为结尾的，则需要在管理界面中添加该域名的MX记录来处理所有以@mydomain.com结尾的邮件。

说明：

  • MX记录可以使用主机名或IP地址；
  • MX记录可以通过设置优先级实现主辅服务器设置，“优先级”中的数字越小表示级别越高。
  • 也可以使用相同优先级达到负载均衡的目的；
  • 如果在“主机名”中填入子域名则此MX记录只对该子域名生效。

附加说明：

  1. 负载均衡服务器负载均衡(Server Load Balancing，SLB)是指在一系列资源上面智能地分布网络负载。负载均衡可以减少网络拥塞，提高整体网络性能，提高自愈性，并确保企业关键性应用的可用性。当域名的MX记录有多个目标地址且优先级相同时，表示轮循，可以达到负载均衡的目的，但需要邮箱服务商支持。

NS记录:指向DNS子域名

服务器解析记录, 用来表明由哪台服务器对该域名进行解析。这里的NS记录只对子域名生效。

例如用户希望由12.34.56.78 这台服务器解析 news.mydomain.com，则需要设置 news.mydomain.com 的NS记录。

说明：

  • “优先级”中的数字越小表示级别越高；
  • “IP地址/主机名”中既可以填写IP地址，也可以填写像 ns.mydomain.com 这样的主机地址，但必须保证该主机地址有效。

如，将news.mydomain.com的NS记录指向到 ns.mydomain.com，在设置NS记录的同时还需要设置ns.mydomain.com的指向，否则NS记录将无法正常解析；

  • NS记录优先于A记录。

即，如果一个主机地址同时存在NS记录和A记录，则A记录不生效。这里的NS记录只对子域名生效。

1.4Cloudflare Workers简介

Cloudflare Workers的名称来自Web Workers，更具体地说是Service Workers，一个用于在web浏览器后台运行并拦截HTTP请求的脚本的W3C标准API。Cloudflare Workers是针对相同的标准API编写的，但是是在Cloudflare的服务器上运行，而不是在浏览器中运行。 以下是您可以使用的工具：
- 使用最新的标准语言功能执行任意JavaScript代码。
- 拦截和修改HTTP请求和响应URL，状态，标头和正文内容。
- 直接从您的Worker响应请求，或将其转发到其他地方。
- 将HTTP请求发送到第三方服务器。
- 以串行或并行方式发送多个请求，并使用响应组成对原始请求的最终响应。
- 在响应已经返回到客户端之后发送异步请求（例如，用于记录或分析）。
- 控制其他Cloudflare功能，例如缓存行为。

1.5HTTP 强制跳转 HTTPS

HTTP是明文传输，数据很容易被窃取甚至篡改，HTTPS在HTTP的基础上设置了SSL证书，对传输中的数据进行机密，确保数据的安全性及真实性。
其次，现在各大浏览器都在推进HTTPS的发展，SEO方面都给了HTTPS较好的排名，HTTP网站则给出了“不安全”的提示，很影响用户信任度和体验感。
如果你的网站加载了大量资源，那么实施HTTPS是必须的。
默认情况下配置完成后 HTTPS 是开启的，会在 24 小时内给你配的站点颁发 https 证书，并且证书是自动更新的。我们可以在 CloudFlare 控制台配置 HTTP 强制跳转 HTTPS(详见下文配置)。

1.6hexo Gitalk配置proxy的几种方法

1.6.1jsdelivr cdn

这种也是hexo-theme-matery主题中默认配置的cdn,但是在比较新的更新中，作者已经声明Jsdelivr 已经被封了。

所以主题模版中的cors-anywhere反向代理已不能直接使用，而Gitalk的默认proxy为

Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.

直接导致了代理访问Github时会直接forbidden，也就是Request failed with status code 403。

1.6.2netnr-proxy

可以更换反向代理，直接白嫖别人代理。即：

proxy: https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token

但是人人都想白嫖，因此，有时候代理的速度甚至比不开代理更慢。也就可能导致出现429。

429的含义是收到了太多的请求，一开始还没意识到白嫖代理的问题，一直在想429就该怎么解决。知道后来才恍然大悟，我会白嫖，许多人也会白嫖，这个代理很多人都会使用，但是使用次数有限制，就会造成过多的人使用请求。

比较好的解决办法就是不偷懒,也就是关于Gitalk后出现403错误讨论出的一种比较简单的解决方案，自己部署反向代理。

1.6.3Cloudflare Workers

首先创建一个账号

Cloudflare 中国官网

image-20220831095726221

注册成功之后就可以使用刚刚注册的邮箱和密码进行登录了。

image-20220831100100506

新建一个workers即可。

image-20220831100552309

然后再config.yml中使用

例如我的

proxy: https://cloudflare-cors-anywhere.gitalkreslove.introduce.workers.dev/?https://github.com/login/oauth/access_token

2.使用CloudFlare Pages进行反代理

2.1新建一个仓库

这里不再重复贴图介绍，详情参考hexo图片配置这篇文章。

2.2创建一个新文件

在部署好的github项目的根路径新建一个名为_worker.js的文件，然后复制以下代码，在第五行单引号里改成你想要反代的网站。

注意，反代的网站不需要加https,http，需要遵守类似www.baidu.com的格式

export default {
  async fetch(request, env) {
    let url = new URL(request.url);
    if (url.pathname.startsWith('/')) {
      url.hostname = '反代地址'
      let new_request = new Request(url, request);
      return fetch(new_request);
    }
    return env.ASSETS.fetch(request);
  },
};

image-20220826223304545

点击保存

2.3在CloudFlare网站导航栏点击Pages

image-20220826223557883

image-20220826223657520

输入项目名称，其他不动，点击“Save and deploy”

image-20220826223754451

也可以不配置_worker.js，直接配置image-20220830092551552

点击save即可部署完成

image-20220826223909089

image-20220826223951909

image-20220830092744319

部署完成之后，原本访问是Beaumon的小博客鸭的网址可以替换成CloudFlare代理后的地址进行访问了，例如我的 https://blog-worker.pages.dev/。

或者使用域名访问： 是Beaumon的小博客鸭。

2.4域名注册

2.4.1PC注册

这里我选择了Freenom，可以免费申请顶级域名，最高12个月免费。

Freenom免费域名注册官网

image-20220831101121017

进行注册登录即可。有些博主说是必须得在没有登入账号的状态下，搜索域名，添加购物车，然后再注册。

我没有采纳，我是用了gmail邮箱注册成功之后，再去申请的，同样申请成功了，话不多说，上干货。

注意：注册时候尽量选择国外的邮箱，推荐gmail，还有就是得科学上网，因为它检测到你的ip地址，如果为国内ip，或者你搭了vpn，但是你的注册信息和你的vpn代理地址不一样，也同样会失败。我使用的chrome插件翻出去了，但是ip地址没变，在你购物车跳转的时候会没有反应，当你的vpn代理了ip地址时候，还会有另外一种错误，它会提示：“您的某些域由于技术错误而无法注册。这些域已被取消“

这个我暂时也没有找到一个好的解决办法

网上解决办法参考：安装Gooreplacer插件，这里我也装了，但因为vpn不给力，没改掉ip地址，因此我选择了在手机上进行注册。

1，打开浏览器的扩展程序把Gooreplacer启用。

2，在浏览器地址栏右侧点击这个插件的标志，就会打开它的设置主页。

3，在这个设置主页上面点击”重定向“标签，在上面添下如下设置。

image-20220831102347283

前期准备，生成一个美国人的信息和地址

点我在线生成美国人信息

例如：

image-20220831110635529

注册账号总结

1.1首先进入https://www.freenom.com 官网
1.2官网首先向下拉，找到合作伙伴的开发人员项。
1.3 打开 找到 今天就获得一个随机的域帐户！这 个按钮，进去就是注册页面。这就是直接注册账号的入口了
1.4输入邮箱（这里用国内的邮箱是不行的。需要国际邮箱或者美国邮箱。没有的可以用临时邮箱。临时邮箱直接在百度搜(为了安全性考虑不建议使用)，然后点击下方蓝色按钮。
1.5回到临时邮箱，刷新邮箱。然后会有一条邮件，打开freenom发来的邮件，打开里面的链接。
1.6进去以后发现啥都没有,再按照第二步操作，就会有一个信息表单要你填，这个时候就要用到一个特别重要的网站：美国个人信息生成网（百度即可）。将临时信息的内容填写到freenom（要一一对应]）（邮箱不改）。然后在最后两个编辑框内输入密码。勾选下方的选择框，在点击蓝色按钮。即可注册成功。

2.4.2手机注册

步骤如下：

1.开启vpn

vpn

2.访问官网地址注册

register
3.搜索想要注册的域名

search
4.选择域名

choose
5.选择时长(免费的最多12个月)

free12

6.确认订单

confirm
7.订单失败(被取消了，多试几次)

failure

8.订单成功

小tips:白天一般不容易成功，晚上几率更大一些(个人观点)

success

9.my Domains展示

image-20220831112356912

至此，域名注册成功

注册域名总结:

1.打开freenom官网 https://www.freenom.com
2.在首页的编辑框输入域名，比如你想要springweb.*的域名，那就输入springweb，然后点击CheckAvailability
3.进去后，选择一个免费的后辍，官网提供了cf,ml,ga,tk等几种可供选择。选择好之后，点击Checkout，让后选择选择域名到期时间，推荐12个月。然后点击Continue。
4.点击确认订单
5.成功/失败(网站有防滥用策略，挂梯子可能会提示您的某些域由于技术错误而无法注册。这些域已被取消。)，若失败，多试几次，或者到晚上再行测试
注意：你的ip地址和你的个人信息里面不匹配（如果确保ip和个人信息是同一个国家，还是没有办法。把ip地址的街道地址填进去，或者换美国地址ip，美国ip好像更容易通过）

3.域名解析配置

3.1新增站点

在cloudflare中点击Websites，然后点击Add a Site,将刚注册的域名填入即可。

image-20220831112840827

例如：

image-20220831134656004

3.2选择free计划

image-20220831134747981

3.3直接continue

image-20220831134841843

3.4设置DNS记录

点击了continue后，会提示：如果没有 DNS 记录，Cloudflare 将无法激活您的站点。最好现在设置 DNS 记录。

image-20220831140527666

3.5 指向 Cloudflare 的名称服务器

点击confirm,会出现指向 Cloudflare 的名称服务器是激活过程中的关键步骤，Cloudflare 必须完成此操作才能优化和保护您的站点，域名服务器是您的主要DNS控制器，可识别您的域在 Internet 上的位置字样，Cloudflare 已经默认配置好，划到最下方点击完成，检查域名服务器即可。

image-20220831140801076

然后会有一个配置小建议，可以跳过，可以看一下。

image-20220831140943379

建议是

1.启用始终使用 HTTPS：将所有使用方案“http”的请求重定向到“https”
2.启用自动缩小：减少网站上 Javascript、CSS 和 HTML 源代码的文件大小。

image-20220831141035679

可以应用它的建议。

如果没有使用建议的话，也可以在Rules中自行添加规则。

image-20220831153931659

3.6使得域名在 Cloudflare 上活跃

在概览页面点击检查名称服务器(check nameservers)

image-20220831141412032

点击了提示Cloudflare 现在正在检查博蒙.tk 的名称服务器。请等待几个小时以获取更新。检查完之后，WebSites上的就会变为active。

3.7为域名配置配置DNS解析

3.7.1 查询github pages对应的ip地址

ip查询地址

输入username.github.io(github pages)进行检索

image-20220831154306202

3.7.2 添加记录

点击Add record,

选择type为A,Name为www,IPV4为刚刚查到的IPV4的地址

image-20220831154414330

再次点击Add record,

选择type为A,Name为@,IPV4为刚刚查到的IPV4的地址

或者直接选择type为CNAME,Namewww,Target为username.github.io。

3.8修改freenom默认的nameservers

将freenom默认的nameservers修改为cloudflare提供的nameservers。

3.9测试域名

配置完成之后打开github，选择对应的仓库，依次点击setting–>pages，输入Custom domain,点击save,等待检查。

image-20220831155113323

稍等一会儿，

image-20220831184704699

此时就可以打开浏览器输入beaumon.cf进行访问了。

image-20220831192834828

4.使用cloudflare workers进行反代理

4.1安装 Cloudflare 提供的部署程序 Wrangler

4.1.1安装 Wrangler

Wrangler 的项目地址：cloudflare wrangler 按照官方教程，使用 npm 安装 Wrangler ，在控制台输入

$ npm i @cloudflare/wrangler -g    #全局安装
$ # npm i @cloudflare/wrangler     #如果默认环境无法进行全局安装，可以使用此局部安装命令，在工程目录需使用npx调用

cargo 方式安装 Wrangler（未使用）

$ cargo install wrangler

4.1.2获取 Cloudflare api 密钥

在Cloudflare 的 api 控制台中创建一个新的 api-token，点击新建 api-token，选择使用模板（Start with a template）。

使用Edit Cloudflare Workers模板创建新的 api，配置相应的权限即可获得一个新的api-tokens，保存备用。

img

4.1.3配置 Wrangler 全局密钥

控制台执行

$ wrangler config

输入刚才保存的api-tokens运行验证即可完成全部配置。

4.2初始化 Wrangler

在工程目录终端中执行

$ wrangler init --site my-static-site        #my-static-site替换为要创建的Works名称
# $ npx wrangler init --site my-static-site    #局部安装使用此命令，用法如上

执行此条命令会在工程目录中生成wrangler.toml和aworkers-site,其中wrangler.toml是工程中 Wrangler 的配置文件。

4.3配置 Wrangler

4.3.1简单设置 Wrangler.toml

默认生成的wrangler.toml如下，可依据设置

name = "my-static-site"               #此处为之前初始化填写的Workes名称
type = "webpack"
account_id = ""             # Cloudflare Account ID，去 Cloudflare 的控制面板找找
workers_dev = true          # 是否启用 workers.dev 子域名如果需要配置自己的域名，改为false
route = ""                  # Workers 所载的 Route
zone_id = ""                # 域名在 Cloudflare 的 Zone ID

[site]
bucket = "./public"           # 生成的 dist 路径，对于 Hexo 和 Hugo 来说就是 public
entry-point = "workers-site"

设置自定义域名时，可以在 wrangler 配置完成后，在域名管理中的 Workers 设置中添加对应的 Workers 路由，再将 SSL 安全级别调整为 Flexible，否则会遇到 SSL 526 错误。

4.3.2上传全站到 Cloudflare Workers

首先使用 Hexo 在工程目录生成一次静态文件，以产生public文件，如不生成则会下下一步上传中报错。

控制台中运行

wrangler preview --watch   # 上传并预览
wrangler publish           #上传并发布

提示以下即完成所有的运行操作。

Using namespace for Workers Site "__site-workers_sites_assets"
 Uploading site files
 Success
⬇️ Installing wranglerjs...
⬇️ Installing wasm-pack...
 Built successfully, built project size is 11 KiB.
 Successfully published your script to https://*.workers.dev    #这里就是生成的预览地址

打开你生成的地址进行访问即可。

文章作者: Beaumon
文章链接: https://beaumon.github.io/2022/08/31/cloudflare-githubpages-pei-zhi/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Beaumon !
cloudflare
赏
评论
  目录