Hexo 博客管理器

一个基于 Cloudflare Workers 和 Svelte 的 Hexo 博客管理工具，让您可以在移动设备上轻松管理您的 Hexo 博客。

功能特性 • 快速开始 • 文档 • 在线演示

🌐 在线演示

前端应用: https://writer.qwqc.cc
API 服务: https://writer-api.qwqc.cc

📖 简介

Hexo 博客管理器是一个现代化的博客管理工具，专为 Hexo 静态博客框架设计。它提供了一个优雅的 Web 界面，让您可以在任何设备上（包括移动设备）轻松创建、编辑和管理您的博客文章。

✨ 核心优势

🚀 零服务器成本 - 部署在 Cloudflare Workers，享受免费额度
📱 移动端优先 - 专为移动设备优化的响应式设计
🔐 安全可靠 - 使用 GitHub OAuth 2.0 认证，数据存储在您的仓库
⚡ 全球加速 - Cloudflare 边缘网络，全球访问极速响应
📝 强大编辑器 - 基于 Ace Editor 的 Markdown 编辑器，支持实时预览
🔄 自动保存 - 本地自动保存，防止意外丢失
🖼️ 图片上传 - 支持多种 S3 兼容存储（AWS、阿里云、腾讯云等）
📲 PWA 支持 - 可安装到桌面，支持离线访问

🎯 功能特性

核心功能

✅ GitHub OAuth 认证 - 安全的 GitHub 账户登录和授权
✅ 文章管理 - 创建、编辑、删除文章
✅ Markdown 编辑器 - 基于 Ace Editor 的强大编辑器
✅ 实时预览 - 即时查看 Markdown 渲染效果
✅ 自动保存 - 本地自动保存，手动提交到 GitHub
✅ Hexo 优化 - 自动生成 front-matter 和格式化文件名
✅ 移动端友好 - 响应式设计，完美支持移动设备
✅ 离线编辑 - 支持本地草稿恢复
✅ PWA 支持 - 可安装到桌面，支持离线访问
✅ 图片上传 - 支持拖拽上传和粘贴上传图片
✅ S3 兼容存储 - 支持 AWS S3、阿里云 OSS、腾讯云 COS、七牛云、Cloudflare R2 等

编辑器功能

🎨 语法高亮 - Markdown 语法实时高亮
🔍 搜索替换 - 快速查找和替换文本
📋 剪贴板支持 - 支持粘贴图片自动上传
🖱️ 拖拽上传 - 拖拽图片到编辑器自动上传
⌨️ 快捷键支持 - 常用 Markdown 语法快捷键
📱 移动端快捷栏 - 专为移动端设计的快捷输入工具

存储功能

📦 多种云存储 - 支持 8+ 种 S3 兼容存储服务
🗂️ 路径前缀 - 支持自定义存储路径
🌐 CDN 支持 - 支持自定义 CDN 域名
📊 上传进度 - 实时显示上传进度
↩️ 撤回功能 - 上传后 30 秒内可撤回删除

🛠️ 技术栈

后端

Cloudflare Workers - 边缘计算平台
TypeScript - 类型安全的 JavaScript
GitHub REST API - GitHub 仓库操作
GitHub OAuth 2.0 - 用户认证
Cloudflare KV - 会话存储
AWS Signature V4 - S3 兼容存储签名

前端

Svelte 4 - 现代化的前端框架
Tailwind CSS - 实用优先的 CSS 框架
Ace Editor - 强大的代码编辑器
marked.js - Markdown 解析和渲染
Vite - 快速的构建工具
vite-plugin-pwa - PWA 支持

存储

Cloudflare KV - 会话管理
localStorage - 草稿存储
S3 兼容存储 - 图片存储

🚀 快速开始

前置要求

Node.js 18+
npm 或 yarn
Cloudflare 账户
GitHub 账户

安装

# 克隆仓库
git clone https://github.com/your-username/blogwriter.git
cd blogwriter

# 安装依赖
npm install

配置

1. 创建 GitHub OAuth App

访问 GitHub Developer Settings 创建新的 OAuth App：

Application name: Hexo Blog Manager
Homepage URL: https://your-domain.workers.dev
Authorization callback URL: https://your-api-domain.workers.dev/auth/callback

记录下 Client ID 和 Client Secret。

2. 创建 Cloudflare KV Namespace

