CloudFlare on ifanticの小屋

Cloudpaste部署——在线剪贴板、图床、文件中转站

Sun, 22 Jun 2025 15:17:31 +0800

随便写写 ~ 项目在下面：

CloudPaste - 在线剪贴板 📋

基于 Cloudflare 的在线剪贴板和文件分享服务，支持 Markdown 编辑和文件上传

JavaScript

✨ 特点

📝 Markdown 编辑与分享

强大的编辑器：集成 Vditor，支持 GitHub 风格的 Markdown、数学公式、流程图、思维导图等
安全分享：内容可设置访问密码保护
灵活时效：支持设置内容过期时间
访问控制：可限制最大查看次数
个性化：自定义分享链接及备注
支持文本 Raw 直链：类似 gihub 的 Raw 直链，用于 yaml 配置文件来启动的服务
多格式导出：支持 PDF、Markdown、HTML、PNG 图片、Word 文档导出
便捷分享：一键复制分享链接和生成二维码
自动保存：支持自动保存草稿功能

📤 文件上传与管理

多存储支持：兼容多种 S3 存储服务 (Cloudflare R2、Backblaze B2、AWS S3 等)
存储配置：可视化界面配置多个存储空间，灵活切换默认存储源
高效上传：通过预签名 URL 直接上传至 S3 存储，多文件上传
实时反馈：上传进度实时显示
自定义限制：单次上传限制和最大容量限制
元数据管理：文件备注、密码、过期时间、访问限制
数据分析：文件访问统计与趋势分析
服务器直传：支持调接口进行文件上传、下载等操作

🛠 便捷的文件/文本操作

统一管理：支持文件/文本创建、删除和属性修改
在线预览：常见文档、图片和媒体文件的在线预览与直链生成
分享工具：生成短链接和二维码，便于跨平台分享
批量管理：文件/文本批量操作与显示

🔄 WebDAV 和挂载点管理

WebDAV 协议支持：通过标准 WebDAV 协议访问和管理文件系统
网络驱动器挂载：支持部分第三方客户端直接挂载
灵活的挂载点：支持创建多个挂载点，连接不同的存储服务
权限控制：精细的挂载点访问权限管理
API 密钥集成：通过 API 密钥授权 WebDAV 访问
大文件支持：自动使用分片上传机制处理大文件
目录操作：完整支持目录创建、上传、删除、重命名等操作

🔐 轻量权限管理

管理员权限控制

系统管理：全局系统设置配置
内容审核：所有用户内容的管理
存储管理：S3 存储服务的添加、编辑与删除
权限分配：API 密钥的创建与权限管理
数据分析：完整的统计数据访问

API 密钥权限控制

文本权限：创建/编辑/删除文本内容
文件权限：上传/管理/删除文件
存储权限：可选择特定的存储配置
读写分离：可设置只读或读写权限
时效控制：自定义有效期（从小时到月）
安全机制：自动失效与手动撤销功能

💫 系统功能

适配性强：响应式设计，适配移动设备和桌面
多语言：中/英文双语界面支持
视觉模式：明亮/暗黑主题切换
安全认证：基于 JWT 的管理员认证系统
离线体验：PWA 支持，可离线使用和安装到桌面

🚀 部署教程

前期准备

在开始部署前，请确保您已准备以下内容：

Cloudflare 账号（必需）
如使用 R2：开通 Cloudflare R2 服务并创建存储桶（需绑定支付方式）
其他 S3 存储服务的配置信息：
- S3_ACCESS_KEY_ID
- S3_SECRET_ACCESS_KEY
- S3_BUCKET_NAME
- S3_ENDPOINT

开始部署

获取 Cloudflare API 令牌

访问 Cloudflare Dashboard
创建新的 API 令牌
选择"编辑 Cloudflare Workers"模板，并添加 D1 数据库编辑权限

获取cloudflare account ID：

配置 GitHub 仓库

Fork 或克隆仓库 https://github.com/ling-drag0n/CloudPaste
进入您的 GitHub 仓库设置
转到 Settings → Secrets and variables → Actions → New Repository secrets
添加以下 Secrets：

Secret 名称	必需	用途
`CLOUDFLARE_API_TOKEN`	✅	Cloudflare API 令牌（需要 Workers、D1 和 Pages 权限）
`CLOUDFLARE_ACCOUNT_ID`	✅	Cloudflare 账户 ID
`ENCRYPTION_SECRET`	❌	用于加密敏感数据的密钥（如不提供，将自动生成）

后端部署：

然后按照同样的步骤，部署前端：

后端部署完成后，在cloudflare pages里查看后端地址：

复制地址，回到前端 Cloudflare Pages 控制面板设置环境变量：

名称：VITE_BACKEND_URL
值：刚刚部署的后端 Worker URL（如 https://cloudpaste-backend.your-username.workers.dev），末尾不带"/", 同时建议使用自定义的 worker 后端域名。
一定要完整的填写后端域名, https://xxxx.com 格式

重要步骤：随后要再次运行一遍前端的工作流，以便完成后端域名加载！！！

⚠️ 安全提示：请在系统初始化后立即修改默认管理员密码（用户名: admin, 密码: admin123）。

R2 API 相关获取及跨域配置

登录 Cloudflare Dashboard
点击 R2 存储，创建一个存储桶
创建 API 令牌

创建后把全部数据都保存好，后续要填写密钥ID和密钥
配置跨域规则：点击对应存储桶，点击设置，编辑 CORS 策略，如下所示：

1[
2  {
3    "AllowedOrigins": ["http://localhost:3000", "https://根据自己的前端域名来替代"],
4    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
5    "AllowedHeaders": ["*"],
6    "ExposeHeaders": ["ETag"],
7    "MaxAgeSeconds": 3600
8  }
9]

注意！！！

编辑 CORS 策略那一块的前端域名最后不能有 /，否则跨域配置会失败！我配置报错查了好久都没查到什么原因，最后莫名把反斜杠去掉就好了。

最后在管理页配置一下s3存储和挂载，就可以当文件中转站使用啦！

用 CF Workers 加密文章

Mon, 07 Apr 2025 11:21:13 +0800

前言

之前在这篇文章里加入了给文章进行密码加密的功能。

