Obsidian, Typora 图床自动上传 By Cloudflare R2 + Picgo

Obsidian, Typora 图床自动上传 By Cloudflare R2 + Picgo
Photo by Glenn Carstens-Peters / Unsplash

我主要是为了写博客,以及内容同步到其他平台时,无需迁移图片资源,而且能分担服务器带宽压力,图片直接通过 Picgo 上传到 Cloudflare R2,然后在 Obsidian 或者 Typora 写完文章,复制 Markdown 文本到我的博客直接发布即可,我的博客是使用 Ghost 部署的,地址 meepo.me

Cloudflare R2

Cloudflare 一直被称为赛博活佛,R2 10G 的 Storage,用不完,根本用不完,而且不用搞备案验证(你们知道我在说什么)

CleanShot 2025-02-23 at 10.39.56@2x.png

创建 API Token

R2 是 Cloudflare 的对象存储服务,首先需要注册 Cloudflare,注意开通 R2 需要绑定信用卡,不用担心,并不是绑定就扣费。
首先进入 R2,配置一个 API token,如图:

16ef235a12ae12064dd9d889b992777b 2.png

点击 Manage API tokens,进入之后,点击 Create API token

b1d490782afa91f7526f48b8c867277c 4.png

选择 Object Read & Write ,给到普通的读写权限即可。

b1391b64e7bea7c8083e528a09673486.png

此时会创建 Token value, Access Key ID, Secret Access Key,一定要将这些内容保存到本地,不要遗失,因为后期无法找回,只能重置或者删除。也不要泄露,泄露会有风险,我图中的示例随后会删除。

f1233ac8cf15f231b71e9df7a18d1907.png

创建 Bucket

回到 R2 首页,创建一个 Bucket

CleanShot 2025-02-23 at 08.52.17@2x.png

填写 Bucket 名称之后,点击创建即可,这里 R2 会根据你的网络位置,自动选择一个离你较近的节点,当然你也可以指定节点存放位置。

CleanShot 2025-02-23 at 08.54.16@2x.png

创建完 Bucket 之后,可以看到你创建的 Bucket 列表,点击目标 Bucket 进入详情页。
这里的 S3 API 地址需要记录下来,一会配置 Picgo 的自定义节点时,需要用到。

CleanShot 2025-02-23 at 09.11.43@2x.png

另外由于我的图片都是放到公网可访问的,所以需要打开这个详情页 Public access 下面的 R2.dev subdomain, 同样记录下来这个地址。

CleanShot 2025-02-23 at 09.13.41@2x.png


【可选】如果你需要自定义自己的域名,同样在这个页面也可以进行配置,有个自定义域名选项

CleanShot 2025-02-23 at 09.15.48@2x.png


这样就配置完毕了

Picgo 配置

Picgo 支持多种图床的开源服务,是当前使用最广泛的图床工具,提供客户端下载Picgo 下载网站地址
S3图床配置下载
Picgo 需要下载 S3 插件才能支持 Cloudflare 的图床下载,在插件设置页面搜索 S3 即可找到,点击安装

CleanShot 2025-02-23 at 09.02.19@2x.png


之后在图床设置,将前面 Cloudflare 中创建的应用密钥和节点等相关信息粘贴进去

CleanShot 2025-02-23 at 09.05.49@2x.png
  • 图床配置名: 只是个别名,用于在 Picgo 里面做区分,随意填写一个即可
  • 应用密钥 ID: 上述创建 API Token 时产生的 Access Key ID
  • 应用密钥: 上述创建 API Token 时产生的 Secret Access Key
  • 桶名: 填写刚才创建的 Bucket 名称,是英文。
  • 自定义节点: 创建 Bucket 时生成的 S3 API endpoints

自定义输出 URL 模板也要填写,由于 S3 插件版本更新,移除了自定义域名的配置项,使用自定义输出 URL 模板,我这里配置的是上面的 Cloudflare R2 的 R2.dev Bucket URL 再结合 pathname 变量 https://pub-d3ecf764a1b9400f903cfefb2142e96f.r2.dev/{path} 如图