npx wrangler kv:namespace create SESSIONS

记录下输出的 id 值。

3. 配置 wrangler.toml

更新 wrangler.toml 中的配置：

[[kv_namespaces]]
binding = "SESSIONS"
id = "your-kv-namespace-id"
preview_id = "your-preview-kv-namespace-id"

[vars]
GITHUB_CLIENT_ID = "your-github-client-id"
GITHUB_REDIRECT_URI = "https://your-api-domain.workers.dev/auth/callback"

4. 设置 GitHub Client Secret

npx wrangler secret put GITHUB_CLIENT_SECRET

粘贴您的 GitHub Client Secret 并按回车。

开发

# 启动前端开发服务器
npm run dev

# 启动 Workers 开发服务器（另一个终端）
npm run wrangler:dev

访问 http://localhost:5173 查看前端。

部署

# 登录 Cloudflare
npx wrangler login

# 部署 Worker（API 服务）
wrangler deploy
# 或
npm run deploy:worker

# 构建前端
npm run build

# 部署 Pages（前端）
npm run deploy:pages
# 或
npm run deploy

快速部署

使用项目提供的部署脚本一键完成所有部署步骤：

bash builddeploy.sh

该脚本会按顺序执行：

部署 Worker（API 服务）
构建前端
部署 Pages（前端）

📚 文档

部署指南 - 详细的部署步骤和配置说明
使用说明 - 完整的使用教程和功能介绍
技术方案 - 项目架构和设计思路

💡 使用说明

创建文章

点击"新建文章"
输入文章标题
使用 Markdown 编辑器编写内容
实时预览渲染效果
点击"保存"按钮提交到 GitHub

编辑文章

在文章列表中点击编辑按钮
修改内容
点击"保存"按钮更新文章

图片上传

在编辑器中拖拽图片
或粘贴图片（Ctrl/Cmd + V）
图片自动上传到配置的 S3 存储
自动插入 Markdown 图片语法

自动保存

编辑器会每 30 秒自动保存到浏览器本地存储
失去焦点时也会自动保存
只有点击"保存"按钮才会提交到 GitHub
下次打开时会提示恢复未保存的草稿

📁 项目结构

blogwriter/
├── src/
│   ├── worker/              # Cloudflare Workers 后端
│   │   ├── index.ts         # Worker 入口，路由分发
│   │   ├── auth.ts          # GitHub OAuth 认证逻辑
│   │   ├── github.ts        # GitHub API 封装
│   │   ├── posts.ts         # 文章 CRUD 操作
│   │   └── upload.ts        # S3 图片上传（AWS Signature V4）
│   ├── app/                 # Svelte 前端
│   │   ├── components/      # UI 组件
│   │   │   ├── Header.svelte
│   │   │   ├── MarkdownEditor.svelte
│   │   │   ├── PreviewPane.svelte
│   │   │   ├── PostList.svelte
│   │   │   └── LoginButton.svelte
│   │   ├── routes/          # 页面路由
│   │   │   ├── +page.svelte         # 首页（文章列表）
│   │   │   ├── login/+page.svelte   # 登录页
│   │   │   ├── new/+page.svelte     # 新建文章
│   │   │   ├── edit/[slug]/+page.svelte  # 编辑文章
│   │   │   └── settings/+page.svelte # 设置页（S3 配置）
│   │   ├── stores/          # Svelte stores
│   │   │   ├── auth.ts      # 认证状态管理
│   │   │   ├── editor.ts    # 编辑器状态管理
│   │   │   └── posts.ts     # 文章列表状态
│   │   ├── lib/             # 工具函数
│   │   │   ├── api.ts       # API 请求封装
│   │   │   ├── hexo.ts      # Hexo 相关工具
│   │   │   ├── pwa.ts       # PWA 更新检测
│   │   │   ├── s3-presets.ts # S3 服务商预设
│   │   │   └── utils.ts     # 通用工具函数
│   │   ├── App.svelte       # 主应用组件（路由）
│   │   ├── main.ts          # 应用入口
│   │   └── app.css          # 全局样式
│   └── shared/              # 共享类型定义
│       └── types.ts         # TypeScript 类型
├── docs/                    # 文档
│   ├── DEPLOYMENT.md
│   └── USAGE.md
├── plans/                   # 计划文档
│   ├── hexo-blog-manager-plan.md
│   └── image-upload-s3.md
├── public/                  # 静态资源（PWA 图标）
│   ├── favicon.ico
│   ├── pwa-64x64.png
│   ├── pwa-192x192.png
│   └── pwa-512x512.png
├── wrangler.toml            # Cloudflare Workers 配置
├── vite.config.ts           # Vite 配置（含 PWA）
├── package.json             # 项目依赖
├── tsconfig.json            # TypeScript 配置
├── tailwind.config.js       # Tailwind CSS 配置
├── README.md                # 项目说明
├── CHANGELOG.md             # 更新日志
└── LICENSE                  # MIT 许可证

