每次写完博客文章，你是不是也经历过这些？

打开 VS Code 写 Markdown → 复制内容 → 粘贴到 GitHub → commit → 等部署 → 检查效果 → 发现图片挂了 → 回去改 → 再推送……

一篇文章发布要折腾 20 分钟，更别提还要单独处理公众号排版。

今天，我把这套流程砍到了 1 分钟。

Markdown 编辑器与博客发布示意

起因：一个偷懒的想法

我的博客用的是 Hexo + Butterfly 主题，部署在 Cloudflare Pages 上。之前每次写文章的流程是：

  1. 本地建 Markdown 文件
  2. 用 VS Code 编辑
  3. 手动上传图片到 R2
  4. 复制图片链接粘贴到 Markdown
  5. git commit + push
  6. 等 CF Pages 部署（1-2 分钟）
  7. 去浏览器检查效果
  8. 如果要发公众号，还得重新排版一遍

8 个步骤，每篇至少 30 分钟。

后来我想，能不能直接在网页上写，写完点一下”发布”就搞定？就像写微信公众号那样简单，但同时也能发到博客。

于是，我开始动手了。

先看看最终效果

编辑器部署在 admin.233002.xyz/editor，长这样：

Markdown 编辑器界面

左边是 Markdown 源码，右边是实时预览。顶部有工具栏，底部有发布按钮。整体风格跟博客保持一致，暗色主题。

核心功能拆解

1. 实时预览

写 Markdown 的时候，右边立刻就能看到渲染效果。不用等到部署后才发现排版问题。

支持的功能：

  • 标题、粗体、斜体、删除线
  • 代码块（带语法高亮）
  • 表格
  • 引用块
  • 有序/无序列表
  • 链接和图片

2. 图片拖拽上传

这是最实用的功能。直接把图片拖进编辑器，自动上传到 R2 存储桶，返回图片链接自动插入到 Markdown 里。

编辑器工具栏与图片管理

不用再去 R2 后台手动上传、复制链接、拼 Markdown 语法了。

鼠标悬停在图片上还能一键删除，同时清理 R2 上的文件，不会产生垃圾数据。

3. 智能工具栏

工具栏提供了常用的 Markdown 语法快捷插入：

按钮 功能
B 加粗
I 斜体
<> 行内代码
H2/H3 二级/三级标题
「」 引用块
≡ 列表
⎘ 代码块
📷 图片上传
➖ 分割线

点一下就插入对应语法，不用手记 Markdown 语法。

4. 自动生成 URL 别名

每个博客文章都需要一个 URL 别名（Slug），比如 /2026/06/06/tech/markdown-editor/ 里的 markdown-editor。

编辑器会根据标题自动生成：

  • 英文标题 → my-blog-post
  • 中文标题 → 基于日期生成

不用再手动想了。

5. 一键双发布

这是整个项目最核心的功能——写一次内容，同时发布到两个平台：

一键双发布流程

博客端：

  • Markdown 内容推送到 GitHub 仓库
  • Cloudflare Pages 自动构建部署
  • 图片走 R2 CDN 加速

公众号端：

  • Markdown 自动转换为微信兼容的 HTML
  • 图片上传到微信素材库
  • 自动生成草稿，你只需要点”发布”

质量检查

写完文章点发布之前，编辑器会自动检查文章质量：

质量检查面板

检查项包括：

  • ✅ 标题字数（中文不超过 21 字，英文不超过 64 字节）
  • ✅ 图片数量（至少 2 张，建议 6-8 张）
  • ✅ 文章长度（800-2000 字为最佳区间）
  • ✅ 段落数量（至少 3 段）
  • ✅ 摘要是否填写
  • ✅ 分类是否选择
  • ✅ Slug 是否设置

全部通过才能发布，避免低质量内容流出。

自动保存草稿

写到一半浏览器崩了？没关系。

编辑器每 5 秒自动保存一次草稿到浏览器本地存储。下次打开编辑器，内容自动恢复。发布成功后自动清除草稿。

再也不用担心写到一半内容丢失了。

技术栈

整个项目分两个仓库：

组件 技术 说明
前端 Vue 3 + Vite 编辑器界面
后端 Hono (Cloudflare Worker) API 接口
存储 Cloudflare R2 图片存储
部署 CF Pages + Worker 前后端分离
发布 GitHub API + 微信 API 双平台推送

前端部署在 admin.233002.xyz，后端是 Cloudflare Worker，图片存在 R2 上通过 img.233002.xyz 加速访问。

总结

从”打开 VS Code 写文章”到”打开浏览器写文章”，看似只是换了个编辑器，实际上是把整个发布流程自动化了。

之前： 写文章 30 分钟 + 发布 20 分钟 = 50 分钟
现在： 写文章 30 分钟 + 发布 1 分钟 = 31 分钟

省下来的时间，可以多写一篇文章。

Markdown 编辑器开发工作台

你也在用 Hexo 或其他静态博客吗？ 你平时写文章的流程是什么样的？欢迎在评论区分享你的效率工具 👇