📖 搭建指南
手把手教你从零搭建这个网站，包括配置、部署和二次开发
🏗️ 项目概览
📁 源码：GitHub 仓库
🌐 域名：bestai.cool
💻 技术栈：Next.js 16 + TypeScript + Tailwind CSS 4 + Vercel
📊 统计：Google Analytics 4
💰 变现：Google AdSense
🛠️ 反馈系统：GitHub Issues API
🔑 环境变量配置
在项目根目录创建 .env.local 文件，填入以下内容：
# GitHub Token - 用于反馈表单自动创建 Issue
# 在 https://github.com/settings/tokens 生成
# 需要勾选 repo:public_repo 权限
GITHUB_TOKEN=ghp_your_token_here
# Google Analytics 4
# 注册 https://analytics.google.com 获取 Measurement ID
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
GITHUB_TOKEN
用于用户反馈表单自动在 GitHub 创建 Issue。无需翻墙，GitHub API 在国内可直接访问。
- 打开 GitHub Tokens 页面
- 点击 "Generate new token (classic)"
- 勾选
repo:public_repo权限 - 生成 Token，复制到
.env.local
NEXT_PUBLIC_GA_ID
Google Analytics 4 的 Measurement ID，用于统计网站访问量。注册 Google Analytics 后可在 "管理 → 数据流" 中找到。
- 打开 Google Analytics
- 创建账号和网站数据流
- 在数据流详情中找到 "Measurement ID"（格式：G-XXXXXXXXXX）
- 填入
.env.local
💻 本地开发
安装依赖
# 克隆项目
git clone https://github.com/zhangyujie9023/Repository-name-bestai-cool.git
cd Repository-name-bestai-cool
# 安装依赖
npm install
启动开发服务器
npm run dev
# 访问 http://localhost:3000
构建生产版本
npm run build
npm start
🚀 部署到 Vercel
📝 添加新教程
教程数据统一在 src/data/tutorials.ts 中管理。
{
id: "your-tutorial-id", // URL中的唯一ID，如 "chatgpt-advance"
title: "教程标题",
description: "一句话简介（显示在列表和详情页顶部）",
category: "writing", // 分类：writing/image/office/video/learning
difficulty: 1, // 难度：1=入门 2=进阶 3=高级
duration: "15分钟",
free: true,
tags: ["标签1", "标签2"],
popular: false, // 是否在首页推荐
content: `
## 简介
这里是教程正文，支持 Markdown 格式。
## 第一步
1. 打开网站
2. 注册账号
💡 小提示
## 常见问题
> 引用内容
`,
}
添加教程后，npm run build 会自动生成对应的静态页面。
🛠️ 添加新工具
工具数据统一在 src/data/tools.ts 中管理。
{
id: "your-tool-id", // 唯一ID，如 "chatgpt"
name: "工具名称",
nameEn: "Tool Name", // 英文名（可选）
website: "https://...", // 工具官网地址（必填，直达链接）
downloadUrl: "https://...", // 下载地址（可选，手机端直达）
appStoreUrl: "https://...", // iOS App Store 链接（可选）
playStoreUrl: "https://...", // Android Play 链接（可选）
logo: "🤖", // Emoji 图标
category: "writing", // 分类：writing/image/office/video/audio/search/dev/productivity
shortDesc: "简明介绍（一句话，说明工具是干什么的）",
howToUse: [
"步骤1",
"步骤2",
"步骤3",
],
price: "免费", // 免费/部分免费/付费/开源免费
isDomestic: true, // 国内是否可直接访问
tutorialId: "chatgpt-intro", // 对应教程ID（可选）
highlight: false, // 是否首页高亮推荐
tags: ["标签1", "标签2"],
}
📂 目录结构
bestai-cool/
├── src/
│ ├── app/ # Next.js App Router 页面
│ │ ├── page.tsx # 首页
│ │ ├── layout.tsx # 根布局（导航+页脚）
│ │ ├── tools/page.tsx # 工具导航页
│ │ ├── tutorials/ # 教程相关页面
│ │ │ ├── page.tsx # 教程列表
│ │ │ └── [id]/page.tsx # 教程详情
│ │ ├── about/page.tsx # 关于页面
│ │ ├── faq/page.tsx # FAQ页面
│ │ ├── feedback/page.tsx # 反馈页面
│ │ └── docs/page.tsx # 搭建指南（本文档）
│ ├── components/ # React 组件
│ │ ├── JsonLd.tsx # 结构化数据组件
│ │ ├── ThemeToggle.tsx # 深色模式切换
│ │ ├── MobileNav.tsx # 移动端汉堡菜单
│ │ ├── ShareButtons.tsx # 社交分享按钮
│ │ └── FeedbackButtons.tsx # 反馈按钮
│ └── data/ # 数据层
│ ├── tutorials.ts # 教程数据库
│ └── tools.ts # 工具数据库
├── public/ # 静态资源
├── .env.local # 环境变量（不上传GitHub）
└── package.json