但是不用脑子想都知道，这种加密方式只是掩耳盗铃图一乐。为什么呢？来看一下它的实现原理：

前端密码存储：

1const correctPassword = {{ .Params.password }};

这里的密码是从 Hugo 的文章前置参数 (front matter) 中获取的，直接插入到 JavaScript 代码中。

用户输入密码：

1const enteredPassword = prompt('请输入文章密码：');

使用浏览器内置的 prompt 弹窗，让用户输入密码。

密码校验：

 1if (enteredPassword !== correctPassword) {
 2    alert('密码错误！');
 3    if (history.length <= 1) {
 4        window.opener = null;
 5        window.open('', '_self');
 6        window.close();
 7    } else {
 8        history.back();
 9    }
10}

如果用户输入的密码与前端存储的密码不一致，则提示密码错误，并尝试关闭页面或返回上一页。

所以，存在的问题与安全隐患也就很明显了：

1. 密码明文暴露问题：

由于 Hugo 是静态网站生成器，所有模板渲染后的内容都是静态 HTML 和 JavaScript 文件。因此，{{ .Params.password }} 会直接以明文形式暴露在生成的 HTML 源代码中。用户只需打开浏览器的“查看源代码”或开发者工具，即可轻松看到密码明文，完全失去了密码保护的意义。

2. 前端校验不安全：

纯前端的密码校验本质上是不安全的，因为前端代码完全暴露给用户，用户可以轻松绕过或修改校验逻辑。用户甚至可以直接在浏览器控制台中修改 JavaScript 变量，绕过密码检查。

例如，用户可以在控制台中执行：

1enteredPassword = correctPassword; // 直接绕过密码检查

3. 用户体验问题（次要）：

使用浏览器原生的 prompt 弹窗，界面不美观，用户体验较差。

那么一般来讲，要怎么解决呢？

1. 后端校验：

真正安全的密码保护必须在后端实现。静态网站本身无法安全地实现密码保护功能。
可以使用服务器端（如 Node.js、PHP、Python 等）实现密码校验，只有密码正确时才返回文章内容。

2. 第三方服务或 API 校验：

如果一定要使用静态网站，可以考虑使用第三方服务（如 Netlify Identity、Firebase Authentication）实现安全的身份验证和密码保护。

3. 客户端加密（次优方案）：

如果一定要纯前端实现，可以考虑使用客户端加密方案（如 AES 加密），密码不直接暴露在源码中，而是存储加密后的内容，用户输入密码后再解密内容。
但即使如此，密钥管理仍然是个问题，安全性仍然有限。

然而，Hugo 是静态网站生成器，生成的内容都是静态文件；Cloudflare Pages 作为一个静态网站托管服务，专门用于托管静态内容（HTML、CSS、JS 等），并不支持动态后端代码（如 PHP、Node.js 等）。

应用到 Cloudflare Pages 上面，这些加密手段如何呢？

一、后端校验（不可行）

原因：Cloudflare Pages 仅支持静态文件托管，不支持运行后端代码（如 Node.js、PHP、Python 等）。
结论：无法直接在 Cloudflare Pages 上实现后端密码校验。

二、第三方服务或 API 校验（推荐，可行）

虽然 Cloudflare Pages 本身不支持后端代码，但你可以借助第三方服务实现安全的密码保护：

实现思路：

使用第三方身份验证服务（如 Firebase Authentication、Auth0、Netlify Identity 等）实现用户登录和密码保护。
用户访问页面时，前端调用第三方服务的 API 进行身份验证，验证通过后再加载受保护的内容。
受保护的内容可以存储在 Cloudflare Pages 上，但内容本身是加密的，只有通过第三方服务验证后才能解密显示。

优点：

安全性高，密码不会暴露在前端代码中。
用户体验较好，支持多种登录方式（邮箱、Google、GitHub 等）。

缺点：

需要额外的第三方服务，增加了一定的复杂性。

三、客户端加密方案（可行，但安全性有限）

实现思路：

使用 AES 等对称加密算法，在发布文章前对文章内容进行加密。
加密后的内容存储在 Hugo 生成的静态页面中。
用户访问页面时，输入密码后，前端 JavaScript 使用用户输入的密码尝试解密内容。
如果密码正确，内容解密成功并显示；密码错误则无法解密，显示错误提示。

具体实现步骤：

在本地使用 AES 加密工具（如 CryptoJS）对文章内容进行加密。
将加密后的内容放入 Hugo 的 Markdown 文件或模板中。
在 Hugo 模板中引入 CryptoJS 库，用户输入密码后尝试解密内容。

示例代码（简化版）：

 1<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
 2<script>
 3  const encryptedContent = "{{ .Params.encryptedContent }}"; // 加密后的内容
 4  const password = prompt("请输入密码：");
 5  try {
 6    const bytes = CryptoJS.AES.decrypt(encryptedContent, password);
 7    const originalText = bytes.toString(CryptoJS.enc.Utf8);
 8    if (!originalText) throw new Error("解密失败");
 9    document.getElementById("content").innerHTML = originalText;
10  } catch (e) {
11    alert("密码错误或解密失败！");
12  }
13</script>
14<div id="content"></div>

优点：

不需要额外的第三方服务，纯静态实现。
密码不会直接暴露在源码中（但加密后的内容仍然暴露）。

缺点：

安全性有限，攻击者仍然可以暴力破解或尝试解密。
用户体验一般，且每次修改内容都需要重新加密。

Hugo Encryptor 加密

还有这个Hugo的加密项目：

Hugo Encryptor

Hugo-Encryptor 是一款能够帮助作者保护文章内容的工具。它使用 AES-256 来对文章的内容进行加密，并且通过在文章中嵌入内联 JavaScript 代码来验证读者输入的密码是否正确。没有正确的文章密码，读者将无法看到文章的加密内容。

Python

它的实现原理是：

在 Hugo 构建阶段（本地构建时），使用 AES 算法对文章内容进行加密。
加密后的内容以密文形式存储在生成的静态 HTML 文件中。
用户访问页面时，前端 JavaScript 提示用户输入密码，输入密码后尝试解密内容。
如果密码正确，内容解密成功并显示；密码错误则无法解密，提示错误。