🔌 API 文档

认证

方法	路径	说明
GET	`/auth/github`	获取 GitHub OAuth 授权 URL
GET	`/auth/callback`	OAuth 回调处理
GET	`/auth/user`	获取当前用户信息
POST	`/auth/logout`	登出

文章管理

方法	路径	说明
GET	`/api/posts`	获取文章列表
GET	`/api/posts/:path`	获取文章详情
POST	`/api/posts`	创建新文章
PUT	`/api/posts/:path`	更新文章
DELETE	`/api/posts/:path`	删除文章

仓库管理

方法	路径	说明
GET	`/api/repo`	获取仓库信息
GET	`/api/repo/branches`	获取分支列表

图片上传

方法	路径	说明
POST	`/api/upload`	上传图片到 S3 存储
POST	`/api/upload/delete`	删除 S3 存储中的图片

⚙️ 环境变量

变量名	说明	必需
`GITHUB_CLIENT_ID`	GitHub OAuth App Client ID	是
`GITHUB_CLIENT_SECRET`	GitHub OAuth App Client Secret	是
`GITHUB_REDIRECT_URI`	OAuth 回调 URL	是

S3 配置（用户级）

在设置页面配置图片上传的 S3 存储：

配置项	说明
`provider`	服务商标识（aws, aliyun, tencent, qiniu, r2, minio, custom）
`endpoint`	S3 endpoint URL
`region`	区域
`accessKeyId`	Access Key ID
`secretAccessKey`	Secret Access Key
`bucket`	存储桶名称
`publicUrl`	公开访问 URL 前缀（CDN 域名）
`pathPrefix`	路径前缀，如 blog/images
`forcePathStyle`	是否使用路径风格（MinIO 等需要）
`urlSuffix`	URL 后缀，如 -ys（用于 CDN 图片处理样式）

🤝 贡献

欢迎提交 Issue 和 Pull Request！

开发流程

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

代码规范

使用 TypeScript 进行类型检查
遵循 ESLint 规则
编写清晰的提交信息
添加必要的注释

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

Svelte - 现代化的前端框架
Cloudflare Workers - 边缘计算平台
Ace Editor - 强大的代码编辑器
Tailwind CSS - 实用优先的 CSS 框架
Hexo - 快速、简洁且高效的博客框架
marked.js - Markdown 解析器

📞 支持

如有问题，请：

提交 GitHub Issue
查看文档
联系维护者

🌟 Star History

如果这个项目对您有帮助，请给我们一个 Star ⭐️

Made with ❤️ for Hexo bloggers

⬆ 回到顶部

Name		Name	Last commit message	Last commit date
Latest commit History 124 Commits
docs		docs
plans		plans
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
builddeploy.sh		builddeploy.sh
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
test-security.js		test-security.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
wrangler.toml		wrangler.toml

Folders and files

Latest commit

History

Repository files navigation

Hexo 博客管理器

🌐 在线演示

📖 简介

✨ 核心优势

🎯 功能特性

核心功能

编辑器功能

存储功能

🛠️ 技术栈

后端

前端

存储

🚀 快速开始

前置要求

安装

配置

1. 创建 GitHub OAuth App

2. 创建 Cloudflare KV Namespace

3. 配置 wrangler.toml

4. 设置 GitHub Client Secret

开发

部署

快速部署

📚 文档

💡 使用说明

登录

创建文章

编辑文章

图片上传

自动保存

📁 项目结构

🔌 API 文档

认证

文章管理

仓库管理

图片上传

⚙️ 环境变量

S3 配置（用户级）

🤝 贡献

开发流程

代码规范

📄 许可证

🙏 致谢

📞 支持

🌟 Star History

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages