文章 · 2024-01-01

MCP-Blog:一键发布 Astro 博客,告别多步流程

发布一篇文章需要:

  1. geyuxu.com 中写完文章
  2. 执行 git add .git commit -m "..."git push
  3. 执行 npm run build 生成静态文件到 dist/ 目录
  4. dist/ 目录内容推送到 gh-pages 分支

这涉及多个命令,且容易出错,尤其当 Git 没有正确管理 dist/ 目录时。更烦的是,我希望有一个集中的管理枢纽,而不是在项目里散落各种脚本。

于是我做了 MCP-Blog用一个独立的目录,通过一条命令,自动化完成博客的全部提交和发布。

这解决两个问题:

  1. 操作隔离:管理逻辑与博客仓库分离,保持代码库的纯净
  2. 流程简化:五步流程变成一条命令,减少人工失误

二、技术架构:协议设计思想

自定义协议

我为这个项目设计了一套"MCP"—— 一套命令行交互规范。核心思想很简单:

一个独立的执行脚本(模型),能够理解并操作特定上下文中的目标项目。

在这里:

架构图

工作流程很直观:

+-----------+       +-------------------------+       +---------------------+       +----------------+
|           |       |                         |       |                     |       |                |
|   用户     |------>|  MCP 脚本 (mcp.sh)      |------>|  Astro 博客项目     |------>|  GitHub 仓库   |
|           |       |                         |       | (geyuxu.com)        |       | (main/gh-pages)|
+-----------+       +-------------------------+       +---------------------+       +----------------+
      |                        |                                |                           |
      | 1. 提供 commit 消息    | 2. cd 到博客目录              | 3. 执行 Git 操作 & build | 4. 部署到 Pages
      |                        | 4. 执行部署命令               |                           |

关键在于 MCP 脚本 如何有效地进入 Astro 博客项目 目录并执行操作。

三、实现:核心脚本和自动化

整个系统由一个 Shell 脚本驱动。

项目结构:

/Users/geyuxu/repo/blog/
├── mcp-blog/         # MCP 项目
│   └── mcp.sh
└── geyuxu.com/       # Astro 博客项目
    ├── src/
    ├── public/
    ├── package.json
    └── ...

1. 核心脚本 mcp.sh

#!/bin/bash

# 脚本出错时立即退出
set -e

# --- 配置区 ---
# 定义 MCP 项目路径 (脚本所在位置)
MCP_PROJECT_PATH="/Users/geyuxu/repo/blog/mcp-blog"
# 定义博客仓库路径 (需要操作的目标)
BLOG_REPO_PATH="/Users/geyuxu/repo/blog/geyuxu.com"
# --- 配置区结束 ---

# 1. 检查输入参数:必须提供 commit message
if [ -z "$1" ]; then
  echo "❌ 错误: 请提供一个 commit message."
  echo "用法: ./mcp.sh \"你的提交信息\""
  exit 1
fi

COMMIT_MESSAGE=$1

echo "🚀 MCP-Blog 任务启动..."
echo "================================="

# 2. 跨目录权限管理与操作核心
echo "📂 正在进入博客仓库目录: $BLOG_REPO_PATH"
cd "$BLOG_REPO_PATH"

# 3. Git 自动化操作:提交源码
echo "🔄 正在同步源码到 main 分支..."
git add .
git commit -m "$COMMIT_MESSAGE"
git push origin main

echo "✅ 源码同步完成。"
echo "================================="

# 4. Astro 博客系统集成:构建项目
echo "🛠️  正在构建 Astro 项目..."
npm run build

echo "✅ 构建完成。"
echo "================================="

# 5. GitHub Pages 部署
echo "🚀 部署到 GitHub Pages..."
# 这里我们使用 gh-pages 包来简化部署
# 它会自动将 dist 目录的内容推送到 gh-pages 分支
npm run deploy

echo "✅ 部署成功!"
echo "================================="
echo "🎉 所有任务完成,博客已更新!"

# 返回原始目录 (可选,良好实践)
cd "$MCP_PROJECT_PATH"

2. 关键技术点

跨目录执行 (cd "$BLOG_REPO_PATH"):
cd 命令是基础。脚本启动后切换到博客项目目录,所有后续的 gitnpm 命令就像直接在 geyuxu.com 里执行,自然获得操作该目录文件的权限。

Git 工作流 (git add/commit/push):
脚本用标准 Git 命令处理源代码提交。将 commit message 作为第一个参数 ($1) 传入,增加灵活性。

Astro 构建 (npm run build):
每个 Astro 项目在 package.json 中定义 build 脚本。我们的脚本直接调用它,不用关心构建的内部细节,实现了清晰的分离。

GitHub Pages 部署 (npm run deploy):
我推荐使用 gh-pages npm 包简化部署。在你的 Astro 项目 (geyuxu.com) 中安装它:

npm install gh-pages --save-dev

然后在 geyuxu.com/package.json 中添加 deploy 命令:

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "deploy": "gh-pages -d dist" 
  }
}

gh-pages -d dist 会自动将 dist 目录推送到 gh-pages 分支。

四、使用:一条命令发布

配置好后,发布就很简单了。

  1. 赋予脚本执行权限(只需一次):

    cd /Users/geyuxu/repo/blog/mcp-blog
    chmod +x mcp.sh
    
  2. 发布:
    文章在 geyuxu.com 写完后,运行:

    ./mcp.sh "feat: 添加关于 MCP-Blog 的新文章"
    

看着自动化完成所有工作:

🚀 MCP-Blog 任务启动...
=================================
📂 正在进入博客仓库目录: /Users/geyuxu/repo/blog/geyuxu.com
🔄 正在同步源码到 main 分支...
[main 1234567] feat: 添加关于 MCP-Blog 的新文章
 1 file changed, 1 insertion(+)
 ...
✅ 源码同步完成。
=================================
🛠️  正在构建 Astro 项目...
> [email protected] build
> astro build
...
✅ 构建完成。
=================================
🚀 部署到 GitHub Pages...
> [email protected] deploy
> gh-pages -d dist
Published
✅ 部署成功!
=================================
🎉 所有任务完成,博客已更新!

几分钟后,文章上线。

五、效果与展望

MCP-Blog 用一个简单的 Shell 脚本自动化了发布流程:

可以继续探索的方向:

  1. 命令行创建文章:添加 ./mcp.sh new "文章标题" 来自动生成含 frontmatter 的 Markdown
  2. 升级工具链:用 Node.js 或 Python 重写,提供更好的错误处理和交互体验
  3. 迁移到 GitHub Actionsmain 分支有新 push 时自动触发构建和部署,这是终极自动化

把重复的工作交给机器,我们才能专注于创造更有价值的内容。

© 2026 Yuxu Ge ·