my-edge-blog 项目文档

概览

一个部署在 Cloudflare Workers 上的个人博客系统，纯服务端渲染（SSR），支持多主题切换、管理后台、Markdown 渲染、暗色模式等。共 5,495 行代码。

技术栈

完整功能清单

前端（4 套主题）

管理后台

安全措施

数据库表结构

-- 文章表
posts (id, slug, title, summary, content, cover_image, tags, category,
       published, created_at, updated_at, view_count)

-- 评论表（已建表，待开发）
comments (id, post_id, author, content, created_at)

-- 置顶帖子
pinned_posts (id, post_id, sort_order, created_at)

-- 站点设置
settings (key, value)

-- 社交链接
social_links (id, label, url, icon, sort_order, created_at)

源码结构

my-edge-blog/
├── src/
│   ├── index.ts        (143行) 入口、认证路由、安全中间件
│   ├── routes.ts       (273行) 公开路由（首页/文章/搜索/RSS/sitemap/robots）
│   ├── admin.ts        (310行) 管理后台 CRUD + 主题/设置/上传
│   ├── db.ts           (392行) D1 查询封装 + 内存缓存层
│   ├── auth.ts         (19行) 共享认证模块
│   ├── marked.ts       (46行) Marked 配置 + 自定义渲染器
│   └── templates.tsx   (2147行) 所有 JSX 模板（4主题 Layout + Page）
├── public/
│   ├── common.css      (577行) 共享样式
│   ├── theme-loveit.css     (451行)
│   ├── theme-papermod.css   (354行)
│   ├── theme-minimal.css    (345行)
│   ├── theme-tech.css       (438行)
│   └── robots.txt
├── migrations/ (6 个 SQL 迁移文件)
├── schema.sql          (完整建表 SQL)
├── wrangler.jsonc      (Cloudflare Workers 配置)
├── tsconfig.json       (TypeScript 配置)
└── package.json        (依赖配置)

路由表

部署文档（从头手搓）

前置条件

# 1. 安装 Node.js 18+
# 2. 安装 Wrangler CLI
npm install -g wrangler
# 3. 登录 Cloudflare
wrangler login

项目初始化

# 1. 创建项目目录
mkdir my-edge-blog && cd my-edge-blog

# 2. 初始化项目
npm init -y
npm install hono marked marked-highlight highlight.js
npm install -D wrangler @types/node

# 3. 配置 tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "skipLibCheck": true,
    "lib": ["ESNext"]
  }
}

创建 Cloudflare 资源

# 1. 创建 D1 数据库
wrangler d1 create notion-d1

# 2. 创建 R2 存储桶
wrangler r2 bucket create notion-r2

# 3. 创建 KV namespace
wrangler kv:namespace create ADMIN_KV

# 4. 设置管理员密码
wrangler secret put ADMIN_PASSWORD

配置 wrangler.jsonc

将 d1_databases、r2_buckets、kv_namespaces 中的 ID 替换为上一步创建的值。

数据库初始化

wrangler d1 execute notion-d1 --file schema.sql
# 再依次执行所有 migrations/*.sql

本地开发

npm run dev
# 启动 http://localhost:8787
# 连接生产资源: npx wrangler dev --remote

部署

npm run deploy
# = wrangler deploy --minify

项目亮点

• 零外部 Frontend 框架 — 纯 Hono JSX SSR
• 零 CSS 框架 — 原生 CSS + 自定义属性
• 全站 SSR — 首屏极速
• 多主题架构 — 通过 Layout() 分发函数，新增主题只需加一个函数
• 内存缓存层 — 60s TTL 减少 D1 查询次数
• 边缘部署 — Cloudflare Workers 全球 300+ 节点