前言

现代技术博客的写作需要兼顾内容创作效率和发布便捷性。本文将介绍一套整合Obsidian编辑器、自建图床服务和GitHub+Cloudflare自动化部署的完整解决方案，实现从写作到发布的丝滑工作流。

步骤

1. 自建图床和piclist-core部署

2. Obsidian写作环境配置

  1. 核心插件安装

    • 安装插件 Image auto upload Plugin
    • 配置插件使用PicList作为上传客户端： Image auto upload Plugin插件设置

  2. 图片自动化处理

    • 在Obsidian中直接粘贴图片时，插件会自动：
      1. 调用云端PicList
      2. 上传至自建Isky-pro图床
      3. 替换为Markdown图片语法（![alt](https://your-image-bed.com/path/to/image.jpg)）

3. 使用obsidian知识库管理blog

1. 将hugo-blog文件夹放入obsidian知识库中

image.png

存放位置大概的目录如上

2. 优化在obsidian中对hugo-blog的显示

我们知道在hugo-blog文件夹中，不能改变其目录结构，所以想在obsidian知识库中编辑博文势必会显示很多无关的hugo的项目文件，它们都是部署blog网页的必须品

我们可以使用 obsidian-设置-外观-CSS代码片段 功能，将hugo-blog文件夹中其他无关的内容隐藏，只显示posts中的内容

CSS代码片段功能的css文件存储路径在：Obsidian\RZL的知识库\.obsidian\snippets

  1. 创建两个css文件：
/* 隐藏 blog 下除了 content/posts 以外的所有文件 */

.nav-folder-children .nav-file-title[data-path*="02 文章/blog"]:not([data-path*="02 文章/blog/content/posts"]) {

    display: none;

}

/* 隐藏 02 文章/blog/content/posts/_index */

.nav-folder-children .nav-file-title[data-path*="02 文章/blog/content/posts/_index"] {

    display: none;

}

/* 隐藏 blog 下除了 content/posts 以外的所有文件夹 */

.nav-folder-title[data-path*="02 文章/blog"]:not([data-path*="02 文章/blog/content/posts"]) {

    display: none;

}

  1. 在obsidian-设置-外观-CSS代码片段中将两个css开启 image.png

  2. 在obsidian中的显示效果如下 image.png

4. 自动化部署流程

见使用 Hugo + GitHub + Cloudflare Pages 搭建个人博客这篇

总结

  1. 写作体验优化：Obsidian本地编辑+实时图片上传
  2. 数据自主可控：自建图床保障图片资源安全
  3. 成本优势：利用Cloudflare免费额度实现全球CDN加速
  • 定期备份Obsidian仓库