推荐使用cloudflare-pages-auth：轻松保护你的静态站点

于 2024-06-22 09:31:42 发布
阅读量417 收藏 5
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00012/article/details/139874607
版权

推荐使用cloudflare-pages-auth：轻松保护你的静态站点

cloudflare-pages-authBasic Authentication for Cloudflare Pages项目地址:https://gitcode.com/gh_mirrors/cl/cloudflare-pages-auth

Screenshot

项目简介

cloudflare-pages-auth 是一个基于 SvelteKit 的开源项目，能帮助你在部署到 Cloudflare 页面时对静态网站进行密码保护。无论你使用的框架是什么，这个功能都能独立工作，确保你的个人或企业站点安全无虞。

只需几个简单步骤，你就可以为你的站点加上一道防护屏障，让只有知道特定密码的人才能访问。

技术解析

这个项目的核心在于 functions 目录中的代码，它包含了处理密码验证的逻辑。通过设置环境变量 CFP_PASSWORD，你可以自定义访问你网站所需的密码。在 Cloudflare Pages 部署期间，该密码会被用于保护你的页面。

该项目利用了 SvelteKit 这个高效的前端构建工具，以及 Cloudflare 的 worker 功能来实现本地和远程的运行。当你在本地开发时，可以使用 wrangler 工具，配合指定的环境变量，模拟部署后的密码保护功能。

应用场景

  • 个人博客 - 保护未公开的文章或私人日记。
  • 原型演示 - 在产品正式发布前提供有限的预览。
  • 企业内部文档 - 创建私有的知识库或指南，只允许员工访问。
  • 测试站点 - 为测试团队提供一个受保护的空间进行功能测试。

项目特点

  1. 跨框架兼容 - 不局限于 SvelteKit，任何可部署至 Cloudflare Pages 的项目都适用。
  2. 简易配置 - 只需设置一个环境变量即可开启保护，无需复杂的安全配置。
  3. 本地模拟 - 利用 wrangler 进行本地开发时，也能体验到密码保护的效果。
  4. 高度定制化 - 你可以自定义登录页面模板和一些关键常量，如认证cookie的过期时间等。

总的来说，cloudflare-pages-auth 是一个强大且易于上手的解决方案，如果你正在寻找一种方法来保护你的 Cloudflare Pages 站点，不妨尝试一下这个项目。立即开始，给你的网页增添一层安全保障！

cloudflare-pages-authBasic Authentication for Cloudflare Pages项目地址:https://gitcode.com/gh_mirrors/cl/cloudflare-pages-auth