CleanShot 2025-02-23 at 09.32.14@2x.png

至此,Picgo 配置完毕,可以在上传区进行文件的上传了。上传支持文件上传,URL及剪切板直接上传,体验还是非常丝滑的。

CleanShot 2025-02-23 at 09.37.17@2x.png

上传完之后,可以在相册里面看到刚才上传的结果,点击可以直接复制链接。

CleanShot 2025-02-23 at 09.39.13@2x.png

这里推荐打开 PicGo 设置里面的上传后自动复制 URL 到剪切板选项,这样图片上传完之后,直接 Ctrl + V 就能获取到 URL 了,无需手动复制。

CleanShot 2025-02-23 at 09.41.07@2x.png

Obsidian 配置自动上传

Obsidian 通过第三方插件可以实现图片文件插入时自动上传到 Cloudflare R2,进入 Obsidian 设置页面,打开第三方插件

CleanShot 2025-02-23 at 10.47.45@2x.png

搜索 Image auto upload 插件,点击安装

CleanShot 2025-02-23 at 10.49.07@2x.png


点击选项进行配置

CleanShot 2025-02-23 at 10.50.18@2x.png


建议配置项如下:
1、打开剪切板自动上传,这样粘贴进来的图片,可以直接通过刚才的 Picgo 的配置,将图片上传到 Cloudflare R2,并且替换成 R2 图片的线上可访问地址。
2、建议打开上传文件后移除在 Obsidian 附件文件夹源文件的开关,不然会同时将图片内容在本地存放一份,不然图片都会展示到列表里面,非常难看。

CleanShot 2025-02-22 at 23.34.35@2x.png


可以实现在 Obsidian 粘贴图片时,自动上传 Cloudflare R2 并且替换 Image URL 的 Markdown 图像插入语法,非常丝滑。

CleanShot 2025-02-23 at 10.21.43@2x.png

Typora 配置自动上传

Typora 官方可以直接接入,如 iPic,uPic,Picsee,Picgo 等图床工具,在上述 Picgo 配置完成之后,直接在这里选择 PicGo.app 即可实现配置。

CleanShot 2025-02-23 at 10.17.40@2x.png

同样可以设置,在 Typora 插入图片时,的不同行为选项。这里选择上传图片,就可以实现在 Typora 粘贴图片时,自动上传 Cloudflare R2 并且替换 Image URL 的 Markdown 图像插入语法

CleanShot 2025-02-23 at 10.20.03@2x.png

其他

说下为什么没有选择七牛云,其实七牛云有文件夹的空间管理,比较方便管理资源文件,但是七牛云都需要对域名进行备案(我可烦死这些了),我的域名当前是在 Cloudflare 托管的,所以就更适合使用 Cloudflare R2 来作为图床。

自定义域名

我的域名是 meepo.me,因为我的这个域名是托管在 Cloudflare 上面的,我在这个配置了一个 r2.meepo.me 作为自定义域名,直接 Continue 即可。点击 Connect domain,会自动创建成功。

CleanShot 2025-02-23 at 22.49.18@2x.png


这样我的地址就更改为了 https://r2.meepo.me/meepo/2025/02/7d852979d830bd6c640ccbb7e63e0f52.png 这种方式,更加的清晰。
如果做了自定义域名,那么在 PicGo 里面把自定义输出 URL 模板改为自定义域名的 path

CleanShot 2025-02-23 at 22.52.15@2x.png

Bingo! 搞定

Read more

郑州互联网薪资统计及 AI 时代的现状

郑州互联网薪资统计及 AI 时代的现状

