42
65
为homepage和watchcow 用 Cloudflare R2 搭建专属图标图床
2026-02-08 20:19:10
0点赞
0收藏
0评论
🌟 本文适合谁？
想为个人主页（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 youtube.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页面展示：!Pasted image 20260208195515
🌈 进阶小技巧
技巧一：分类管理
在 R2 里创建文件夹：
text
icons/ ├── social/ # 社交媒体 ├── tools/ # 工具网站 └── work/ # 工作相关
技巧二：备份很重要！
定期把 R2 里的图标下载到电脑备份，防止意外。
📌 最后总结
你的收获清单 ✅
拥有专属免费图床
学会收集网站图标
整理了一套图标库
可以在任何项目中使用
下一步可以尝试
用同样的方法管理博客图片
探索 Cloudflare 其他免费功能（如 CDN）
把图标库分享给朋友使用
💡 小提示：技术就像搭积木，一次搭一块就好。遇到问题很正常，随时可以回来查看这篇笔记，或者去搜索解决方案。你已经迈出了很棒的第一步！✨
最后更新：{{date:YYYY-MM-DD}}
_标签：#图床 #Cloudflare #fnos #Homepage #小白友好 #watchcow
