🌟 本文适合谁？
- 想为个人主页（homepage）和 （watchcow） 添加精美图标
- 技术小白，希望用最简单的方法搭建图床
📦 第一部分：准备工作（就像收拾工具箱）
1.1 你需要的东西
- Cloudflare 账号（免费注册，就像注册邮箱一样简单）
- 要图标的容器列表（比如你的moviepilot，emby）
- 一个托管到cf的域名（非必须，也可以用免费的2级域名）
1.2 为什么选择 Cloudflare R2？
- 完全免费：每月 10GB 存储 + 1000 万次操作，个人用绰绰有余
- 简单好用：界面友好，不像其他云服务那么复杂
- 速度快：全球都有节点，图标加载飞快
🚀 第二部分：创建你的第一个“图标仓库”（R2存储桶）
2.1 登录 Cloudflare
- 访问 cloudflare.com 注册/登录
- 点击左侧菜单的 R2 对象存储
- 点击蓝色的 “创建存储桶” 按钮
2.2 给存储桶起个好名字
- 名字格式：
yourname-icons（比如 icon）
- 重要提示：名字要全球唯一，可以加点数字
- 区域选择：自动就行，Cloudflare 会选最近的
2.3 创建完成！
你会看到一个空的存储桶，就像刚买的新柜子，等着你放东西。
🖼️ 第三部分：收集并上传网站图标
3.1 找到网站图标
直接找 favicon
-
在浏览器打开网站（比如 www.fnnas.com）
-
在网址前面加 /favicon.ico
原网址：https://www.fnnas.com
favicon地址：https:/www.fnnas.com/favicon.ico
-
右键 → 图片另存为
3.2 整理你的图标文件
建议这样命名，方便以后管理：
github.png
twitter.png
**.png
notion.png
3.3 上传到 R2（超简单步骤）
- 在 R2 页面点击你的存储桶
- 点击 “上传” 按钮
- 把整理好的图标拖进去
- 等待上传完成（看到进度条走完）
🔗 第四部分：让图标可以被访问（配置公共访问）
4.1 允许公开访问
- 在存储桶页面，点击 “设置” 标签
- 找到 “公开访问”，点击编辑
- 选择 “允许”
- 保存设置
4.2 绑定自定义域名
- 添加自定义域名：
-
链接域名
-
返回之前的对象页面，找到上传的图标，随便点开一个，就可以看到自定义的地址：
- 打开查看链接：
🏠 第五部分：在 Homepage 和 watchcow 中使用图标
5.1 Homepage 配置示例
- 在homepage映射的config目录中找到services.yaml修改：
- moviepilot:
icon: https://icon.xxx.de5.net/moviepilot.png #你图标的自定义域名地址
href: https://moviepilot.xxx.xyz #moviepilot的访问地址
description: 影视管理
5.2 Watchcow 配置示例
- 修改容器的docker compose文件 加入以下代码
labels:
watchcow.enable: "true"
watchcow.appname: "MoviePilot"
watchcow.service_port: "3000" # 服务端口，按需修改
watchcow.protocol: "http"
watchcow.path: "/"
watchcow.ui_type: "url"
watchcow.icon: "https://icon.xxx.de5.net/moviepilot.png"
🛠️ 第六部分：展示效果
Homepage页面展示
Watchcow 飞牛os页面展示：
🌈 进阶小技巧
技巧一：分类管理
在 R2 里创建文件夹：
text
icons/
**── social/ # 社交媒体
**── tools/ # 工具网站
**── work/ # 工作相关
技巧二：备份很重要！
定期把 R2 里的图标下载到电脑备份，防止意外。
📌 最后总结
你的收获清单 ✅
- 拥有专属免费图床
- 学会收集网站图标
- 整理了一套图标库
- 可以在任何项目中使用
下一步可以尝试
- 用同样的方法管理博客图片
- 探索 Cloudflare 其他免费功能（如 CDN）
- 把图标库分享给朋友使用
💡 小提示：技术就像搭积木，一次搭一块就好。遇到问题很正常，随时可以回来查看这篇笔记，或者去搜索解决方案。你已经迈出了很棒的第一步！✨
最后更新：{{date:YYYY-MM-DD}}
_标签：#图床 #Cloudflare #fnos #Homepage #小白友好 #watchcow