22 年郑州前端薪资真实统计(200+份样本) 22 年我在郑州前端大群里面统计了一波郑州互联网薪资,当时以为只是开始,想着后面会有更多的企业来到郑州,情况会越来越好,而现在回头来看,没想到那时才是顶峰。 当时在群里面收集到 200+ 位投票,匿名填写自己的薪资情况,当时跟大家特意强调了要保证数据的真实性,也找群员验证过,基本真实性可信: * 🐣 3-6k 占比不少,主要是郑州的工资水平低,对于刚出来的,在小公司的这个薪资也正常,实习生 or 小作坊 * 🐰 6-12k 的占大多数,涵盖了郑州本土大多数互联网公司的薪资范畴,大多数的常规业务开发 * 🐵 12-20k 主要集中在本土大公司、一线城市在郑州的研发团队、外包公司,核心业务开发人员 🦄 20k+ 高学历 or 有大厂经验,主要为本土大公司或者一线公司在郑州的带队 leader ,能力较强,一般承担一些管理角色。 25年:职场寒冬来袭,状况还在持续恶化 一线公司研发部门的撤离 这也是我最在意的一条: 之前有一些一线城市的研发交付部门会在郑州有成立研发交付中心,从疫情之后,

RAG不是万能的,附常见误解与澄清

RAG不是万能的,附常见误解与澄清

能给人理清目前 AI 在生产落地的问题,是一件难能可贵的事情,AI 在生产落地会有哪些阻碍的讲解,讲干货的真的是很少,至少我自己曾经在这个问题上困惑了很久。 因为之前我在 AI 电商团队,做具体的 AI Sass 落地的时候,团队经常会沟通做到生产级可用的 AI,需要哪些东西,大概的门槛还是了解到一些的,我的能力也顶多在应用层面去做一些工作量的定制与代码衔接,涉及到模型层面,一概歇菜,很多人估计只是想着,写一个 Prompt ,就是真正的拥抱 AI 了。 当我看到自媒体里面铺天盖地的在讲 AI 如何帮助企业提效,如果重塑行业的时候,有种很复杂的感觉,他们真的懂 AI 吗,甚至他们真的懂软件吗? 基本上现在大家接触到的方式就几种: * 割韭菜卖课,讲概念,前景,这些基本上都是拿别人的产品来给自己做嫁衣,自己顶多是个工具的使用者和营销者,比如用 Midjourney,Kimi,豆包,海螺什么的,告诉大家用了就能提效,获得流量,

Shopify 构建商城页面的几种方式

Shopify 构建商城页面的几种方式

当用户需要对 Shopify 商城页面有自定义的需求时,一般会选择: 1、直接使用官方商城的 theme 来构建,可以使用,但是免费模板较少,只有 13 个。 2、使用第三方 theme 来构建,也有很多的模板可以选择,比如 envato 上有数百个 shopify 的模板,这是个非常大的市场。 3、完全自定义开发,自由度最高 当用户对 Shopify 商城页面,有完全自定义的需求,通常是常规主题无法满足需求,推荐使用 Shopify Hydrogen 的官方方案,开发人员可以对商城进行完全的页面级别的自定义。 而对于开发人员来说,官方的 Shopify Liquid 开发起来的效率和体验,是不如 Shopify Hydrogen 来的舒服,而且使用 Shopify Hydrogen ,还可以对性能有提升,

Meepo 要找一份远程前端(全栈)开发的工作

Meepo 要找一份远程前端(全栈)开发的工作

为什么找远程岗位 我一直是比较喜欢远程合作的方式,基本上从事远程开发的团队,都是奔着做事去的,大家能筛选到一起,为一个目标而努力,是一件很难得的事情,远程协作的方式,在自由度和产出之间能保持非常好的平衡,没有必要在通勤以及办公室的无效沟通上浪费太多的时间。 技术特点如何 前端: React + TypeScript 生态体系,常规的网页开发,浏览器插件,Electron 客户端开发都 OK,对各种前端技术方案有一定的沉淀和实践。 后端: Nextjs + Nestjs 开发全栈站点及后端 API 服务 个人特点 即插即用,对于大多数的前端场景和技术方案,都有所涉及。 多年的开发经验,对企业自有产品开发,大客户定制,以及独立开发,有一定的观察和沉淀。 拥抱 AI,对当下比较热门的 AI 技术有一定的了解和沉淀。 喜欢分享和交流,对技术和业务,以及营销都感兴趣。 之前接触的一些业务形态 公司层面: 主要是国内客服领域,涉及到全流程客服,IM,音视频等