撰写自己的博客:Obsidian+GitHub 图床+Pixpin方案

一站式图文博客写作、图片托管和 Markdown 排版解决方案!
因为本地文章图片一张一张拖到博客网站太苦了(つ﹏<。)


✅ 为什么选择这套方案?

写博客的理想状态是:

写作体验极佳 + 图片无感上传 + 可随时迁移 + 完整掌控数据

Obsidian 是我最常用的 Markdown 编辑器,搭配 image-auto-upload 插件、Pixpin截图软件、PicGo 工具和 GitHub 图床,可以实现:

  • 写作流畅(本地 Markdown)

  • 快速截图,自动上传(Pixpin截图,在Obsidian中Ctrl+V 粘贴即可)

  • 图床稳定(托管在 GitHub 上,免费、高速)

  • 一键生成适合 CSDN 或个人网站的外链图片,使文章可直接复制到CSDN等上传


🛠️ 环境准备

工具用途
ObsidianMarkdown 写作
image-auto-upload 插件图片粘贴自动上传
PicGo本地上传图床工具
GitHub免费图床,存储图片
GitHub Token授权 PicGo 上传图片
Pixpin快速截图编辑工具

📦 步骤一:配置 GitHub 仓库作为图床

  1. 创建一个新的仓库(左边列表),如 my-image-bed(每个仓库有1GB大小限制,但只是用来存储博客图片的话,完全够用!)
    PixPin_2025-04-03_00-54-42.png

  2. 建议勾选 Initialize with a README
    PixPin_2025-04-03_00-57-42.png

  3. 记下仓库地址(如 yourname/my-image-bed
    PixPin_2025-04-03_01-00-27.png

注:如果你没有github,先创建。


🔑 步骤二:生成 GitHub Token(访问密钥)

  1. 打开 GitHub 的 Token 生成页面:
    👉 https://github.com/settings/tokens

  2. 选择「Generate new token (classic)」

  3. 勾选权限:

    • repo → ✅
  4. 设置名称(Note)与有效期(Expiration),点击生成
    PixPin_2025-04-03_00-43-47.png

  5. 复制这个 Token(注意:这个Token只会出现一次,下次你再到这个界面,就看不到了


📤 步骤三:配置 PicGo 上传到 GitHub 图床

  1. 安装 PicGo:
    👉 https://picgo.github.io/PicGo-Doc/

注:github下载的话,建议不要下pre-release版本,下最新的release版本就行了。

  1. 打开 PicGo → 设置 → 图床设置 → 选择 GitHub

  2. 填写参数:

    • 设定仓库名:{你的用户名}/my-image-bed

    • 设定分支名:main(如果你创建仓库的分支叫master或其他,要改掉)

    • 设定Token:粘贴刚才生成的 token

    • 设定存储路径:建议设为 images/,可分类管理

    • 设定自定义域名:可不填,但可能会导致上传失败,可以换成加速链接

  3. 点击测试上传,确保成功

  4. 如果你希望节省Github仓库空间,或者做图片文件夹分类,可以去PicGo插件市场寻找相应功能插件,这里就不过多赘述,可自行浏览器搜索相关插件的推荐。

注:自定义域名可以填(一般选jsDeliver)

图床名称URL 格式
GitHub Pageshttps://{{owner}}.github.io/{{repo}}
GitHubhttps://github.com/{{owner}}/{{repo}}/raw/{{branch}}
jsDelivrhttps://cdn.jsdelivr.net/gh/{{owner}}/{{repo}}@{{branch}}
Staticallyhttps://cdn.statically.io/gh/{{owner}}/{{repo}}@{{branch}}
ChinaJsDelivrhttps://jsd.cdn.zzko.cn/gh/{{owner}}/{{repo}}@{{branch}}

举个例子:你的用户名叫做aaaaaaa,仓库叫做my-image-bed,分支叫做main,你就这样填-设定自定义域名
https://cdn.jsdelivr.net/gh/aaaaaaa/my-image-bed@main


🧩 步骤四:配置 Obsidian 插件 image-auto-upload

  1. 安装 Obsidian 插件 image auto upload

  2. 开启插件

  3. Ctrl+V 粘贴图片,图片会自动上传至 GitHub 图床,并返回 Markdown 图片链接!

  4. 当然,你也可以先唤出 命令面板(CTRL+P) 搜索image auto upload: Upload all images命令,把你以前文件的图片转换成外链。(感觉太麻烦也可以直接改成快捷键)

  5. 不过,如果你使用Obsidian,有日常记笔记等其他偏隐私的需求,此时建议还是把插件中剪切板自动上传功能关掉,毕竟你的Github库是公开的,如果不小心粘贴了一些较隐私的图片,你又忘了删除,有可能被人看到哦。

题外话:Obsidian插件下载多了,启动很慢,你可以下载Plugin Manager插件。这是一个让你先打开Obsidian界面,延迟加载插件的功能(设置里默认都是延迟0s,注意:Plugin Manager那个延时0不要改,会导致无限重启)


🖼️ 步骤五:使用Pixpin快速截屏编辑

  1. 安装Pixpin https://pixpin.cn/

  2. 配置Pixpin,右键托盘图标,点击配置,打开配置界面
    PixPin_2025-04-03_01-28-35.png

  3. 勾选
    PixPin_2025-04-03_01-32-48.png

  4. 更改 快捷键/动作 截图和贴图两个快捷键分别为 F1 F2
    PixPin_2025-04-03_01-35-57.png

F1快速唤出截图工具,CTRL+C快速复制当前截图并关闭截图编辑界面,CTRL+V复制到Obsidan
F2可以把粘贴板的最新内容变成贴图(文字和截图都行,自己试试吧)
Pixpin录制的GIF也可以直接复制粘贴让图床上传

🧠 总结

这套方案让你专注写作,无需担心图片存储、外链稳定性、Markdown 格式兼容性等问题:

  • Obsidian:本地写作,极速启动

  • image-auto-upload 插件:粘贴即上传

  • PicGo + GitHub 图床:稳定可靠,永久免费

  • Pixpin截图软件:快速截图(录制视频),自带编辑工具

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值