← 返回文章列表

用 Obsidian 构建无感发布博客

介绍如何通过 Obsidian + Next.js + GitHub Actions 实现写完即发布的博客工作流

obsidiannextjsautomation

Reading mode

滚动时会高亮当前章节，桌面端可以直接用右侧目录快速跳转。

9 个主要章节，适合按主题快速浏览。

文章大纲

为什么选择 Obsidian 作为写作工具

写作应该是轻松的。打开 Obsidian，写完笔记，把 publish 改成 true，剩下的全自动。

这个博客系统的核心理念就是：写作和发布之间，零摩擦。

技术架构

整个发布管线如下：

  1. Obsidian 作为本地编辑器，支持 Wiki Links、图片嵌入、Callout 等语法
  2. Obsidian Git 插件 每 5 分钟自动 commit + push 到 GitHub
  3. GitHub Actions 检测到 vault/blog/ 变化后触发构建
  4. Next.js 构建静态页面，自动转换 Obsidian 特殊语法
  5. SSH 部署 到京东云服务器

Obsidian 特色语法演示

Callout 示例

这是一条笔记

这是 Obsidian 的 Callout 语法，会被自动转换为漂亮的卡片组件。

开发小技巧

使用 publish: true 控制文章发布状态，无需任何额外操作。

注意事项

图片必须放在 assets/ 目录下，否则无法正确引用。

高亮语法

这是一段普通文本，其中包含高亮的关键词，以及另一个重要概念。

代码块

function getPublishedPosts() {
  const files = walkDir(BLOG_DIR).filter(f => f.endsWith('.md'))
  return files
    .map(filePath => {
      const raw = fs.readFileSync(filePath, 'utf8')
      const { data, content } = matter(raw)
      if (!data.publish) return null
      return { slug: slugify(filePath), content }
    })
    .filter(Boolean)
}

列表和任务

  • 搭建 Next.js 项目
  • 实现 Obsidian MD 预处理
  • 配置 CI/CD 管线
  • 部署到京东云

数学公式

行内公式：E=mc2E = mc^2

块级公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

流程图 (Mermaid)

graph LR
    A[Obsidian 写作] --> B[Git Push]
    B --> C[GitHub Actions]
    C --> D[Next.js Build]
    D --> E[部署上线]

这就是全部。写完之后，一个单词 publish: true 就能发布。