在CloudFlare免费搭建导航页的教程【仅限本站会员回复后查看】

【简介】

       Cloudflare是一家提供CDN、网络安全、DDos防御和域名服务的美国公司，简称“CF”。CF的 Worker 是 Cloudflare 提供的一个服务器less（无服务器）计算服务，我们编写一段代码（可以是Javascript、Typescript、Python等），把代码上传到worker上就可以部署到 Cloudflare 在全世界的 CDN 服务器节点上。 每当有访客请求worker地址时，距离访问者地理位置最近的CDN节点就会相应请求执行这段代码。

       CF真是个大善人，浑身都是宝，这次我们就来白嫖一下他家的 Worker 服务搭建一个导航页，好处就是你不需要购买VPS、服务器不用你维护、域名自带SSL证书、证书到期自动续约、域名可以免端口访问。

 

【前提条件】

※一个CloudFlare账号（如果还没账号的，请自行注册）

※一个托管在CloudFlare的域名

 

【操作步骤】

1、在浏览器打开【CloudFlare官方网站】，登录你的账号，点菜单上的“计算（Workers）”——“Workers和Pages”，再点“创建”；

 

 

2、找到“从Hello World!开始”，点“开始使用”；

 

 

3、这里随便起个名称，部署；

 

 

4、当看到显示“成功！您的项目已经部署到以下区域：全球”时，点“编辑代码”；

 

 

5、把worker.js里面的代码全部删除；

 

 

6、在下方链接点右键“另存为”下载到电脑上（不建议直接点开链接复制，否则代码里面的中文会显示乱码），用Notepad编辑器打开，复制全部代码（根据自己实际情况修改，具体看第14个步骤），到CF的worker.js里面粘贴（粘贴代码之前一定要先删除原有的内容），点“部署”；

 

 

 

7、看到显示“版本已保存”的时候，点返回键返回；

 

 

8、由于CF家Worker分配的域名在国内无法访问，因此需要绑定自己的域名才能访问，点：设置，域和路由，添加；

 

 

9、自定义域；

 

 

10、输入你要使用的域名，添加域；

 

 

10、变量和机密，添加；

 

 

11、变量名称写“NAV_LINKS”（这里是区分大小写的，不要写错），在“值”里面填写你要显示的导航页名称和链接（名称和链接的中间用英文小写状态的逗号间隔，每个链接单独一行，例如以下格式），再点“部署”：

群晖官网,https://www.synology.cn
GXNAS博客,https://wp.gxnas.com
GXNAS网盘,https://d.gxnas.com
我的NAS,https://192.168.1.100:5001
我的EMBY,http://192.168.1.100:8096

 

 

 

 

 

12、可以打开【这里】，查看显示的效果；

 

 

13、目前导航页实现的功能有：

✅ 详细天气（访问者所在城市、当前气温、体感温度、当前湿度、当前风速、未来 3 天天气）
✅ 白天/夜间模式切换
✅ 当前时间实时显示（24小时制）
✅ 导航链接以卡片式展示

 

14、可自定义的“个性化内容”在：
※浏览器标题栏内容在源代码第53行修改
※导航页头部内容在第187行修改
※页脚版权声明在第194行修改

 

15、博主并不懂编程，本教程使用的代码让AI帮我写的，如果你会编程，可在原基础上完善代码。