用AI开发Obsidian插件：让VuePress博客部署告别繁琐操作

约 2272 字大约 8 分钟

Obsidian Vuepress Trae AI

2025-09-17

前言：一个博主的日常烦恼

作为一个技术博主，我一直在使用VuePress搭建自己的博客。VuePress是一个优秀的静态站点生成器，特别适合技术文档和博客的编写。然而，在日常使用中，我遇到了一个让人头疼的问题：每次发布文章都需要经历繁琐的手动部署流程。

这个问题促使我思考：能否通过技术手段来简化这个流程？

最终，我决定开发一个Obsidian插件来解决这个痛点，而在开发过程中，AI成为了我最得力的助手。

痛点分析：VuePress博客部署的繁琐流程

传统的部署流程

使用VuePress搭建博客虽然有很多优势，但部署流程确实存在一些痛点：

【1】多步骤操作：每次发布文章需要执行多个命令

# 1. 构建项目
npm run docs:build

# 2. 进入构建产物目录
cd docs/.vuepress/dist

# 3. 上传到服务器（通过SCP或其他方式）
scp -r * user@server:/var/www/html/

【2】容易出错：手动操作容易遗漏步骤或输错命令

【3】效率低下：每次都要重复相同的操作，特别是当你想要频繁更新博客时

【4】缺乏集成：写作工具（如Obsidian）和部署工具是分离的，无法形成完整的工作流

为什么选择Obsidian作为写作平台

我选择Obsidian作为主要的写作工具有几个原因：

Markdown原生支持：完美支持Markdown语法，与VuePress无缝对接
强大的插件生态：可以通过插件扩展功能
本地文件存储：所有文件都存储在本地，数据安全可控
优秀的编辑体验：实时预览、双链笔记等功能提升写作效率

但问题是，Obsidian本身并没有直接部署到服务器的功能。这就是我开发这个插件的初衷。

解决方案：一键部署的Obsidian插件

设计思路

我的目标很明确：在Obsidian中一键完成从构建到部署的整个流程。插件需要具备以下核心功能：

自动构建：执行VuePress的构建命令
文件上传：将构建产物上传到服务器
进度反馈：实时显示部署进度
错误处理：提供详细的错误信息和解决建议

技术架构选择

经过调研，我选择了以下技术栈：

TypeScript ：Obsidian插件的标准开发语言，提供类型安全
Node.js Child Process ：执行构建命令
SSH/SCP ：安全地连接和传输文件到服务器
Obsidian Plugin API ：集成到Obsidian的用户界面

核心功能模块

插件主要包含以下几个模块：

配置管理模块：存储项目路径、服务器信息等配置
构建模块：执行npm构建命令
部署模块：通过SSH上传文件到服务器
UI模块：提供设置界面和进度显示

AI辅助开发：从零到一的实现过程

关键技术实现

项目构建模块

AI帮我实现了一个健壮的构建模块，包含详细的错误检查：

private async buildProject(): Promise<void> {
    // 检查项目目录是否存在
    if (!fs.existsSync(this.config.projectDir)) {
        throw new Error(`项目目录不存在: ${this.config.projectDir}`);
    }

    // 检查package.json是否存在
    const packageJsonPath = path.join(this.config.projectDir, 'package.json');
    if (!fs.existsSync(packageJsonPath)) {
        throw new Error(`项目目录中未找到package.json文件`);
    }

    // 验证构建脚本是否存在
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
    const buildScriptName = this.config.buildCommand.replace('npm run ', '');
    if (!packageJson.scripts[buildScriptName]) {
        const availableScripts = Object.keys(packageJson.scripts).join(', ');
        throw new Error(`未找到"${buildScriptName}"脚本。可用脚本: ${availableScripts}`);
    }

    // 执行构建
    return new Promise((resolve, reject) => {
        const buildProcess = spawn(this.config.buildCommand, {
            cwd: this.config.projectDir,
            shell: true,
            stdio: 'pipe'
        });
        // ... 处理构建过程
    });
}

SSH部署模块

AI协助实现了安全的SSH连接和文件传输：

private async uploadFiles(): Promise<void> {
    const localPath = path.join(this.config.projectDir, this.config.distPath);
    
    // 清理远程目录
    await this.clearRemoteDirectory();
    
    // 上传文件
    return new Promise((resolve, reject) => {
        const scpProcess = spawn('scp', [
            '-r',
            '-P', this.config.sshPort.toString(),
            `${localPath}/*`,
            `${this.config.username}@${this.config.host}:${this.config.remoteDir}`
        ], { stdio: 'pipe' });
        
        // ... 处理上传过程
    });
}