这种方式属于我们之前提到的客户端 AES 加密方案。

由于 Cloudflare Pages 是纯静态托管服务，hugo_encryptor 生成的内容也是纯静态的 HTML 和 JavaScript 文件，完全适合 Cloudflare Pages。而且 hugo_encryptor 不需要任何后端代码或动态服务，完全依靠客户端 JavaScript 解密，理论上是适合 Cloudflare Pages 这种静态托管环境的。

缺点也很明显：

密文内容仍然暴露在前端，理论上存在暴力破解的可能性（但 AES 算法本身安全性较高，暴力破解难度较大）。
密码管理和更改内容时需要重新加密，稍显麻烦。

主要是每次修改提交都要加密一次，实在是有点不胜其烦，于是不想用这个方法。

Workers 加密

所以，还有什么方法吗？那当然是~~继续薅赛博佛祖的羊毛啦！~~用万能的 Cloudflare Workers 啦！

新建一个 Workers，然后替换成以下代码：

  1// 内存中存储随机令牌与路径的映射关系
  2const tokenStore = new Map();
  3
  4async function handleRequest(request, env) {
  5  const url = new URL(request.url);
  6  const pathname = url.pathname;
  7
  8  // 强制 HTTPS 协议访问
  9  if (url.protocol !== "https:") {
 10    url.protocol = "https:";
 11    return Response.redirect(url.toString(), 301);
 12  }
 13
 14  // 配置受保护的文章
 15  const ARTICLES = {
 16    "/post/your-private-post/": { // 你要加密的文章URL
 17      password: env.PRIVATE_POST_PASSWORD, // 环境变量名称
 18      authType: "permanent", // 永久授权
 19    },
 20    "/post/your-secret-post/": { // 你要加密的文章URL
 21      password: env.SECRET_POST_PASSWORD, // 环境变量名称
 22      authType: "temporary", // 临时授权
 23    },
 24  };
 25
 26  const articleConfig = ARTICLES[pathname];
 27  if (!articleConfig) {
 28    return fetch(request); // 如果路径未配置保护，直接返回原始请求
 29  }
 30
 31  const { password: correctPassword, authType } = articleConfig;
 32
 33  // 检查 Cookie 中的随机令牌
 34  const cookie = request.headers.get("Cookie") || "";
 35  const cookies = Object.fromEntries(cookie.split("; ").map((c) => c.split("=")));
 36  const token = cookies[`auth_${pathname}`];
 37
 38  if (token && tokenStore.get(token) === pathname) {
 39    // 如果令牌有效，返回原始请求
 40    return fetch(request);
 41  }
 42
 43  // 如果是 POST 请求，验证密码
 44  if (request.method === "POST") {
 45    const formData = await request.formData();
 46    const enteredPassword = formData.get("password");
 47
 48    if (enteredPassword === correctPassword) {
 49      // 密码正确，生成随机令牌
 50      const randomToken = crypto.randomUUID();
 51      tokenStore.set(randomToken, pathname); // 将令牌与路径映射存储
 52
 53      // 设置 Cookie
 54      const headers = {
 55        Location: pathname,
 56      };
 57      if (authType === "permanent") {
 58        // 永久授权：Cookie 有效期 1 年
 59        headers["Set-Cookie"] = `auth_${pathname}=${randomToken}; Path=${pathname}; HttpOnly; Secure; SameSite=Lax; Max-Age=31536000`;
 60      } else if (authType === "temporary") {
 61        // 临时授权：Cookie 有效期 1 分钟
 62        headers["Set-Cookie"] = `auth_${pathname}=${randomToken}; Path=${pathname}; HttpOnly; Secure; SameSite=Lax; Max-Age=1`;
 63      }
 64
 65      return new Response(null, {
 66        status: 302,
 67        headers,
 68      });
 69    } else {
 70      // 密码错误，返回密码输入页面
 71      return new Response(passwordPage(pathname, true), {
 72        headers: { "Content-Type": "text/html;charset=UTF-8" },
 73      });
 74    }
 75  }
 76
 77  // 默认返回密码输入页面
 78  return new Response(passwordPage(pathname), {
 79    headers: { "Content-Type": "text/html;charset=UTF-8" },
 80  });
 81}
 82
 83function passwordPage(pathname, error = false) {
 84  return `
 85  <!DOCTYPE html>
 86  <html lang="zh">
 87  <head>
 88    <meta charset="UTF-8">
 89    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 90    <title>请输入密码</title>
 91    <style>
 92      body {
 93        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 94        background-image: url('your img url'); //你的验证页面背景图URL
 95        background-size: cover;
 96        background-position: center;
 97        background-repeat: no-repeat;
 98        display: flex;
 99        justify-content: center;
100        align-items: center;
101        height: 100vh;
102        margin: 0;
103        padding: 0;
104      }
105      body::before {
106        content: '';
107        position: fixed;
108        top: 0;
109        left: 0;
110        width: 100%;
111        height: 100%;
112        z-index: -1;
113        backdrop-filter: blur(2px);
114        background-color: rgba(255, 255, 255, 0.7);
115      }
116      .container {
117        background-color: rgba(255, 255, 255, 0.9);
118        padding: 30px;
119        border-radius: 10px;
120        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
121        text-align: center;
122        width: 90%;
123        max-width: 320px;
124        margin: 15px;
125      }
126      h3 {
127        margin-bottom: 20px;
128        color: #333;
129        font-size: 18px;
130      }
131      input[type="password"] {
132        width: 90%;
133        padding: 12px;
134        margin-bottom: 15px;
135        border-radius: 5px;
136        border: 1px solid #ccc;
137        font-size: 16px;
138      }
139      button {
140        padding: 12px 24px;
141        background-color: #4CAF50;
142        color: white;
143        border: none;
144        border-radius: 5px;
145        cursor: pointer;
146        font-size: 16px;
147        width: 100%;
148      }
149      button:hover {
150        background-color: #45a049;
151      }
152      .error {
153        color: red;
154        margin-bottom: 15px;
155        font-size: 14px;
156      }
157    </style>
158  </head>
159  <body>
160    <div class="container">
161      <h3>此文章受密码保护，请输入密码：</h3>
162      ${error ? "<p class='error'>密码错误，请重试！</p>" : ""}
163      <form method="POST">
164        <input type="password" name="password" required placeholder="请输入密码" />
165        <button type="submit">提交</button>
166      </form>
167    </div>
168  </body>
169  </html>
170  `;
171}
172
173export default {
174  async fetch(request, env) {
175    return handleRequest(request, env);
176  },
177};

