HiCyou 开源网址导航/目录 用 Supabase 和 Vercel 不花一分钱部署详细教程

HiCyou 是一个免费开源的工具目录平台，旨在帮助用户发现、整理并提交各类有用的工具和资源。 基于 Vercel 、Supabase 和 Cloudflare R2 等服务，你可以在几乎零成本的前提下，搭建一个专属的网址导航 / 资源目录站点，用来集中管理优质链接、为主站导流、推荐优秀网站等。

HiCyou 适合个人开发者、站长和团队快速搭建“工具库 / 资源库”类网站，可用于展示、收录，也可以开放给用户自主提交资源，打造持续更新的高质量目录。

应用场景示例：

1. 构建专属行业网址导航
   • 如 AI 工具导航、独立开发者资源导航、设计师常用网站导航等
   • 按行业、功能、标签等方式归档，方便自己和用户快速查找
2. 提升域名 DR / DA 等权重指标
   • 将导航站作为主站或其他项目的“资源中转站”
   • 合理布局外链与内容，有助于提升域名权重，利好二手域名交易和站群运营
3. 打造个人 / 团队资源中心
   • 统一收纳团队常用工具、内部系统入口、文档链接等
   • 让新成员或合作方可以一键获取所有重要链接
4. 对外展示精选网站与工具
   • 作为博客、个人主页或品牌官网的“推荐资源”子站
   • 用精选资源提升专业形象与信任度

前置准备

在开始之前，请确保你已经拥有以下账号和服务：

1. 代码仓库：如果是 Fork 的本项目，确保你的 GitHub 账号下有该仓库。
2. Vercel 账号：用于托管前端和 API 。
3. Supabase 账号：用于提供 PostgreSQL 数据库和 Auth 服务。
4. Cloudflare 账号：用于 R2 对象存储（存储图片）。

第一步：配置 Supabase （数据库与认证）

更详细的图文教程：《 Supabase 实战指南：从零开始搭建数据库、配置 Auth 并接入 Resend 邮件服务》

1. 登录 Supabase Dashboard 并创建一个新项目。
2. 获取数据库连接信息：
   • 进入 Project Settings -> Database.
   • 在 Connection string 部分，复制 URI 模式的链接。此时你应该能得到 DATABASE_URL。
   • 注意：生产环境建议使用 Connection Pooler (端口 6543) 以获得更好的连接管理。
3. 获取 API Keys：

• 进入 Project Settings -> API Keys -> Legacy anon, service_role API keys.
• 复制 anon``public key (NEXT_PUBLIC_SUPABASE_ANON_KEY)。
  • 复制 service_role secret key (SUPABASE_SERVICE_ROLE_KEY)。
• 复制 Project URL (NEXT_PUBLIC_SUPABASE_URL)。

第二步：配置 Cloudflare R2 （图片存储）

更详细的图文教程：《 Cloudflare R2 实战指南：配置免费 10G 存储和免费流量的对象存储与 S3 兼容 API Key 》

1. 登录 Cloudflare Dashboard。
2. 进入左侧菜单的 R2。
3. **创建存储桶 (Bucket)**：
   • 点击 "Create bucket"，输入名称（例如 hicyou-assets），位置选择 "Automatic" 或离你目标用户最近的区域。
   • 记录下 R2_BUCKET_NAME。
4. 配置公开访问：
   • 进入刚创建的 Bucket ，点击 "Settings" -> "Public Access"。
   • 你可以绑定自定义域名（推荐）或开启 R2.dev 子域名。
   • 记录下你的公开访问域名，这将是 R2_PUBLIC_URL。
5. 获取 API Token：
   • 回到 R2 主页，点击右侧的 "Manage R2 API Tokens"。
   • 点击 "Create API token"。
   • 权限选择：Object Read & Write (读写权限)。
   • 创建后，记录以下三个值：
     • Access Key ID (R2_ACCESS_KEY_ID)
     • Secret Access Key (R2_SECRET_ACCESS_KEY)
     • Endpoint (只需取类似 https://<ACCOUNT_ID>.r2.cloudflarestorage.com 中的 <ACCOUNT_ID> 部分作为 R2_ACCOUNT_ID)。

第三步：本地配置与数据库同步

在部署到 Vercel 之前，我们需要在本地配置好相关环境变量，并将数据库结构和初始数据同步到 Supabase 。

1. 配置本地环境变量

1. 在项目根目录下，复制示例配置文件：cp .env.example .env
2. 打开 .env 文件，填入之前获取的 Supabase 和 Cloudflare R2 信息，以及你的 AI Key：# Supabase NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJh... SUPABASE_SERVICE_ROLE_KEY=eyJh... # Database (推荐使用 Connection Pooler 端口 6543, 并在末尾加 ?pgbouncer=true) DATABASE_URL="postgresql://postgres.[ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true" # Cloudflare R2 R2_ACCOUNT_ID=... R2_ACCESS_KEY_ID=... R2_SECRET_ACCESS_KEY=... R2_BUCKET_NAME=... R2_PUBLIC_URL=...

全部变量名的介绍：

2. 同步数据库结构 (Schema Migration)

此步骤将在 Supabase 数据库中创建所需的表结构。

# 推送迁移到远程数据库 pnpm db:migrate 

3. 写入初始数据 (Data Seeding)

此步骤将写入默认分类和示例数据，帮助你快速开始。

# 运行 Seed 脚本 pnpm db:seed 

第四步：Vercel 项目配置与部署

1. 登录 Vercel Dashboard。
2. 点击 "Add New..." -> **"Project"**。
3. 选择你的 GitHub 仓库并点击 **"Import"**。
4. Framework Preset：Vercel 会自动识别为 Next.js ，无需修改。
5. Environment Variables（关键步骤）： 展开 Environment Variables 区域，将你本地 .env 文件中配置好的变量逐一填入。
6. 点击 **"Deploy"**。

第五步：部署后验证

1. 等待构建完成：Vercel 会自动执行 next build。
2. 检查首页：访问分配的域名，确保首页正常加载。
3. 检查数据库：尝试浏览分类或详情页，确保数据能从数据库读取（因为第三步已经进行了 Seed ，此时你应该能看到数据）。
4. 检查认证：点击登录，测试 Supabase Auth 是否工作正常（需要在 Supabase Auth settings 中配置你的 生产环境域名 作为 Redirect URL ）。
5. 检查图片上传：登录管理员账号，尝试提交一个工具，测试图片能否成功上传到 R2 。
6. Cron Jobs：在 Vercel Dashboard 的 Project Settings -> Cron Jobs 中检查定时任务状态。

常见问题

• Supabase Auth 登录后跳转错误：请务必在 Supabase 后台 Authentication -> URL Configuration -> Site URL / Redirect URLs 中添加你的 Vercel 域名。
• 图片上传失败：检查 R2 的 Access Key 权限是否包含 "Write"，以及 R2_PUBLIC_URL 是否配置正确且公网可访问。
• 数据库连接错误：如果使用 Transaction Pooler (端口 6543)，需要 URL 包含 ?pgbouncer=true。
• 本地开发：以后每次本地开发前，确保 .env 中的 DATABASE_URL 能正常连接，然后运行 pnpm dev。

祝你部署顺利！

其他参考教程：

Cloudflare R2 Hands-On Guide: Set Up Free 10GB Storage, Zero-Egress Object Storage, and S3-Compatible API Keys

A Practical Guide to Supabase: Setting up a Database, Auth, and Integrating Resend