平依佩Ula
关注
Cloudflare-Proxy-Server:Cloudflare代理服务器
05-01
Cloudflare代理服务器是一种高效、安全的网络解决方案，它利用了Cloudflare的服务来提供内容分发、DDoS防护以及网站性能优化。Cloudflare代理服务器通过其全球数据中心网络将用户请求路由到最近的服务器，从而减少...
Cloudflare+Telegraph零成本搭建图传系统
weixin_42220704的博客
02-19 454
把项目functions文件夹内的文件添加到我们图床github仓库的functions文件夹内，再到Cloudflare重新部署即可。变量名分别是BASIC_USER和BASIC_PASS，分别代表管理员的用户名和密码，然后保存。可以输入图床域名+/admin路径就可以进入管理后台了。然后点击项目链接详情，管理部署-重新部署。没有密码情况下很容易被爬虫白嫖。项目，为我们网站加入密码认证。创建一个KV空间命名随意。设置管理后台登录验证。
将 Cloudflare 页面与 IPFS 结合使用
分享身边生活经验blog
09-29 1308
正如我们所提到的，IPFS 是“星际文件系统”的缩写。这个名字听起来像是科幻电影中的技术。在区块链中，一切都发生在节点上。这些节点可以相互通信并交换文件。上图精美地展示了 IPFS 网络。右边的图像代表一个集中式存储系统，其中所有数据都存储在一个集中式服务器上，所有其他计算机都请求集中式服务器访问数据。在 IPFS 中，数据分布在节点之间。它类似于区块链，因为它使用节点来贡献计算能力来验证交易。IPFS 有数千个连接到 IPFS 网络的单独节点，并共享它们的带宽以存储来自 IPFS 网络的文件。
使用Cloudflare Pages搭建静态网站
Yetta Daisy的博客
11-15 8191
本文同步发布于个人博客 前言 Cloudflare Pages是一个JAMstack平台，供前端开发人员协作和部署网站。使用 Cloudflare Pages 部署您的动态前端应用程序。页面速度超快，始终保持最新状态，并直接从您的 GitHub 帐户部署。支持常见JS框架，包括React，Vue，Gatsby和Hugo。 操作步骤 登录Cloudflare Pages 首先是登录，前往 pages.cloudflare.com 按照操作。 创建项目 点击创建项目，连接 GitHub 。 选择存储库 .
解决cloudflare pages部署静态页面发生404错误的问题
jiaohuizhuang6019的博客
10-28 1521
解决cloudflare pages部署静态页面发生404错误的问题
cloudflare-ddns-4padavan:使用cloudflare API为Padavan定制ddns shell脚本
05-13
Cloudflare-DDNS-4Padavan 是一个专门为Padavan路由器定制的动态DNS（DDNS）解决方案，利用Cloudflare的API来实现。这个项目的核心是通过Shell脚本来自动化更新路由器的公网IP地址，确保即使公网IP发生变化，用户也...
go-cloudflare-scraper:使用Otto解决Cloudflare挑战的golang http.Transport层
05-27
"github.com/cardigann/go-cloudflare-scraper" ) func main () { scraper , err := scraper . NewTransport ( http . DefaultTransport ) if err != nil { log . Fatal ( err ) } c := ...
cloudflare-purge-action：:wastebasket_selector:GitHub通过Cloudflare API清除网站缓存的操作
02-05
8. **配置和使用**：使用cloudflare-purge-action需要在GitHub仓库的配置文件中设置Cloudflare的API token和Zone ID。API token需要具有“Zone: Read”和“Zone: Purge Cache”权限，而Zone ID是你的Cloudflare域名...
cloudflare-ddns-script:CloudFlare ddns 树莓派IPV6 DDNS解决方案
05-06
CloudFlare DDNS script/Raspberry pi IPV6 DDNS Solution cloudflare ddns 脚本/树莓派IPV6 DDNS解决方案 中文 | 更新 概述 本脚本是基于cloudflare API的DDNS脚本，支持IPV4和IPV6，可通过网络方式和本地方式获取...
基于Java语言的蓝牙遥控器设计源码，支持键盘、鼠标、影音遥控器
10-05
该项目为基于Java语言的蓝牙遥控器设计源码，包含539个文件，涵盖307个Java源文件、120个XML配置文件、34个PNG图片文件、16个Gradle构建文件、12个Git忽略文件、9个文本文件、6个JAR包文件、5个JSON配置文件、5个JPG图片文件。该遥控器支持键盘、鼠标和影音控制功能，适用于多种场合。
数据手册-74HC573-datasheet.zip
10-05
数据手册-74HC573-datasheet.zip
苏州科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
c++的概要介绍与分析
10-05
关于C++的资源描述和项目源码，以下是一些关键信息： 资源描述 C++是一种广泛应用于开发高性能应用程序的编程语言，既有高级语言的特性，也有低级语言的效率。以下是C++学习资源的简要描述： 在线课程：如优达学城提供的C++中级课程，以及北京大学提供的C++程序设计和C++程序设计进阶课程，这些课程适合从零开始系统学习C++，涵盖从基础到高级的编程内容。 书籍：如《C++ Primer》、《Effective C++》和《C++标准库》等，这些书籍详细介绍了C++语言的基本概念和编程技术，适合作为自学或课堂教学的参考资料。 在线社区：如CSDN博客和Stack Overflow等，这些社区提供了丰富的C++编程教程、示例代码和问题解决方案，是学习和交流C++编程技术的重要平台。 开发工具：如Visual C++（VC）等集成开发环境（IDE），提供了编译器、调试器和其他工具，方便开发者进行Windows平台上的C++应用程序开发。 项目源码 由于项目源码通常包含大量的代码文件和资源文件，且涉及版权和知识产权问题，因此无法在此直接提供完整的项目源码。不过，以下是一些获取C++项目源码的
锻压成型机_三维3D设计图纸.zip
10-05
锻压成型机_三维3D设计图纸.zip
mmexport1728042361260.mp4
10-05
mmexport1728042361260.mp4
谷歌浏览器Linux版本google-chrome-stable-current-amd64.deb
10-05
谷歌浏览器Linux版本google-chrome-stable-current-amd64.deb
天津职业技术师范大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
牡丹江师范学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
基于GPS定位数据的运输车辆风险预估算法设计源码
最新发布
10-05
该项目是一款基于Python编写的运输车辆风险预估算法设计源码，包含20个文件，其中9个为Python源代码文件，5个为XML配置文件，2个为Git忽略文件，2个为Excel工作簿文件，以及其余文件类型各1个。该系统旨在通过GPS定位数据对运输车辆的风险进行有效预估，为运输安全管理提供技术支持。
vue时间格式转换yyyy-mm-dd HH:MM:ss
07-24
Vue.js 是一种用于构建用户界面的渐进式前端框架，由尤雨溪创建，并通过社区维护。虽然 Vue 自身并不直接处理数据格式化任务，但它能够很好地与其他库结合使用，如 moment.js 或 vue-filter 转换器插件，来进行日期时间格式化的操作。 对于时间 `yyyy-mm-dd HH:MM:ss` 的格式转换，通常需要借助 JavaScript 的内置方法或者专门的数据处理库。下面是如何使用 Vue.js 结合 moment.js 进行时间格式转换的一个示例： 首先，你需要安装并导入 moment.js 和一个 Vue.js 指令插件（例如 vue-filter），用于处理时间格式化功能： ```html <!-- 引入 moment.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <!-- 引入 vue-filter 插件，这里假设已经配置好了 --> <script src="path/to/vue.filter.js"></script> <!-- 使用自定义指令进行时间格式化 --> <script> import { format } from 'vue.filter'; // 假设这个是用于时间格式化的过滤器 export default { data() { return { dateStr: "2023-04-05 12:30:45", // 示例字符串时间 }; }, filters: { formatDate(value) { const date = moment(value); return date.format('YYYY-MM-DD HH:mm:ss'); // 格式化为 yyyy-mm-dd hh:mm:ss }, }, }; </script> ``` 在这个例子中: 1. **引入** `moment.js`: 这是一个强大的日期时间操作库。 2. **引入** `vue-filter.js`: 需要这个文件是因为我们要使用一个过滤器来自定义日期格式化。如果你没有这样的插件，你可以自己编写一个简单的过滤器或者使用其他如 `lodash` 提供的 `_.template()` 函数来实现类似的转换。 3. **使用`formatDate`过滤器**: 将 `dateStr` 数据属性传递给该过滤器，并应用到对应的 HTML 元素上。例如，在 `<p>` 标签内设置 `v-text="dateStr | formatDate"` 可以将原始字符串格式转换为 `'yyyy-mm-dd hh:mm:ss'` 格式。 ```html <p>{{ dateStr | formatDate }}</p> ``` 最后，运行此应用程序并将页面刷新，可以看到原始时间字符串已成功转换成指定格式。这种方式使得 Vue 应用程序可以轻松地展示和操作日期时间数据。 -
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

平依佩Ula

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值