实现原理

实现原理：

身份验证流程：

用户访问受保护的文章路径
系统检查用户是否有有效的认证令牌(Cookie)
如果没有有效令牌，显示密码输入页面
用户输入密码后提交，系统验证密码
密码验证成功后，生成随机令牌并设置对应的 Cookie
最后重定向用户到原始文章页面

令牌管理：

使用内存中的 Map(tokenStore) 存储令牌与路径的映射
支持两种授权类型：永久授权（Cookie 有效期1年）和临时授权（Cookie 有效期1分钟）

使用方法

部署好 Workers 后在 设置 -> 变量和机密 点击 添加

变量名称 一定要大写，对应的是 Workers 里的 PRIVATE_POST_PASSWORD 或者 SECRET_POST_PASSWORD（如 TEST），值就是你要加密文章所要设定的密码（如 password）。

变量名称一定要大写！变量名称一定要大写！变量名称一定要大写！

然后同样是在设置里，选择第一项 域和路由，添加 路由，区域 选你的主域名，路由填你要加密的文章路径，就完成咯！

举例与测试

以我测试的两篇文章为例：

首先创建了两篇测试文章，一篇用于永久验证的URL是 /post/cf-auth，另一篇用于单次验证的URL是 /post/cf-pwd。然后在 Workers 里修改参数：

 1// 配置受保护的文章
 2const ARTICLES = {
 3  "/post/cf-auth/": { // 你要加密的文章URL
 4    password: env.AUTH_PWD, // 环境变量名称
 5    authType: "permanent", // 永久授权
 6  },
 7  "/post/cf-pwd/": { // 你要加密的文章URL
 8    password: env.TEST_PWD, // 环境变量名称
 9    authType: "temporary", // 临时授权
10  },
11};

修改完部署后去配置环境变量：

添加路由

区域选择你的博客域名，我这里是 iftcblog.me。然后路由要填你要加密的文章路径，但是前面不要加 https://，也不要把后面的星号 * 忘了。

前面不要加 https://！记得后面要加上星号 *！

然后访问永久验证文章与短暂验证文章，就搞定啦！（密码已经写在上面了哦）

小结

当然还是有潜在的安全问题，如 CSRF 保护和适当的令牌存储机制等等。但是我又不是专业的，感觉做到这个程度已经差不太多了。顺便贴一篇查到的关于 cookies 的文章：Cookie 的 SameSite 属性 | 阮一峰的网络日志
至于页面的美化么，我又完全不懂前端。不想折腾了，先这么将就着吧，等日后有好的想法再说。

加速我的博客

Fri, 07 Mar 2025 16:58:18 +0800

首先你需要确定要使用的优选域名。你可以使用自建的优选域名，也可以使用网友公益维护的优选域名。更多优选内容参考 CloudFlare优选。

为 Workers 项目使用优选域名

由于我的文件快递柜是用 Worker 搭的，因此本教程演示的 Worker 使用的自定义域名示例为 files.ifantic.me 。

设置自定义域 CNAME 记录至优选域名

给你将要使用的域名 ifantic.me，添加一个 CNAME 类型的解析记录，名称为所需的自定义域示例 files，目标为优选域名示例 visa.cn （你想选哪个就选哪个）。点击保存：

重要提示：不要打开小黄云（Cloudflare 的代理功能）！！！

给 Workers 项目添加路由

选中 ifantic.me 域名后，左侧选择 Workers 路由 > 添加路由；

