V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kirito41dd
V2EX  ›  分享创造

写了一个 obsidian 插件,能够把 obsidian 笔记转换为 hugo blog

  •  3
     
  •   kirito41dd · 311 天前 · 3499 次点击
    这是一个创建于 311 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最早有一个 hugo 静态 blog 的站点,开始写博客都是在 vscode 里,后来用了 obsidian ,基本上所有笔记都在 obsidian 上写,然后想把 ob 的笔记变成 blog 的话,还要自己把 md 拷贝一次,包括处理图片链接啥的,挺麻烦的,所以写了个 obsidian 插件。

    插件原理是扫描 obsidian 的文章,找到文章属性 tags 中带有博客 tag 的文章,将文章和其中嵌入的图片,转换到 hugo 站点对应目录。

    插件会先把 obsidian md 转换为 ast ,进行一些转换后,再将其写入为 hugo 格式的 md 。

    插件配置:

    • blog tag 是告诉插件,拥有那个 tag 的文章要被转换到 hugo 站点
    • site dir 是 hugo blog 的根目录
    • blog dir 是转换后的 md 存放目录,在 hugo blog 中的相当位置
    • static dir 是静态文件拷贝到的目录,指定为在 static 下的某个目录

    obsidian 中要转换到 hugo 中的文章:

    • 加一个 tag 即可

    转换:

    • 点击侧边栏按钮,或者 cmd+p 运行命令都可以

    转换后在 hugo blog 中的结果:

    • md 和图片都转移过来了,之后运行hugo server可以查看效果

    也可以看我的这篇笔记https://www.kirito.info/神经网络的结构/

    图片和 latex 公式都能正常转换

    地址: https://github.com/kirito41dd/obsidian-hugo-publish

    目前申请官方的三方插件列表还没通过,安装需要手动把release中的 main.jsmanifest.json 放到 path/to/vault/.obsidian/plugins/hugo-publish

    有感兴趣的可以试试,主要还是解决自己的需求,如果有同样需求希望可以帮到你

    第 1 条附言  ·  264 天前
    更新,已经加入 obsidian 三方插件列表,插件市场搜索 hugo 就能看到
    8 条回复    2024-02-24 13:35:47 +08:00
    tomdddd
        1
    tomdddd  
       311 天前
    赞!
    sleeplessy
        2
    sleeplessy  
       311 天前 via iPhone
    支持一下
    junhua13
        3
    junhua13  
       310 天前
    强强强
    daisyfloor
        4
    daisyfloor  
       310 天前
    不错,但每次写完后都搞一遍,感觉麻烦。

    这里也分享下我的做法:我的笔记内容和博客站点是 2 个 Obsidian Vault ,分开管理,分开的原因:

    1 、笔记内容较为私密,我自己都是用 remotely save+Onedrive 同步和备份,而 Hugo 站点内容通常都是公开的(当然也可以私密 repo 管理),为了发布本身就在 Github ,没必要混在一起多同步一份。

    2 、后面方便内容做鉴权,这是另外一个话题了。


    这样分开后,管理就很纯粹简单:

    1. 博客图片都是用图床(笔记也都是用图床),这样就不存在什么 MD 文件的关联资料,MD 文件就是自己一个文件,纯粹。写博客或者笔记的时候,直接将图片在文章中粘贴,就自动上传图床返回并替换为 MD 图片链接。用到的插件和软件
    - image auto upload plugin 添加图床配置
    - pigo (或者 piglist 或 upic )管理图床
    - 图床是 CF R2 免费

    2. 使用 Obsdian 自带的模板功能,做一个新文章的模板(里面有文章元数据),指定新文章创建路径为 content/post 目录
    3. 站点内容用 Git 管理,远程仓库直接连接到 Cloudflare Pages ,我本地 push 之后,那边就自动拉取并 build 站点内容并发布。



    配置需要一些精力,但配置好后,就特别简单了,可谓一劳永逸:现在写作发布只需要:

    1. Obsidian 打开 Hugo 站点仓库,创建一篇文章(已自动在 Content 目录)
    2. 插入模板(就是填充元数据),修改标题,即 tag 等等内容,开始写作
    3. 写完后 在 Obsidian Git 插件里点 3 个按钮( Stage ALL + Commit + Push)
    4. 等大概 10-20 秒后,网站就已经更新了。

    欢迎讨论。
    kirito41dd
        5
    kirito41dd  
    OP
       309 天前
    @daisyfloor 嗯嗯,我这边 hugo 是一个私有的 repo ,推送到 master 后,流水线会自动编译静态站点,然后推送到公开 github page repo ,最后触发 vercel 自动部署。https://www.kirito.info/blog-with-gitpage-and-ci


    之前写博客就是直接 vscode 编辑,图片手动上传到 s3 存储,把链接贴文章里,没有 obsidian 粘贴板插入图片方便


    obsidian 这边所有笔记静态文件本身也靠 Remotely Save 同步到了 s3, 不过是私有读写。这样静态资源有 s3 来协调,我多个设备上的 obsidian 都是一样数据,互相备份


    后续我这个插件计划:
    * 自动上传图片到 s3 ,或者允许用户自定义 rewrite url ,把图片路径映射到 cdn 路径
    * 自动进行 git 操作,管理 hugo repo

    这样应该能做到只开一个 obsidian ,就完成和你目前架构一样的工作。

    我也想过开俩 obsidian ,但是很多资源可能都是重复的,开俩总觉得麻烦。一起管理的话,想知道哪些文章公开了,过滤一下 tag 挺方便的,用 dataview 啥的
    fengche361
        6
    fengche361  
       304 天前
    推荐一下这篇博客的做法: [把 Obsidian 变为 Hugo 博客的集成管理平台]( https://blog.zhangyingwei.com/posts/2024m1d30h10m7s52/)

    https://blog.zhangyingwei.com/posts/2024m1d30h10m7s52/
    kirito41dd
        7
    kirito41dd  
    OP
       304 天前
    @fengche361 真不错,应该和我的插件能配合,ob 的 md 格式还有引用格式和标准 md 有点区别,插件提供了 ast 层面的转换。我是博客笔记放一起了,就开一个平时
    Sologala
        8
    Sologala  
       298 天前   ❤️ 1
    @kirito41dd 好像就是我想要的东西,有空看下,一起丰富一下该内容。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5467 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:40 · PVG 16:40 · LAX 00:40 · JFK 03:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.