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

从事 SEO 12 年的大佬总结的要点

从事 SEO 12 年的大佬总结的要点

从事 SEO 12 年后,以下是我能想到的所有 SEO 技巧: 1. 在 H1、H2 和 URL 部分中使用主要关键词。 2. 停止追逐虚荣指标。流量固然重要,但转化率才是最重要的。 3. 内部链接可以将“几乎完成”的页面转变为表现最佳的页面。 4. 定期检查你的网站是否有坏链接,这是一个简单的 SEO 胜利。 5. Google Search Console 是您最好的朋友,使用它来重新优化排名在第 3-7 位的页面。 6. 90% 的反向链接应来自相关的高权威网站。 7. 速度决定一切——或许应该说,速度不足会扼杀一切。确保加载时间在 2 秒以内。 8. 持续更新内容将帮助你的页面保持更高的排名。 9. 使用 NLP

Pnpm 构建 Monorepo

Pnpm 构建 Monorepo

最近开始搭建 monorepo 的项目,了解到以下方案: * lerna 有强大完善的依赖管理和构建、打包发布流程,而且 v5 版本将 nx 与 lerna 整合了,提升了性能和速度 * 业界大多使用 lerna + yarn workspace 的方式来管理,yarn 用来管理依赖,lerna 用于管理发布 之前简单使用过 lerna ,不过再加上 yarn workspace , 学习容多、配置多又得折腾,太费劲🤪,暂时搁置。 最终尝试使用单一的 pnpm workspace + changesets 的方式来构建 monorepo,本身我就使用 pnpm 作为包管理工具,目前我的场景简单,pnpm 就已足够。 本文记录自己使用 pnpm workspace 搭建 monorepo

HTTP Web 缓存总结

HTTP Web 缓存总结

友情提示:缓存什么的,是完全依赖相关http header头信息来标记和判断的 缓存读取顺序: 首先读取本地缓存,如果条件满足就取本地缓存,否则往后走代理缓存,同理,条件满足就是从代理缓存取资源(可能存在多级代理缓存) 如果一条链路上的资源都不符合,那么就去源服务器获取 缓存优先级:Cache-Control > Expires > Etag > Last-Modified 缓存的分类和优先级 * 强缓存 状态码 200 (比如 200 (from cache)) * Expires 服务器下发的绝对时间,而判断的时候以浏览器时间为准,客户端和服务器有可能会不一样 * Cache-Control 相对时间,以客户端相对时间为准 * 协商缓存 状态码 304 * Last-Modified If-Modified-Since * Etag If-None-Match 强缓存优先级高于协商缓存,强缓存不会询问服务器,直接使用缓存。协商缓存会询问服务器关于文件的可用性 对于传输过程中的中间节点,本文都称为代理服务器,包括proxy、

关于 Webpack 使用 Babel 与 Vite 使用 ESBuild 的一些思考

关于 Webpack 使用 Babel 与 Vite 使用 ESBuild 的一些思考

虽然 Vite 是基于 esbuild 构建的,并且 esbuild 在构建速度上有显著优势,但 Webpack 目前并没有直接使用 esbuild 构建的原因涉及多个方面,主要是 架构设计差异、功能需求 和 兼容性 等问题。下面是一些关键的原因: 1. Webpack 的复杂性与扩展性 • Webpack 的高度可扩展性:Webpack 的设计目标是一个 高度可配置和可扩展的打包工具。它提供了丰富的插件和 loader 机制,支持各种复杂的构建需求(如代码分割、热更新、各种资源处理等)。这些功能要求 Webpack 必须具备更细粒度的控制能力,而 esbuild 的设计理念相对简化,主要关注高速构建和基本的模块转换功能。 • Loader 和 Plugin 系统:Webpack 的强大之处在于其 loader 和