路由填入 Worker 项目最终使用的自定义域 files.ifantic.me/*，Worker 选中对应的Worker项目名后点击保存即可。

注意自定义域末尾必须加上 /*
，也就是 files.ifantic.me/* ！！！

为 Pages 项目使用优选域名

本教程演示的 Pages 使用我的博客，自定义域名示例为 blog.ifantic.me。

为 Pages 项目添加自定义域

先给 Pages 项目添加自定义域，等待自定义域生效。

使用华为云国际版-云解析服务 DNS

注册华为云国际版-云解析服务 DNS（国际版不需要实名，如果注册时频繁跳转国内版本，请打开全局代理模式注册）。

注册华为云国际版

设置您的安全手机(跳过即可)

开通华为云

跳转到完善信息页面说明注册已完成，不用管他，无视绑定提示即可。

添加自定义域至云解析服务 DNS

点击前往云解析服务 DNS，点击公网域名

点击右上角创建公网域名

填入需要优选的 Pages 自定义域名 blog.ifantic.me，然后点击确定

点击 blog.ifantic.me 的管理解析

可能有人发现了，我说的是 blog.ifantic.me 的解析，怎么图中变成了 ifantic.me 的解析呢？待会你就会知道了，你先照着帖子配置下去 🤷

点击右上角的添加记录集

新添加一个 CNAME 记录，线路类型为全网默认，记录值为 Pages 项目分配的域名 hb-81t.pages.dev。

再添加一个 CNAME 记录，线路类型为地域解析 > 中国大陆，记录值为优选域名 visa.cn。

将第一条 NS 记录的4条 NS 记录值复制出来保存，或者你就用我的。

1ns1.huaweicloud-dns.com
2ns1.huaweicloud-dns.cn
3ns1.huaweicloud-dns.net
4ns1.huaweicloud-dns.org

设置自定义域NS 记录至华为云 NS 记录

踩坑

当初我配置的R2图床是用自定义域 static.blog.ifantic.me，但是用了这个pages加速博客之后，图床会报错用不了。华为云cdn折腾了一天，在网上找了一番也没有解决办法，只能把R2换成 static.houhuayuan.me，将就着用吧 🤷

有哪位大佬知道的，欢迎评论交流一下~

参考链接

使用优选域名加速-Workers-Pages-项目

使用HuggingFace部署FileCodeBox

Mon, 24 Feb 2025 16:38:34 +0800

项目地址：

https://github.com/vastsa/FileCodeBox

前期准备：

一个cloudflare账号
一个huggingface账号

创建`dockerfile`

注册好huggingface后，点击头像新建一个空间：

选择用docker部署：

然后划到最底，点击左下角的Create Space，新建一个dockerfile

填入以下内容，然后点击Commit new file to main

 1FROM lanol/filecodebox:beta
 2
 3RUN apt-get update && apt-get install -y \
 4    python3-pip \
 5    git \
 6    && rm -rf /var/lib/apt/lists/*
 7
 8RUN pip3 install --no-cache-dir huggingface_hub datasets
 9
10RUN useradd -m -u 1000 user
11
12WORKDIR /app
13
14ENV HOME=/home/user \
15    PATH=/home/user/.local/bin:$PATH \
16    HF_HOME=/app/data/hf_cache \
17    PYTHONUNBUFFERED=1
18
19RUN mkdir -p /app/data && \
20    chown -R user:user /app/data
21
22COPY sync_data.sh /app/
23RUN chmod +x /app/sync_data.sh && \
24    chown user:user /app/sync_data.sh
25
26USER user
27
28EXPOSE 12345
29
30ENTRYPOINT ["/app/sync_data.sh"]

创建`sync_data.sh`文件

  1#!/bin/bash
  2
  3# 检查环境变量
  4if [ -z "$HF_TOKEN" ] || [ -z "$DATASET_ID" ]; then
  5    echo "Starting without backup functionality - missing HF_TOKEN or DATASET_ID"
  6    exec python main.py
  7fi
  8
  9# 登录HuggingFace (使用环境变量方式避免交互问题)
 10export HUGGING_FACE_HUB_TOKEN=$HF_TOKEN
 11
 12# 同步函数
 13sync_data() {
 14    while true; do
 15        echo "Starting sync process at $(date)"
 16        
 17        # 创建临时压缩文件
 18        cd /app
 19        timestamp=$(date +%Y%m%d_%H%M%S)
 20        backup_file="backup_${timestamp}.tar.gz"
 21        
 22        tar -czf "/tmp/${backup_file}" data/
 23        
 24        python3 -c "
 25from huggingface_hub import HfApi
 26import os
 27def manage_backups(api, repo_id, max_files=50):
 28    files = api.list_repo_files(repo_id=repo_id, repo_type='dataset')
 29    backup_files = [f for f in files if f.startswith('backup_') and f.endswith('.tar.gz')]
 30    backup_files.sort()
 31    
 32    if len(backup_files) >= max_files:
 33        files_to_delete = backup_files[:(len(backup_files) - max_files + 1)]
 34        for file_to_delete in files_to_delete:
 35            try:
 36                api.delete_file(path_in_repo=file_to_delete, repo_id=repo_id, repo_type='dataset')
 37                print(f'Deleted old backup: {file_to_delete}')
 38            except Exception as e:
 39                print(f'Error deleting {file_to_delete}: {str(e)}')
 40try:
 41    api = HfApi()
 42    api.upload_file(
 43        path_or_fileobj='/tmp/${backup_file}',
 44        path_in_repo='${backup_file}',
 45        repo_id='${DATASET_ID}',
 46        repo_type='dataset'
 47    )
 48    print('Backup uploaded successfully')
 49    
 50    manage_backups(api, '${DATASET_ID}')
 51except Exception as e:
 52    print(f'Backup failed: {str(e)}')
 53"
 54        # 清理临时文件
 55        rm -f "/tmp/${backup_file}"
 56        
 57        # 设置同步间隔
 58        SYNC_INTERVAL=${SYNC_INTERVAL:-7200}
 59        echo "Next sync in ${SYNC_INTERVAL} seconds..."
 60        sleep $SYNC_INTERVAL
 61    done
 62}
 63
 64# 恢复函数
 65restore_latest() {
 66    echo "Attempting to restore latest backup..."
 67    python3 -c "
 68try:
 69    from huggingface_hub import HfApi
 70    import os
 71    
 72    api = HfApi()
 73    files = api.list_repo_files('${DATASET_ID}', repo_type='dataset')
 74    backup_files = [f for f in files if f.startswith('backup_') and f.endswith('.tar.gz')]
 75    
 76    if backup_files:
 77        latest = sorted(backup_files)[-1]
 78        api.hf_hub_download(
 79            repo_id='${DATASET_ID}',
 80            filename=latest,
 81            repo_type='dataset',
 82            local_dir='/tmp'
 83        )
 84        os.system(f'tar -xzf /tmp/{latest} -C /app')
 85        os.remove(f'/tmp/{latest}')
 86        print(f'Restored from {latest}')
 87    else:
 88        print('No backup found')
 89except Exception as e:
 90    print(f'Restore failed: {str(e)}')
 91"
 92}
 93
 94# 主程序
 95(
 96    # 尝试恢复
 97    restore_latest
 98    
 99    # 启动同步进程
100    sync_data &
101    
102    # 启动主应用
103    exec python main.py
104) 2>&1 | tee -a /app/data/backup.log

然后划到最底，点击左下角的Commit new file to main

修改README.md

跟上面创建新文件一样，新建README.md文件，填入：

 1---
 2title: Filebox
 3emoji: 🚀
 4colorFrom: pink
 5colorTo: pink
 6sdk: docker
 7pinned: false
 8app_port: 12345
 9---
10
11Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

创建dataset数据库

记住你的数据库地址，格式：huggingface用户名称/dataset名称

创建HF-token

划到最底下点击Create token保存并记住你的token

在后台添加环境变量

查看你的dataset 对应填入 DATASET_ID

HF_TOKEN -> #你的token
DATASET_ID -> # 用户名/数据集名称
SYNC_INTERVAL -> # 同步时间（秒钟，推荐填3600）

点击App就能看到你的项目已经运行起来啦！

完成后可以在后端改密码，可外接webdav进行东西存储，重启spaces会拉取dataset数据库中的文件进行同步，不用担心数据丢失啦

1后端地址：/#/admin
2
3后台默认密码：FileCodeBox2023

在cloudflare进行反代

然后划到最底下点击部署

然后点击编辑代码，填入以下内容：

1export default {
2  async fetch(request, env) {
3    const url = new URL(request.url);
4    url.host = '你的地址';  # 注意地址不要有https://
5    return fetch(new Request(url, request))
6  }
7}

查看你项目的地址：

然后点击右边的部署，再在worker的设置里填入自定义域域名，就可以啦！

我的第一篇文章

Wed, 19 Feb 2025 18:00:00 +0800

准备工作

确保你已经有GitHub账号和cloudflare账号
一个托管在cf的域名

安装Git与Hugo

安装Git

Git官网 https://git-scm.com/downloads 一路下一步即可

安装Hugo

hugo 有两个版本，标准版和扩展版，推荐使用扩展版。

Github Releases https://github.com/gohugoio/hugo/releases 下载解压
我选择extended版本，如： hugo_0.144.0_windows-amd64.zip
放入指定目录如： D:\hugo\hugo.exe
添加系统变量
win+R输入sysdm.cpl → 高级 → 环境变量 → 系统变量找到Path变量 → 编辑 → 新建 → 将hugo.exe的目录加入，如： D:\hugo
确认安装成功
cmd中输入hugo version,输出以下即为成功

1C:\Users\User>hugo version
2hugo v0.144.0-b289b17c433aa8ebf8c73ebbaf4bed973ac8e4d5+extended windows/amd64 BuildDate=2025-02-17T16:22:31Z VendorInfo=gohugoio

新建Hugo博客

新建一个目录，用来存放博客的根目录，如： D:\hugo，之后都将这个目录称为根目录。
cmd命令，其中blog可以自定义，也是生成的文件夹名

1hugo new site blog

应用Hugo主题

1git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

可以看到如下文件结构

 1blog/  
 2├── archetypes/  该目录包含新内容的模板，查看[详细资料](https://gohugo.io/content-management/archetypes/)  
 3│   └── default.md  
 4├── assets/  该目录包含通常通过资产管道传递的全局资源。这包括图像、CSS、Sass、JavaScript 和 TypeScript 等资源。查看[详细资料](https://gohugo.io/hugo-pipes/introduction/)  
 5├── content/  该目录包含标记文件（通常是 Markdown）和构成站点内容的页面资源。查看[详细资料](https://gohugo.io/content-management/organization/)  
 6├── data/  该目录包含数据文件（JSON、TOML、YAML 或 XML），用于增强内容、配置、本地化和导航。查看[详细资料](https://gohugo.io/content-management/data-sources/)  
 7├── i18n/  该目录包含多语言站点的翻译表。查看[详细资料](https://gohugo.io/content-management/multilingual/)  
 8├── layouts/  layouts 目录包含用于将内容、数据和资源转换为完整网站的模板。查看[详细资料](https://gohugo.io/templates/)  
 9├── static/  该目录包含的文件将在您构建站点时复制到公共目录。例如：、 和验证站点所有权的文件。在引入页面捆绑包和资产管道之前，该目录还用于图像、CSS 和 JavaScript。  
10├── themes/  该目录包含一个或多个主题，每个主题都位于其自己的子目录中
11└── hugo.toml  站点配置，可能分为多个子目录和文件。对于配置最少的项目或不需要在不同环境中表现不同的项目，在项目根目录中命名的单个配置文件就足够了。查看[详细资料](https://gohugo.io/getting-started/configuration/#configuration-directory)

配置&美化

来到根目录\themes\hugo-theme-stack\exampleSite文件夹下，将hugo.yaml文件复制至根目录下，如果根目录下有别的配置文件如hugo.toml/JSON，将其删掉。然后打开hugo.yaml，根据模板进行修改。
为了打造更符合自己心意的站点，可能需要diy很多配置，所以可以将主题的资源复制到个人站点。在根目录文件夹下，cmd命令：

1xcopy themes\hugo-theme-stack\archetypes archetypes\ /E /I
2xcopy themes\hugo-theme-stack\assets assets\ /E /I
3xcopy themes\hugo-theme-stack\data data\ /E /I
4xcopy themes\hugo-theme-stack\i18n i18n\ /E /I
5xcopy themes\hugo-theme-stack\layouts layouts\ /E /I

其中favicon网站图标favicon.ico需要放到根目录\static下，然后配置是favicon: /favicon.ico
其中avatar侧栏头像avatar.png需要放到根目录\assets\img下，然后配置是src: img/avatar.png
如果需要搜索和归档栏，需要在主题模板根目录\themes\hugo-theme-stack\exampleSite\content\page中找到对应的.md文件并放到根目录同样的文件夹下如:根目录\content\page\search\index.md并按需修改。
接下来是样式的美化，供参考，根目录\assets\scss下新建custom.scss，并编辑：

  1//----------------------------------------------------
  2// 页面基本配色
  3:root {
  4    // 全局顶部边距
  5    --main-top-padding: 30px;
  6    // 全局卡片圆角
  7    --card-border-radius: 25px;
  8    // 标签云卡片圆角
  9    --tag-border-radius: 8px;
 10    // 卡片间距
 11    --section-separation: 40px;
 12    // 全局字体大小
 13    --article-font-size: 1.8rem;
 14    // 行内代码背景色
 15    --code-background-color: #f8f8f8;
 16    // 行内代码前景色
 17    --code-text-color: #e96900;
 18    // 暗色模式下样式
 19    &[data-scheme="dark"] {
 20      // 行内代码背景色
 21    --code-background-color: #f8f8f814;
 22      // 行内代码前景色
 23    --code-text-color: #e96900;
 24      // 暗黑模式下背景色
 25    //--body-background: #000;
 26      // 暗黑模式下卡片背景色
 27    //--card-background: hsl(225 13% 8% / 1);
 28    }
 29  }
 30  //------------------------------------------------------
 31  // 修复引用块内容窄页面显示问题
 32  a {
 33    word-break: break-all;
 34  }
 35
 36  code {
 37    word-break: break-all;
 38  }
 39
 40  //---------------------------------------------------
 41  // 文章封面高度
 42  .article-list article .article-image img {
 43    width: 100%;
 44    height: 200px !important;
 45    object-fit: cover;
 46
 47    @include respond(md) {
 48        height: 250px !important;
 49    }
 50
 51    @include respond(xl) {
 52        height: 285px !important;
 53    }
 54  }
 55
 56  //--------------------------------------------------
 57  // 文章内容图片圆角阴影
 58  .article-page .main-article .article-content {
 59    img {
 60      max-width: 96% !important;
 61      height: auto !important;
 62      border-radius: 8px;
 63    }
 64  }
 65
 66  //------------------------------------------------
 67  // 文章内容引用块样式
 68  .article-content {
 69    blockquote {
 70      border-left: 6px solid #d57b5e !important;
 71      background: #ffefdf;
 72    }
 73  }
 74  [data-scheme="dark"] {
 75    .article-content {
 76      blockquote {
 77        border-left: 6px solid #d57b5e !important;
 78        background: #d57c5e54;
 79      }
 80    }
 81  }
 82  // ---------------------------------------
 83  // 代码块样式修改
 84  .highlight {
 85    max-width: 102% !important;
 86    background-color: var(--pre-background-color);
 87    padding: var(--card-padding);
 88    position: relative;
 89    border-radius: 20px;
 90    margin-left: -7px !important;
 91    margin-right: -12px;
 92    box-shadow: var(--shadow-l1) !important;
 93
 94    &:hover {
 95      .copyCodeButton {
 96        opacity: 1;
 97      }
 98    }
 99
100    // keep Codeblocks LTR
101    [dir="rtl"] & {
102      direction: ltr;
103    }
104
105    pre {
106      margin: initial;
107      padding: 0;
108      margin: 0;
109      width: auto;
110    }
111  }
112
113  // light模式下的代码块样式调整
114  [data-scheme="light"] .article-content .highlight {
115    background-color: #fff9f3;
116  }
117
118  [data-scheme="light"] .chroma {
119    color: #ff6f00;
120    background-color: #fff9f3cc;
121  }
122
123
124
125  //-------------------------------------------
126  // 设置选中字体的区域背景颜色
127  //修改选中颜色
128  ::selection {
129    color: #fff;
130    background: #34495e;
131  }
132
133  a {
134    text-decoration: none;
135    color: var(--accent-color);
136
137    &:hover {
138      color: var(--accent-color-darker);
139    }
140
141    &.link {
142      color: #4288b9ad;
143      font-weight: 600;
144      padding: 0 2px;
145      text-decoration: none;
146      cursor: pointer;
147
148      &:hover {
149        text-decoration: underline;
150      }
151    }
152  }
153
154  //-------------------------------------------------
155  //文章封面高度更改
156  .article-list article .article-image img {
157    width: 100%;
158    height: 150px;
159    object-fit: cover;
160
161    @include respond(md) {
162      height: 200px;
163    }
164
165    @include respond(xl) {
166      height: 305px;
167    }
168  }
169
170  //---------------------------------------------------
171  // 全局页面布局间距调整
172  .main-container {
173    min-height: 100vh;
174    align-items: flex-start;
175    padding: 0 15px;
176    gap: var(--section-separation);
177    padding-top: var(--main-top-padding);
178
179    @include respond(md) {
180      padding: 0 37px;
181    }
182  }
183
184  //--------------------------------------------------
185  //页面三栏宽度调整
186  .container {
187    margin-left: auto;
188    margin-right: auto;
189
190    .left-sidebar {
191      order: -3;
192      max-width: var(--left-sidebar-max-width);
193    }
194
195    .right-sidebar {
196      order: -1;
197      max-width: var(--right-sidebar-max-width);
198
199      /// Display right sidebar when min-width: lg
200      @include respond(lg) {
201        display: flex;
202      }
203    }
204
205    &.extended {
206      @include respond(md) {
207        max-width: 1024px;
208        --left-sidebar-max-width: 25%;
209        --right-sidebar-max-width: 22% !important;
210      }
211
212      @include respond(lg) {
213        max-width: 1280px;
214        --left-sidebar-max-width: 20%;
215        --right-sidebar-max-width: 30%;
216      }
217
218      @include respond(xl) {
219        max-width: 1453px; //1536px;
220        --left-sidebar-max-width: 15%;
221        --right-sidebar-max-width: 25%;
222      }
223    }
224
225    &.compact {
226      @include respond(md) {
227        --left-sidebar-max-width: 25%;
228        max-width: 768px;
229      }
230
231      @include respond(lg) {
232        max-width: 1024px;
233        --left-sidebar-max-width: 20%;
234      }
235
236      @include respond(xl) {
237        max-width: 1280px;
238      }
239    }
240  }
241
242  //-------------------------------------------------------
243  //全局页面小图片样式微调
244  .article-list--compact article .article-image img {
245    width: var(--image-size);
246    height: var(--image-size);
247    object-fit: cover;
248    border-radius: 17%;
249  }
250
251  //----------------------------------------------------
252  //固定代码块的高度
253  .article-content {
254    .highlight {
255        padding: var(--card-padding);
256        pre {
257            width: auto;
258            max-height: 20em;
259        }
260    }
261  }
262
263  //--------------------------------------------------
264  // 修改首页搜索框样式
265  .search-form.widget input {
266    font-size: 1.5rem;
267    padding: 44px 25px 19px;
268  }
269
270
271
272//--------------------------------------------------
273//归档页面双栏
274/* 归档页面两栏 */
275@media (min-width: 1024px) {
276    .article-list--compact {
277      display: grid;
278      grid-template-columns: 1fr 1fr;
279      background: none;
280      box-shadow: none;
281      gap: 1rem;
282
283      article {
284        background: var(--card-background);
285        border: none;
286        box-shadow: var(--shadow-l2);
287        margin-bottom: 8px;
288        border-radius: 16px;
289      }
290    }
291  }

