HTML2WEB - 粘贴代码,分享创意!

Version License Build Status Vercel

Next.js React TypeScript Prisma Socket.IO

GitHub stars GitHub forks GitHub issues Downloads Contributors

一个支持 HTML 和 Markdown 在线编辑、预览和分享的现代化平台

在线演示 · 报告问题 · 功能建议

✨ 核心特性

🚀 快速开始

前置要求

安装步骤

# 克隆项目
git clone git@github.com:h7ml/html2web.git
cd html2web
# 安装依赖
npm install
# 配置环境变量(可选,使用默认配置即可)
cp .env.example .env
# 初始化数据库和管理员账号
npm run db:setup
# 启动开发服务器
npm run dev

默认管理员账号

📦 技术栈

核心框架

UI 组件库

数据库与 ORM

实时通信

表单与验证

Markdown 处理

认证与安全

工具库

开发工具

部署平台

📁 项目结构

html2web/
├── prisma/
│ └── schema.prisma # 数据库模型定义
├── scripts/
│ └── init-admin.ts # 管理员初始化脚本
├── src/
│ ├── app/
│ │ ├── admin/ # 管理后台页面
│ │ ├── api/ # API 路由
│ │ │ ├── admin/ # 管理员认证
│ │ │ ├── files/ # 文件管理
│ │ │ ├── markdown/ # Markdown 处理
│ │ │ └── share/ # 分享功能
│ │ ├── preview/ # 预览页面
│ │ └── page.tsx # 主页
│ ├── components/
│ │ ├── ui/ # shadcn/ui 组件
│ │ └── MonacoEditor.tsx # Monaco 编辑器封装
│ └── lib/
│ ├── db.ts # Prisma 客户端
│ ├── socket.js # Socket.IO 配置
│ └── utils.ts # 工具函数
├── server.js # 自定义服务器(集成 Socket.IO)
├── .env # 环境变量配置
└── package.json # 依赖配置

🎯 主要功能

1. 代码编辑

2. 实时预览

3. 文件管理

4. 分享系统

5. 管理后台

🛠️ 可用脚本

# 开发
npm run dev # 启动开发服务器(带 hot reload)
# 构建
npm run build # 构建生产版本
npm start # 启动生产服务器
# 数据库
npm run db:setup # 一键初始化(生成 Client + 推送 Schema + 创建管理员)
npm run db:push # 推送 Schema 到数据库
npm run db:generate # 生成 Prisma Client
npm run db:migrate # 创建迁移文件
npm run db:reset # 重置数据库
# 代码质量
npm run lint # ESLint 检查

🔐 环境变量

# 数据库连接(SQLite 默认)
DATABASE_URL="file:./dev.db"
# JWT 密钥(生产环境务必更换)
JWT_SECRET="your-super-secret-key-change-in-production"

📝 API 文档

主要 API 端点

🌐 部署

Vercel(已部署 - 推荐)

自行部署到 Vercel

# 方式 1: 使用 Vercel CLI
npm i -g vercel
vercel --prod
# 方式 2: 通过 GitHub 自动部署
# 1. Fork 本仓库
# 2. 访问 https://vercel.com/new 导入项目
# 3. 选择 vercel-deploy 分支
# 4. 配置环境变量后部署

Cloudflare Pages(备用方案 - 免费且快速)

前置条件

部署步骤

# 使用 Neon(推荐 - PostgreSQL)
# 1. 访问 https://neon.tech 创建免费数据库
# 2. 获取连接字符串,如:postgresql://user:pass@host/db?sslmode=require
# 或使用 PlanetScale(MySQL)
# 1. 访问 https://planetscale.com 创建免费数据库
# 2. 获取连接字符串

// prisma/schema.prisma
datasource db {
 provider = "postgresql" // 或 "mysql"
 url = env("DATABASE_URL")
}

# 本地执行(使用生产数据库 URL)
DATABASE_URL="你的数据库URL" npm run db:push
DATABASE_URL="你的数据库URL" npx tsx scripts/init-admin.ts

注意事项

Vercel(简单快速)

# 安装 Vercel CLI
npm i -g vercel
# 部署
vercel
# 配置环境变量(在 Vercel Dashboard)
# - DATABASE_URL
# - JWT_SECRET

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
RUN npm run db:setup
EXPOSE 3000
CMD ["npm", "start"]

传统服务器

# 构建
npm run build
# 配置环境变量
export NODE_ENV=production
export DATABASE_URL="file:./prod.db"
export JWT_SECRET="your-production-secret"
# 初始化数据库
npm run db:push
npx tsx scripts/init-admin.ts
# 启动
npm start

🤝 贡献

📄 许可证

🙏 致谢

📮 联系方式