Obsidian + WSL + Next.js 博客的工作流与踩坑实录

最近几天我一直在捣鼓个人博客网站。架构大概是这样的：前端用 Tailwind Nextjs Starter Blog，部署在 Vercel，开发环境是 Windows 11 下的 WSL（Ubuntu）+ VS Code，写文章用 Obsidian。

我一开始想得很美：在 Windows 的 Obsidian 里写完文章，Git 一推，Vercel 自动上线。部署那一步确实挺顺的，结果卡在“用 Obsidian 写文章”这一段上。

我踩坑了：Windows 本地的 Obsidian 去管理 WSL 里的那个仓库有问题；换到 WSL 里装 Obsidian 也有一些问题，后面会详细说。我有点一根筋，两边都没走通，最后搞了一套单向同步的流水线（说实话有点土，但能用）。下面按踩坑顺序讲。

踩坑实录：一根筋变成两头堵

坑一：Windows 本地 Obsidian 打开 WSL 里的 Vault

一开始我的想法很直接：博客项目在 WSL 里，那我在 Windows 上用 Obsidian 通过 \\wsl.localhost\Ubuntu\home\...\my-homepage 这个网络路径，把 WSL 里的项目当 Vault 打开不就行了？

结果 Obsidian 疯狂报错：

Error: EISDIR: illegal operation on a directory, watch...

我搜了一下，发现 2020 年就有人在 Obsidian 论坛反馈过这个问题，到现在还没修。

坑二：在 WSL 里装 Obsidian

那就换个思路：在 WSL 里装 Linux 版 Obsidian，反正有 wslg 可以跑 GUI。不过我懒得折腾，没去试。这个坑算是提前避开，不算真踩。

坑三：把项目从 WSL 挪到 Windows 盘

既然网络路径不行，那就简单粗暴一点：把整个 Next.js 项目挪到 Windows 的盘符下（比如 C 盘），让 WSL 通过 /mnt/c/ 反向访问它。这样 Obsidian 操作的是本地文件，总没问题了吧？

结果写博客是丝滑了，但我在 WSL 里跑 npm install 或者 npm run dev 的时候，明显能感觉到卡顿。

最后的选择：单向流水线

折腾一圈我算是想明白了：别硬让两个软件读同一个物理文件夹，让它们各自待在自己舒服的地方就行。

• Windows 上的 Obsidian：文章和图片的唯一源头，写作只在这儿进行。
• WSL 里的 Next.js：只负责编译和发布。

中间用一条单向同步的流水线把两边连起来，就够了。

终极配置指南

Step 1：搭好写作端（Windows）

为了数据安全和配置隔离，强烈建议给博客单独建一个 Obsidian Vault，别和日常笔记混在一起。

1. 在 Windows 本地（比如 D 盘）新建文件夹 MyBlogSite，用 Obsidian 作为一个全新的 Vault 打开。

2. 在 Vault 根目录建两个文件夹：

   • blogs/：存放所有 .md 文章。
   • static/images/：存放所有文章配图（这个结构是为了兼容 Next.js 的路由）。

3. 核心配置：打开 Obsidian 设置 → Files & Links：

   • Default location for new attachments：选择刚建的 static/images。
   • Use [[Wikilinks]]：关闭（必须用标准 Markdown 链接）。

配好之后，你在 Obsidian 里粘贴的任何图片都会自动存进 static/images/，Markdown 里生成的是 ![img](/static/images/pic.png)。这个路径 Next.js 网页端直接认，不用再写正则替换。

Step 2：加同步脚本（WSL）

打开 WSL 终端，进入 Next.js 项目根目录，打开 package.json，在 "scripts" 里加上这几行（记得把 /mnt/d/MyBlogSite/... 换成你自己的路径）：

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "sync-blog": "rsync -av --delete /mnt/d/MyBlogSite/blogs/ ./data/blog/",
    "sync-images": "rsync -av --delete /mnt/d/MyBlogSite/static/images/ ./public/static/images/",
    "sync": "npm run sync-blog && npm run sync-images"
  }

为什么用 rsync？

--delete 是关键。它既能做增量同步，又能做镜像删除：你在 Obsidian 里删掉的废稿和废图，跑完脚本 WSL 里对应的文件也会被清掉，两边始终保持一致。

Step 3：日常工作流

现在整套流程就三步：

1. 写：打开 Windows 上的 Obsidian，专心写作、插图。不用开终端，不用起服务。

2. 同步：写完想发布了，打开 WSL 终端：

   npm run sync

   文章和图片会同步进 WSL 的 data/blog/ 和 public/static/images/。

3. 上线：

   git add .
   git commit -m "feat: add new post"
   git push

   Vercel 自动拉取最新文件，构建发布。

结语

这套方案跑下来，Obsidian 的跨系统监听 bug 绕过去了，路径映射也不用折腾了，Next.js 在 Linux 原生文件系统上的编译速度也保住了。哪怕哪天 WSL 崩了重装，文章和图片还在 Windows 的独立 Vault 里，不会丢。

折腾了几天，最大的教训大概是：有时候别硬让两个工具共享一个文件夹，让它们各干各的、中间接一条同步流水线，反而更省心。

希望这篇踩坑记录能帮到同样在折腾博客的人。