配置说明

hugo.yaml 字段说明：

baseurl 博客的URL

languageCode 语言代码，例如zh-cn

theme 主题

paginate 每页显示的文章数量

title 网站名称

copyright 网站底部的个性化说明

DefaultContentLanguage 默认显示的语言

hasCJKLanguage CJK字数统计，如果编码是 zh-cn，需要改成 true

languages 多语言设置，如不需要只需要把别的多余的语言删除即可

services/googleAnalytics Google分析代码

params/favicon 站点logo

params/footer/since 创建博客的年份

params/dateFormat/published 发布时间格式

params/dateFormat/lastUpdated 最后更新时间格式

params/sidebar/emoji 头像右下角的emoji

params/sidebar/subtitle 位于头像下面的副标题

params/sidebar/avatar/src 头像图片位置，相对 assets/ 目录

menu/social 社交信息配置

上传至GitHub并用Cloudflare Pages部署

GitHub 配置

在 Github 中创建新的代码仓库，由于我们将使用 Cloudflare Pages 部署网站而非直接使用 Github，因此仓库可以设为私密状态，之后将本地代码提交到代码仓库中：

1git init
2git config --global user.name "<用户名>"
3git config --global user.email "<邮箱>"
4git remote add origin https://github.com/<用户名>/<GitHub仓库名>.git
5
6git add --all
7git commit -m "first commit"
8git push origin master

