CHUA实作指南 / 01查看步骤 ↗

阿 CHUA · CLOUDFLARE 实作教学

6个步骤把你的网站,放上网。

打开 Cloudflare,跟着下方截图做。

打开 Cloudflare ↗直接开始 ↓
先准备好网站文件夹或 ZIP,里面要有 index.html。没有文件?下载示范 ZIP ↓
01

打开 Cloudflare,找到 Pages

点这里登录 Cloudflare ↗。进入 Compute → Workers & Pages → Create application,再点下图的 Continue to Pages。

看准底部的 Continue to Pages,进入本课使用的 Pages 流程。
02

选择拖放上传

找到 Drag and drop your files,点击这一栏右侧的 Get started。

这一栏直接上传电脑里的 HTML、CSS、JavaScript 和图片。
03

给网站取一个名字

在 Project name 填入你自己的项目名称。建议用简短的英文小写、数字和连字符,例如 my-business-site。确认网址提示后,点击 Create project。

名称仅为填写示例,请使用你自己的名称,并留意系统提示。
04

把完整网站拖进去

把成品网站文件夹或 ZIP 拖进上传框;也可以点击 file 选 ZIP,或点击 folder 选文件夹。等待所有文件上传完成,再点击 Deploy site。

首页 index.html 应位于上传内容根目录。图片、样式等资源要一起上传。
05

打开网址,确认上线

在 Production Domains 点击你的网址。打开后检查文字、图片、按钮是否正常。这个链接就可以发给别人了。
想改免费网址的名字?看 Subdomain ↓

在项目的 Production Domains 找到正式网址;右上方 Create deployment 用来更新网站。
06

以后更新,回到同一个项目

修改网站后重新导出完整成品。打开原本的 Pages 项目,点击 Create deployment,选择 Production,上传新版本,再点击 Save and deploy。

Production 更新正式网站;Preview 用于预览。更新内容不需要重新创建项目。

怎么换 pages.dev 前面的名字?

免费的 Pages 网址建好后不能直接改名。想换名字,可以把网站发布到新项目。

  1. 新建项目。按第 1、2 步进入 Pages,选择拖放上传。
  2. 填新名字。在 Project name 输入想用的名字,确认画面显示的网址,点 Create project。
  3. 重新上传。拖入完整网站,点 Deploy site。打开新网址检查,再替换发给学员的旧链接。
名称仅为填写示例,请使用你自己的名称,并留意系统提示。

旧链接不会自动跳转。官方说明 ↗

已经有自己的域名?继续看 Custom Domain ↓

加一步 · 想用自己的网址时再做

Custom Domain:使用自己的域名

想让网址变成 www.yourbrand.com?先准备一个你已经拥有的域名,再跟着下面两张图操作。没有域名,可以继续用免费的 pages.dev 网址。

① 打开项目 → Custom domains

点击 Set up a custom domain。

先点 Custom domains 标签,再点蓝色 Set up a custom domain 按钮。

② 填入自己的域名 → Continue

在 Domain 输入你拥有的域名,例如 www.yourbrand.com,再点 Continue。

这里只填域名,不用加 https://,也不要填页面路径。

③ 按提示完成 DNS,等到可用再分享

DNS 就是把域名指向你的网站。Cloudflare 会提示需要设置的记录。使用根域名(例如 yourbrand.com)时,需要把域名加入 Cloudflare 并设置它提供的 nameservers;使用 www 等子域名时,按提示设置 CNAME。配置完成后,等域名状态显示 Active,打开新网址确认能用。

自有域名通常有注册/续费费用;不买域名也可以完成前面的 6 个步骤。查看官方域名说明 ↗

如果只是想改后台的项目名称

打开项目 → Settings → General → Name → Rename,填写新名称后点击 Save。这个操作只改后台名称,不会改变 pages.dev 网址。要改免费网址的名字,请看前面的 Subdomain 步骤;要使用自己购买的域名,再用 Custom domains。

READY TO SHARE

上线后,再检查这 4 件事。

分享项目的正式网址,例如 chua-pages-demo.pages.dev。带有部署编号的链接是某一次版本的专属地址。

打开 Cloudflare ↗

卡住了?从这里看。

首页打不开,或出现 404

检查 index.html 是否位于上传内容根目录,而不是多包了一层文件夹。确认上传的是成品网站,而非需要构建的源码。

图片不见了

确认图片有一起上传,路径和文件名大小写正确。上传完整文件夹,保留原本的目录结构。

项目名称不能用

根据名称输入框的提示调整名称。最终可用网址以 Cloudflare 显示的结果为准,不要直接照抄本课已使用的示范名。

改了内容,网址却还是旧的

确认新部署成功,而且选择了 Production。打开项目的正式网址,重新整理页面;不要停留在旧版本的专属链接。

这套方法适用于什么网站?

适用于已经导出的静态网站。需要服务器、数据库或登录服务的应用,需另外配置部署方式。本课只讲新的 Cloudflare 上传流程。