AI repository intelligence

FR-AI / ANALYSIS

Why it is worth attention

It offers a complete, zero-cost serverless navigation solution with easy Git-based deployment, built-in backup/migration, and the flexibility to skip R2 and use external image URLs.

Who it is for

Developers seeking a serverless project to learn Cloudflare ecosystem
Individuals wanting to create a personal bookmark or navigation site
Teams needing a lightweight internal resource hub
Tech enthusiasts interested in Cloudflare D1, R2, and Hono integration

Use cases

Personal start page for organizing frequently used links
Team portal for sharing internal tools and resources
Demo or reference project for learning Cloudflare Pages Functions and D1
Self-hosted alternative to cloud bookmarking services

Strengths

Entirely serverless and runs on Cloudflare free tier with generous quotas
Supports both R2 image uploads and pure external URLs, offering deployment flexibility
Includes a full admin panel with JWT authentication and data backup/import
Easy one-click deploy via Git integration with Cloudflare Pages

Considerations

Tightly coupled to Cloudflare ecosystem (D1, R2, Pages Functions)
Local development requires Wrangler CLI and manual database configuration
Upload/ image library features depend on R2; without it those backend features are unavailable

README quick start

Nav-item · 导航站（Cloudflare 全家桶版）

👨‍💻 致谢

基于 eooce 的 nav-item 改造为 Cloudflare Pages 部署版。

一个现代化的导航网站：Vue 3 前端 + Cloudflare Pages Functions (Hono) 后端，数据存 Cloudflare D1，图片存 Cloudflare R2。完全 Serverless，可跑在 Cloudflare 免费额度上，Fork 一下、连接 Git 就能部署。

📸 项目预览

首页导航	后台管理

🛠️ 技术栈

前端：Vue 3 + Vue Router + Vite（构建产物输出到 web/dist）
后端：Cloudflare Pages Functions + Hono
数据库：Cloudflare D1（SQLite 兼容）
对象存储：Cloudflare R2（上传的图标 / 背景图）
认证：JWT（hono/jwt）+ bcryptjs

⚙️ 绑定与变量一览

名称	类型	必需	说明
`DB`	D1	✅	主数据库
`BUCKET`	R2	⬜	上传的图标 / 背景图（不绑定则改用外链，详见下方）
`JWT_SECRET`	机密/变量	✅	JWT 签名密钥，生产环境务必用强随机值
`TOKEN_TTL_HOURS`	变量	⬜	登录 token 有效期（小时），默认 `168`（7 天）

🚀 快速部署（推荐：连接 Git 自动部署）

准备工作：一个 Cloudflare 账号 + 一个 GitHub 账号。

步骤 1：Fork / 推送本仓库到 GitHub

把本项目推到你自己的 GitHub 仓库（或 Fork 原仓库）。

步骤 2：连接到 Cloudflare Pages

进入 Cloudflare 控制台 → Workers 和 Pages → 创建 → Pages → 连接到 Git，授权并选择你的仓库。在构建设置里填：

设置项	值
框架预设 Framework preset	`None`（无）
构建命令 Build command	`npm run build`
构建输出目录 Build output directory	`web/dist`

其余保持默认，点击 保存并部署。（首次部署因为还没绑定数据库，/api/* 会报错，属正常，绑定后重新部署即可。）

步骤 3：创建 D1 数据库

控制台 → 存储和数据库 → D1 SQL 数据库 → 创建，名称填 nav-item-db。

步骤 4：创建 R2 存储桶

控制台 → R2 对象存储 → 创建存储桶，名称填 nav-item-uploads。

🖼️ 不使用 R2（纯外链模式）

R2 只用来存"从后台上传的图片文件"，卡片图标、背景图、Favicon、广告图、友链 logo 这些字段本身在 D1 里就是普通的 URL 字符串，与 R2 无关。所以可以完全不绑定 R2，只用外链（图床 / 图片 API / 任意可访问的图片 URL）：

部署时跳过「步骤 4：创建 R2 存储桶」和「步骤 5」中 BUCKET 的绑定，DB 和 JWT_SECRET 照常配置。
后台的每个图片位置都提供两种模式：
- 输入 URL → 直接粘贴外链，走这条路径不需要 R2。
- 上传图片 / 选择已上传 → 依赖 R2，未绑定时点击会报错，请忽略。
卡片图标既可以填外链，也可以留空由前端自动获取网站 favicon。

优点：零对象存储成本、图片自带 CDN。代价：图片依赖第三方服务的可用性；后台的"上传"与"图片库"功能不可用。

步骤 5：绑定服务

进入你的 Pages 项目 → 设置 → 绑定 → 添加绑定，添加以下三项（变量名必须完全一致）：

类型	变量名	指向
D1 数据库	`DB`	`nav-item-db`
R2 存储桶	`BUCKET`	`nav-item-uploads`

再到 设置 → 变量和机密，添加一个机密：

变量名	值
`JWT_SECRET`	一段强随机字符串（用于签名登录 token）

步骤 6：重新部署

Pages 项目 → 部署 → 在最近一次部署右侧选择 *重新部署

Related repositories

Similar projects matched by category, topics, and programming language.

LoD-Dawn

Fast-Vben-Admin

Fast Vben Admin is a modular full-stack management platform for admin panels and multi-tenant SaaS, built with FastAPI and Vue Vben Admin using Edition YAML composition.

Vue

192

Jeronasand

deepseek-saas-starter-vue

An open-source Vue 3 + Node template that wraps DeepSeek API into a monetizable AI tool store with four pre-built content generation tools and cost estimation.

Vue

167

ageerle

ruoyi-drama

A frontend for an AI-powered short drama creation platform that turns story ideas into videos via script, assets, storyboard, and synthesis steps.

Vue