Cloudflare Pages 部署

打开 Cloudflare 官网，并登录你的 Cloudflare 账户。
进入 Workers 和 Pages 页面并点击创建

选择 Pages 选项卡，并点击连接到 git

选择 github 并登录选择刚才创建的代码仓库
配置构建设置：生产分支选择 master，框架预设选择 Hugo，需要注意的是在环境变量这一栏中需要配置 HUGO_VERSION 为当前 Hugo 最新的版本号，如图。

之后点击保存并部署，就可以完成自动化部署配置，此后你对博客的所有更新只需提交到 github 的 master 分支， Cloudflare 将会自动拉取最新代码并进行部署操作。
然后在刚刚创建的 Cloudflare Pages 中的自定义域选项卡中绑定你在cf托管的域名，此后就可以通过你的域名来访问博客啦

新建文章

新建的文章会根据 archetypes/default.md 模板创建在 content/ 目录下

1hugo new content content/post/my-first-post.md

之后在你的 content/post 文件夹中会创建你的第一篇文章，打开后可以发现它的 draft = true，说明它还是一篇草稿，此时即使发布了你的网站，该文章也不会被浏览者看见。但是你可以通过在根目录下cmd命令启动 Hugo 服务，并看到所有草稿文章：

1hugo server -D

编辑时可以构建本地博客实时预览，默认网址 http://localhost:1313/

