{"id":31696579,"url":"https://github.com/h7ml/html2web","last_synced_at":"2025-10-13T18:01:25.760Z","repository":{"id":318483386,"uuid":"1071461482","full_name":"h7ml/html2web","owner":"h7ml","description":"HTML2WEB - 粘贴代码，分享创意！一个支持 HTML 和 Markdown 在线编辑、预览和分享的现代化平台","archived":false,"fork":false,"pushed_at":"2025-10-07T13:55:46.000Z","size":358,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T14:13:40.730Z","etag":null,"topics":["cloudflare-pages","code-editor","editor","html","html-editor","markdown","markdown-editor","monaco-editor","nextjs","prisma","react","shadcn-ui","socket-io","typescript","web-development"],"latest_commit_sha":null,"homepage":"https://html2web.h7ml.cn/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/h7ml.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-07T11:36:06.000Z","updated_at":"2025-10-07T13:55:49.000Z","dependencies_parsed_at":"2025-10-07T14:13:58.531Z","dependency_job_id":"d01ef4fe-ab26-4e41-8083-a1c1b3b53c67","html_url":"https://github.com/h7ml/html2web","commit_stats":null,"previous_names":["h7ml/html2web"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/h7ml/html2web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h7ml%2Fhtml2web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h7ml%2Fhtml2web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h7ml%2Fhtml2web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h7ml%2Fhtml2web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/h7ml","download_url":"https://codeload.github.com/h7ml/html2web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h7ml%2Fhtml2web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016072,"owners_count":26085800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudflare-pages","code-editor","editor","html","html-editor","markdown","markdown-editor","monaco-editor","nextjs","prisma","react","shadcn-ui","socket-io","typescript","web-development"],"created_at":"2025-10-08T17:09:06.881Z","updated_at":"2025-10-13T18:01:25.719Z","avatar_url":"https://github.com/h7ml.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML2WEB - 粘贴代码，分享创意！\n\n\u003cdiv align=\"center\"\u003e\n\n[![Version](https://img.shields.io/github/v/release/h7ml/html2web?style=flat-square\u0026logo=github\u0026label=版本)](https://github.com/h7ml/html2web/releases)\n[![License](https://img.shields.io/github/license/h7ml/html2web?style=flat-square\u0026logo=opensourceinitiative\u0026logoColor=white\u0026label=许可证)](https://github.com/h7ml/html2web/blob/main/LICENSE)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/h7ml/html2web/ci.yml?style=flat-square\u0026logo=githubactions\u0026logoColor=white\u0026label=构建状态)](https://github.com/h7ml/html2web/actions)\n[![Vercel](https://img.shields.io/badge/部署平台-Vercel-000000?style=flat-square\u0026logo=vercel)](https://html2web.h7ml.cn)\n\n![Next.js](https://img.shields.io/badge/Next.js-15.3.5-black?style=flat-square\u0026logo=next.js)\n![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square\u0026logo=react)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square\u0026logo=typescript)\n![Prisma](https://img.shields.io/badge/Prisma-6.16-2D3748?style=flat-square\u0026logo=prisma)\n![Socket.IO](https://img.shields.io/badge/Socket.IO-4.8-010101?style=flat-square\u0026logo=socketdotio)\n\n[![GitHub stars](https://img.shields.io/github/stars/h7ml/html2web?style=flat-square\u0026logo=github\u0026label=Stars)](https://github.com/h7ml/html2web)\n[![GitHub forks](https://img.shields.io/github/forks/h7ml/html2web?style=flat-square\u0026logo=github\u0026label=Forks)](https://github.com/h7ml/html2web)\n[![GitHub issues](https://img.shields.io/github/issues/h7ml/html2web?style=flat-square\u0026logo=github\u0026label=Issues)](https://github.com/h7ml/html2web/issues)\n[![Downloads](https://img.shields.io/github/downloads/h7ml/html2web/total?style=flat-square\u0026logo=github\u0026label=下载量)](https://github.com/h7ml/html2web/releases)\n[![Contributors](https://img.shields.io/github/contributors/h7ml/html2web?style=flat-square\u0026logo=github\u0026label=贡献者)](https://github.com/h7ml/html2web/graphs/contributors)\n\n**一个支持 HTML 和 Markdown 在线编辑、预览和分享的现代化平台**\n\n[在线演示](https://html2web.h7ml.cn) · [报告问题](https://github.com/h7ml/html2web/issues) · [功能建议](https://github.com/h7ml/html2web/issues)\n\n\u003c/div\u003e\n\n---\n\n## ✨ 核心特性\n\n- 🎨 **Monaco Editor** - 专业的代码编辑器，支持语法高亮和智能提示\n- 📝 **双模式支持** - HTML 和 Markdown 两种编辑模式自由切换\n- 👁️ **实时预览** - 所见即所得的编辑体验\n- 🔗 **一键分享** - 生成永久分享链接，轻松分享你的创意\n- 🔐 **管理系统** - 完善的后台管理，支持文件增删改查\n- 🌓 **主题切换** - 支持亮色/暗色主题\n- 📱 **响应式设计** - 完美适配各种设备屏幕\n- ⚡ **实时通信** - Socket.IO 支持，未来可扩展协作功能\n- 🗄️ **数据持久化** - Prisma + SQLite 数据库存储\n\n## 🚀 快速开始\n\n### 前置要求\n\n- Node.js 18+\n- npm/pnpm\n\n### 安装步骤\n\n```bash\n# 克隆项目\ngit clone git@github.com:h7ml/html2web.git\ncd html2web\n\n# 安装依赖\nnpm install\n\n# 配置环境变量（可选，使用默认配置即可）\ncp .env.example .env\n\n# 初始化数据库和管理员账号\nnpm run db:setup\n\n# 启动开发服务器\nnpm run dev\n```\n\n打开浏览器访问 [http://localhost:3000](http://localhost:3000)\n\n### 默认管理员账号\n\n- **用户名**: `admin`\n- **密码**: `123456`\n- **登录地址**: [http://localhost:3000/admin/login](http://localhost:3000/admin/login)\n\n## 📦 技术栈\n\n本项目由以下现代化技术驱动：\n\n### 核心框架\n\n- **[Next.js 15.3.5](https://nextjs.org/)** - React 服务端渲染框架，使用 App Router 架构\n- **[React 19](https://react.dev/)** - 现代化的用户界面构建库\n- **[TypeScript 5](https://www.typescriptlang.org/)** - 类型安全的 JavaScript 超集\n- **[Tailwind CSS 4](https://tailwindcss.com/)** - 实用优先的原子化 CSS 框架\n\n### UI 组件库\n\n- **[shadcn/ui](https://ui.shadcn.com/)** - 高质量、可定制的 React 组件集合（基于 Radix UI）\n- **[@monaco-editor/react](https://microsoft.github.io/monaco-editor/)** - VS Code 同款代码编辑器，支持语法高亮和智能提示\n- **[Lucide React](https://lucide.dev/)** - 简洁美观的开源图标库（600+ 图标）\n- **[Framer Motion](https://www.framer.com/motion/)** - 流畅的动画和手势库\n- **[Sonner](https://sonner.emilkowal.ski/)** - 优雅的 Toast 通知组件\n\n### 数据库与 ORM\n\n- **[Prisma 6.16.3](https://www.prisma.io/)** - 类型安全的现代化 ORM\n- **[SQLite](https://www.sqlite.org/)** - 轻量级嵌入式数据库（支持切换到 PostgreSQL/MySQL）\n\n### 实时通信\n\n- **[Socket.IO 4.8.1](https://socket.io/)** - 可靠的实时双向事件通信库（支持 WebSocket、长轮询等传输方式）\n\n### 表单与验证\n\n- **[React Hook Form](https://react-hook-form.com/)** - 高性能、灵活的表单处理库\n- **[Zod](https://zod.dev/)** - TypeScript 优先的 Schema 验证库\n- **[@hookform/resolvers](https://github.com/react-hook-form/resolvers)** - 表单验证解析器集合\n\n### Markdown 处理\n\n- **[remark](https://remark.js.org/)** - Markdown 处理器核心\n- **[remark-gfm](https://github.com/remarkjs/remark-gfm)** - GitHub Flavored Markdown 支持\n- **[remark-rehype](https://github.com/remarkjs/remark-rehype)** - Markdown 到 HTML 转换\n- **[rehype-highlight](https://github.com/rehypejs/rehype-highlight)** - 代码语法高亮（基于 highlight.js）\n- **[rehype-raw](https://github.com/rehypejs/rehype-raw)** - 解析 Markdown 中的原始 HTML\n\n### 认证与安全\n\n- **[jsonwebtoken](https://github.com/auth0/node-jsonwebtoken)** - JWT 生成与验证\n- **[bcryptjs](https://github.com/dcodeIO/bcrypt.js)** - 密码加密库\n\n### 工具库\n\n- **[Axios](https://axios-http.com/)** - 基于 Promise 的 HTTP 客户端\n- **[date-fns](https://date-fns.org/)** - 现代化的日期工具库\n- **[clsx](https://github.com/lukeed/clsx)** + **[tailwind-merge](https://github.com/dcastil/tailwind-merge)** - 条件化 className 合并\n- **[uuid](https://github.com/uuidjs/uuid)** - 唯一标识符生成\n\n### 开发工具\n\n- **[ESLint 9](https://eslint.org/)** - JavaScript/TypeScript 代码检查\n- **[Nodemon](https://nodemon.io/)** - 开发环境自动重启\n- **[tsx](https://tsx.is/)** - TypeScript 脚本执行器\n\n### 部署平台\n\n- **[Vercel](https://vercel.com/)** - Next.js 官方推荐的无服务器部署平台（本项目已部署）\n\n---\n\n## 📁 项目结构\n\n```\nhtml2web/\n├── prisma/\n│   └── schema.prisma          # 数据库模型定义\n├── scripts/\n│   └── init-admin.ts          # 管理员初始化脚本\n├── src/\n│   ├── app/\n│   │   ├── admin/            # 管理后台页面\n│   │   ├── api/              # API 路由\n│   │   │   ├── admin/        # 管理员认证\n│   │   │   ├── files/        # 文件管理\n│   │   │   ├── markdown/     # Markdown 处理\n│   │   │   └── share/        # 分享功能\n│   │   ├── preview/          # 预览页面\n│   │   └── page.tsx          # 主页\n│   ├── components/\n│   │   ├── ui/               # shadcn/ui 组件\n│   │   └── MonacoEditor.tsx  # Monaco 编辑器封装\n│   └── lib/\n│       ├── db.ts             # Prisma 客户端\n│       ├── socket.js         # Socket.IO 配置\n│       └── utils.ts          # 工具函数\n├── server.js                 # 自定义服务器（集成 Socket.IO）\n├── .env                      # 环境变量配置\n└── package.json              # 依赖配置\n```\n\n## 🎯 主要功能\n\n### 1. 代码编辑\n\n- Monaco Editor 提供专业的编辑体验\n- 支持语法高亮、代码补全、快捷键等\n- HTML 和 Markdown 双模式\n\n### 2. 实时预览\n\n- 所见即所得的预览\n- 支持 HTML 直接渲染\n- Markdown 自动转换为 HTML（支持 GitHub Flavored Markdown）\n\n### 3. 文件管理\n\n- 创建、编辑、删除文件\n- 公开/私密设置\n- 文件列表查看\n- 管理员权限控制\n\n### 4. 分享系统\n\n- 生成唯一的分享链接\n- 永久访问，无需登录\n- 支持复制分享链接\n\n### 5. 管理后台\n\n- JWT 身份验证\n- 文件列表管理\n- 密码修改\n- 操作日志\n\n## 🛠️ 可用脚本\n\n```bash\n# 开发\nnpm run dev              # 启动开发服务器（带 hot reload）\n\n# 构建\nnpm run build            # 构建生产版本\nnpm start                # 启动生产服务器\n\n# 数据库\nnpm run db:setup         # 一键初始化（生成 Client + 推送 Schema + 创建管理员）\nnpm run db:push          # 推送 Schema 到数据库\nnpm run db:generate      # 生成 Prisma Client\nnpm run db:migrate       # 创建迁移文件\nnpm run db:reset         # 重置数据库\n\n# 代码质量\nnpm run lint             # ESLint 检查\n```\n\n## 🔐 环境变量\n\n创建 `.env` 文件：\n\n```env\n# 数据库连接（SQLite 默认）\nDATABASE_URL=\"file:./dev.db\"\n\n# JWT 密钥（生产环境务必更换）\nJWT_SECRET=\"your-super-secret-key-change-in-production\"\n```\n\n## 📝 API 文档\n\n访问 [https://html2web.h7ml.cn/api-docs](https://html2web.h7ml.cn/api-docs) 查看完整的 API 文档。\n\n### 主要 API 端点\n\n| 端点                       | 方法             | 描述           |\n| -------------------------- | ---------------- | -------------- |\n| `/api/admin/auth`          | POST / GET       | 登录 / 验证    |\n| `/api/admin/password`      | POST             | 修改密码       |\n| `/api/files`               | GET / POST       | 文件列表 / 创建 |\n| `/api/files/[id]`          | GET / PUT / DELETE | 文件详情 / 更新 / 删除 |\n| `/api/markdown`            | POST             | Markdown 转 HTML |\n| `/api/share`               | POST / GET       | 创建 / 获取分享 |\n| `/api/health`              | GET              | 健康检查       |\n\n## 🌐 部署\n\n### Vercel（已部署 - 推荐）\n\n本项目已部署至 **Vercel**，访问地址：[https://html2web.h7ml.cn](https://html2web.h7ml.cn)\n\n#### 自行部署到 Vercel\n\n```bash\n# 方式 1: 使用 Vercel CLI\nnpm i -g vercel\nvercel --prod\n\n# 方式 2: 通过 GitHub 自动部署\n# 1. Fork 本仓库\n# 2. 访问 https://vercel.com/new 导入项目\n# 3. 选择 vercel-deploy 分支\n# 4. 配置环境变量后部署\n```\n\n**必需环境变量**：\n- `DATABASE_URL` - 数据库连接字符串（推荐 Vercel Postgres 或 Neon）\n- `JWT_SECRET` - JWT 密钥（至少 32 字符）\n\n**⚠️ 注意事项**：\n- Vercel 不支持自定义 Node.js 服务器\n- Socket.IO 功能需使用 Vercel Serverless Functions 改造\n- 建议使用 Vercel Postgres 或外部 PostgreSQL 数据库\n\n---\n\n### Cloudflare Pages（备用方案 - 免费且快速）\n\n#### 前置条件\n\n- Cloudflare 账号\n- GitHub 账号（用于自动部署）\n- 外部数据库（推荐 Neon PostgreSQL 或 PlanetScale MySQL）\n\n#### 部署步骤\n\n1. **准备外部数据库**\n\n```bash\n# 使用 Neon（推荐 - PostgreSQL）\n# 1. 访问 https://neon.tech 创建免费数据库\n# 2. 获取连接字符串，如：postgresql://user:pass@host/db?sslmode=require\n\n# 或使用 PlanetScale（MySQL）\n# 1. 访问 https://planetscale.com 创建免费数据库\n# 2. 获取连接字符串\n```\n\n2. **更新 Prisma Schema**\n\n```prisma\n// prisma/schema.prisma\ndatasource db {\n  provider = \"postgresql\" // 或 \"mysql\"\n  url      = env(\"DATABASE_URL\")\n}\n```\n\n3. **在 Cloudflare Dashboard 部署**\n\n- 登录 [Cloudflare Dashboard](https://dash.cloudflare.com)\n- 进入 **Workers \u0026 Pages** \u003e **Create Application** \u003e **Pages** \u003e **Connect to Git**\n- 选择 `h7ml/html2web` 仓库\n- 配置构建设置：\n  - **Framework preset**: `Next.js`\n  - **Build command**: `npm run build`\n  - **Build output directory**: `.next`\n  - **Root directory**: `/`\n- 添加环境变量：\n  - `DATABASE_URL`: 你的数据库连接字符串\n  - `JWT_SECRET`: 生产环境密钥（至少 32 字符）\n  - `CF_PAGES`: `true`（启用 Cloudflare 优化）\n- 点击 **Save and Deploy**\n\n4. **初始化数据库**\n\n```bash\n# 本地执行（使用生产数据库 URL）\nDATABASE_URL=\"你的数据库URL\" npm run db:push\nDATABASE_URL=\"你的数据库URL\" npx tsx scripts/init-admin.ts\n```\n\n#### 注意事项\n\n⚠️ **Cloudflare 限制**：\n- **不支持 Socket.IO**：实时通信功能在 Cloudflare 上不可用（可用 Cloudflare Durable Objects 替代，需额外开发）\n- **函数执行时间限制**：免费版最多 100ms CPU 时间\n- **冷启动**：首次请求可能较慢\n\n✅ **优化建议**：\n- 使用 **Cloudflare Images** 处理图片\n- 启用 **Cloudflare R2** 存储大文件\n- 使用 **Cloudflare D1**（SQLite）作为数据库（需调整代码）\n\n---\n\n### Vercel（简单快速）\n\n```bash\n# 安装 Vercel CLI\nnpm i -g vercel\n\n# 部署\nvercel\n\n# 配置环境变量（在 Vercel Dashboard）\n# - DATABASE_URL\n# - JWT_SECRET\n```\n\n---\n\n### Docker\n\n```dockerfile\nFROM node:18-alpine\n\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nRUN npm run build\nRUN npm run db:setup\n\nEXPOSE 3000\nCMD [\"npm\", \"start\"]\n```\n\n---\n\n### 传统服务器\n\n```bash\n# 构建\nnpm run build\n\n# 配置环境变量\nexport NODE_ENV=production\nexport DATABASE_URL=\"file:./prod.db\"\nexport JWT_SECRET=\"your-production-secret\"\n\n# 初始化数据库\nnpm run db:push\nnpx tsx scripts/init-admin.ts\n\n# 启动\nnpm start\n```\n\n## 🤝 贡献\n\n欢迎贡献代码！请查看 [CONTRIBUTING.md](CONTRIBUTING.md) 了解详情。\n\n1. Fork 本仓库\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启 Pull Request\n\n## 📄 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 🙏 致谢\n\n- [Next.js](https://nextjs.org/) - React 框架\n- [shadcn/ui](https://ui.shadcn.com/) - 组件库\n- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - 代码编辑器\n- [Prisma](https://www.prisma.io/) - ORM\n- [Socket.IO](https://socket.io/) - 实时通信\n\n## 📮 联系方式\n\n- GitHub Issues: [https://github.com/h7ml/html2web/issues](https://github.com/h7ml/html2web/issues)\n- 邮箱: [your-email@example.com](mailto:your-email@example.com)\n\n---\n\n**⭐ 如果这个项目对你有帮助，请给一个 Star！**\n\nMade with ❤️ by [h7ml](https://github.com/h7ml)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh7ml%2Fhtml2web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh7ml%2Fhtml2web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh7ml%2Fhtml2web/lists"}