BinNav-静态导航有后台，免费部署EdgeOne Pages或Cloudflare Pages

一个现代化的网站导航页面，支持可视化管理后台、智能图标获取、拖拽排序、自动申请提交和邮件发送功能和自动部署更新。部署至EdgeOne Pages无需服务器或者cloudflare Pages。

项目预览

• 原项目地址：https://github.com/sindricn/BinNav_Public

项目样式：

首页预览：

管理后台：                         

EdgeOne Pages部署：

1.首先先将项目Fork到自己的仓库下

2.打开腾讯EdgeOne

选择上方的pages。

3.点击创建项目——导入Git仓库——选择自己刚刚Fork的项目

4.添加环境变量并部署

5.部署后可以自定义域名进行访问

 环境变量配置

基础配置

项目可以零配置运行，但为了完整功能体验，建议配置以下环境变量：

变量名	描述	必需	默认值	功能影响
ADMIN_PASSWORD	管理后台登录密码	否	admin	未设置时使用默认密码
GITHUB_TOKEN	GitHub Personal Access Token	否	–	未设置时无法自动保存配置到GitHub
GITHUB_REPO	GitHub仓库名（格式：用户名/仓库名）	否	–	未设置时无法自动保存配置到GitHub
RESEND_API_KEY	Resend API Key，用于邮件服务	否	–	未设置时无法发送邮件通知
ADMIN_EMAIL	管理员邮箱，接收新站点提交通知	否	–	未设置时无法接收邮件通知
RESEND_DOMAIN	Resend发送域名（仅域名部分）	否	–	未设置时无法发送邮件通知

• 基础功能：无需任何配置即可正常使用导航和管理后台
• 自动保存：需要配置 GITHUB_TOKEN 和 GITHUB_REPO
• 邮件通知：需要配置 RESEND_API_KEY、ADMIN_EMAIL 和 RESEND_DOMAIN

• 用户名：无需用户名，仅需密码
• 默认密码：admin（建议生产环境修改）
• 访问地址：/admin

1. 访问 GitHub Settings > Tokens
2. 点击 “Generate new token (classic)”
3. 选择 repo 权限
4. 复制生成的 token

Resend 邮件功能配置指南

binnav 集成了 Resend 的邮件发送能力，用户可在前端页面填写反馈，自动发送邮件至指定邮箱。你只需完成以下三步，即可启用该功能：

1. 访问官网 https://resend.com
2. 使用邮箱或 GitHub 账户注册并登录

1. 登录后，点击左侧菜单栏 API Keys
2. 点击右上角 Create API Key
3. 输入名称（如 binnav Key），点击生成
4. 复制生成的 key（如 re_xxxxxxxxxxxxxxxxx）并保存备用

1. 左侧菜单进入 Domains → 点击 Add Domain
2. 输入你的域名（如 yourdomain.com），或使用 Resend 提供的免费二级域名
3. 按照提示添加 DNS 记录以完成验证

本地开发

# 1. 克隆项目
git clone https://github.com/sindricn/BinNav.git
cd BinNav

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

访问地址：

• 🏠 首页: http://localhost:5173
• ⚙️ 管理后台: http://localhost:5173/admin（默认密码：admin）

常见问题

Q: 如何登录管理后台？

A: 管理后台登录信息：

• 访问地址：/admin
• 用户名：无需用户名
• 默认密码：admin
• 修改密码：设置环境变量 ADMIN_PASSWORD

Q: 为什么无法自动保存配置？

A: 自动保存功能需要配置：

• GITHUB_TOKEN – GitHub访问令牌
• GITHUB_REPO – 仓库名称（格式：用户名/仓库名）
• 未配置时可手动下载配置文件

Q: 邮件通知功能如何配置？

A: 邮件通知需要配置：

• RESEND_API_KEY – Resend API密钥
• ADMIN_EMAIL – 管理员邮箱
• RESEND_DOMAIN – 发送域名
• 未配置时用户提交不会发送邮件通知

贡献指南

欢迎参与 BinNav 的开发！🌟 如果这个项目对你有帮助，请给个 Star ⭐