使用本地图片

后面有用 CloudFlare R2 作图床的教程，不太推荐使用本地图片。

点击显示

Hugo 会根据你内容文件的路径以及 permalinks 配置来生成 URL 和文件夹结构

例如：
1├── post  
2│   └── blog  
3│       └── images  
4│           └── test.png  
5│   └── first.md  
编译以后：
1├── public  
2│   └── p
3│       └── first
4│           └── index.html
5│   └── post 
6│       └── blog  
7│           └── images  
8│               └── test.png  
会导致本地图片的相对路径改变，所以在使用本地图片时应相对 content/ 路径

在 first.md 中使用
1![](/post/blog/images/test.png)

搭建 Cloudflare R2 免费图床

平时写博客都是使用md格式，图片需要有外链。

为什么用 CloudFlare R2

有白嫖额度
免费CDN
绑定域名不需要备案

购买 R2

虽说是购买，但是我们的赛博大善人 Cloudflare 也给了相当多的免费额度，对于一个小博客来说绰绰有余。就算是超出了免费额度，续费也就一角钱一个G，相比腾讯云和阿里云的对象存储要便宜得多。

命名存储桶；
选择一个离博客浏览人群近点的位置，为了方便我就选了亚太地区。
创建存储桶。

创建完存储桶，但是不允许公共 URL 访问的，要进一步的设置。

点击设置：

到设置页面 之后往下拉，找到 R2.dev 子域 ，点击允许访问。

设置完后，就可以在对象页面 添加图片啦。上传后，点击对应的图片文件，如下图：

就能找到 Cloudflare 给你分配的图片链接啦 :bili_062:

在R2存储桶中的设置里找到自定义域，输入你博客域名的子域名，用cdn、static或者你想用什么都行。

使用PicGo上传图片到R2

创建R2 API令牌

然后点击右下角的 创建 API 令牌

务必保存好这两个，下面用到

配置PicGo

安装PicGo详细步骤，看这里

安装S3插件

配置s3

配置完成就能愉快的上传图片啦！让我们大声说： 谢谢赛博菩萨

致谢与参考

感谢

@TheSmallHanCat 于 https://linux.do/t/topic/225250 中帮忙薅的 .me 域名

参考：

CloudFlare on ifanticの小屋

Cloudpaste部署——在线剪贴板、图床、文件中转站

✨ 特点

📝 Markdown 编辑与分享

📤 文件上传与管理

🛠 便捷的文件/文本操作

🔄 WebDAV 和挂载点管理

🔐 轻量权限管理

管理员权限控制

API 密钥权限控制

💫 系统功能

🚀 部署教程

前期准备

开始部署

获取 Cloudflare API 令牌

配置 GitHub 仓库

R2 API 相关获取及跨域配置

用 CF Workers 加密文章

前言

Hugo Encryptor 加密

Workers 加密

实现原理

使用方法

举例与测试

小结

加速我的博客

为 Workers 项目使用优选域名

设置自定义域 CNAME 记录至优选域名

给 Workers 项目添加路由

为 Pages 项目使用优选域名

为 Pages 项目添加自定义域

使用华为云国际版-云解析服务 DNS

添加自定义域至云解析服务 DNS

设置自定义域NS 记录至华为云 NS 记录

踩坑

参考链接

使用HuggingFace部署FileCodeBox

创建dockerfile

创建sync_data.sh文件

修改README.md

创建dataset数据库

创建HF-token

在后台添加环境变量

在cloudflare进行反代

我的第一篇文章

准备工作

安装Git与Hugo

安装Git

安装Hugo

新建Hugo博客

应用Hugo主题

配置&美化

配置说明

上传至GitHub并用Cloudflare Pages部署

GitHub 配置

Cloudflare Pages 部署

新建文章

使用本地图片

搭建 Cloudflare R2 免费图床

为什么用 CloudFlare R2

购买 R2

使用PicGo上传图片到R2

创建R2 API令牌

配置PicGo

安装S3插件

配置s3

致谢与参考

创建`dockerfile`

创建`sync_data.sh`文件