【保姆级教程】手把手教你搭建一个具备变现能力的AI导航站

关注“独立开发”公众号，了解更多开发、建站、变现手段与SEO技巧

这篇文章里我们介绍了导航站的变现方式和变现能力

当前时间节点，如果可以低成本做一个导航站，一定是有的做有的赚的。在这里我分享一个快速搭建AI导航站的教程，本文目录如下：

1. AI导航站功能演示

2. Tap4.ai开源项目介绍

3. Tap4.ai Crawler部署教程（可跳过）

4. Tap4.ai WebUI部署教程

5. AI导航站变现指导

基本功能展示

站点地址：https://tap4.cn/

此开源项目提供的功能如下：

收录项目的搜索，展示功能，以及首页自带付费广告位

免费、付费收录入口

博客板块用于SEO吸引用户以及销售Guest Post

开源项目整体介绍

Tap4 AI导航站开源项目推出了2.0版，支持自动化的Tap4 AI爬虫。搭建一个上面这样的AI导航站需要用到如下两个开源项目，前端+爬虫(Crawler)，以下是两个项目的介绍：

Tap4.AI前端功能：

• 支持AI工具站的列表展示及详细介绍

• 支持AI工具站的分类和搜索

• 支持配合爬虫开源项目，实现自动化收录

地址：https://github.com/6677-ai/tap4-ai-webui

Tap4.AI Crawler功能:

1. 网站自动截屏及上传到Cloudflare R2

2. 支持爬取网站详细介绍，并通过AI生成网站的title、description及Markdown格式的具体介绍

地址：https://github.com/6677-ai/tap4-ai-crawler

Tap4 AI Crawler搭建教程

PS: 如果手动更新网站收录，可以跳过这一步，直接去看下面的WebUI搭建教程

1. Cloudflare配置R2存储服务(存储量不大时，基本免费够用

注册Cloudflare账号(https://www.cloudflare.com), 选择R2服务作为对象存储，创建一个存储桶(bucket)。

在R2中创建一个R2 API Token，创建完成后，记录下这里需要的参数：ENDPOINT_URL, BUCKET_NAME, ACCESS_KEY_ID, SECRET_ACCESS_KEY, CUSTOM_DOMAIN

2. 注册Groq，并配置API Key‍‍‍‍‍

注册Groq:https://console.groq.com/ ， 配置API Key。

3.  Fork Tap4 AI Crawler并配置环境变量

项目地址：https://github.com/6677-ai/tap4-ai-crawler

修改项目中的.env配置文件

GROQ_API_KEY: Groq 的 key，申请Groq key
S3_ENDPOINT_URL: S3 的 endpoint，申请Cloudflare R2
S3_BUCKET_NAME: S3 的 bucket name
S3_ACCESS_KEY_ID: S3 的 access key id
S3_SECRET_ACCESS_KEY: S3 的 secret access key
S3_CUSTOM_DOMAIN: S3 的 custom domain，若有自定义域名，则填入，否则可不填写
AUTH_SECRET: 自定义的对外 REST API 需要的 KEY

4. 配置Zeabur部署docker服务

注册Zeabur账号：https://zeabur.com/?referralCode=leoli202303，使用Github账号注册。

创建一个project，服务节点建议选择美国，然后选择Github对应的项目。部署完成后，可以根据自己的需求，配置自定义域名（推荐）或者Zeabur的域名。调用API接口，测试是否成功( 替换AUTH_SECRET，{crawler_domain} )：

curl -X POST -H "Content-Type: application/json" -H "Authorization: Bearer AUTH_SECRET" -d '{"url": "https://tap4.ai", "tags": [ "ai-detector","chatbot","text-writing","image","code-it"]}' {crawler_domain}/site/crawl

更具体的教程，可以查阅：https://github.com/6677-ai/tap4-ai-crawler/blob/main/README.zh-CN.md

Tap4 AI WebUI 搭建教程

1. Fork Tap4 AI WebUI项目

Fork项目，之后可以选择在Github账号下编辑或者Checkout到本地。‍‍‍‍‍‍‍

2. 注册Supabase，并执行建表和插入数据(初期免费版够用)‍

注册Supabase账号: https://supabase.com/打开：https://supabase.com/dashboard/projects， 创建一个Project。进入项目后打开左侧菜单的SQL Editor:

依次复制Tap4 AI WebUI项目(https://github.com/6677-ai/tap4-ai-webui/tree/main/db/supabase)中的SQL脚本，粘贴到SQL Editor去执行：

• 创建Submit、navigation_category，web_navigation表：create_table.sql
• 插入分类数据：insert_category_data.sql
• 插入AI工具数据：insert_data.sql

记录Supabase的需要的URL和ANON Key配置(Project Settings-API)：

3. 注册Vercel，并部署项目

注册Vercel：https://vercel.com/ 创建项目，并选择你的Github账号中fork的项目

Deploy前，先输入环境变量，具体示例如下：

# 自己的域名，或者创建完成项目后，用vercel的域名，必须
NEXT_PUBLIC_SITE_URL="https://tap4.ai"
# Google统计使用，如没有配置，可随意填写
GOOGLE_TRACKING_ID="G-XXXXXXX" 
# Google Adsense，如没有配置，可随意填写
GOOGLE_ADSENSE_URL="https://xxxx.googlesyndication.com/xxxxx/xxxxx"
# Contact email at the bottom
CONTACT_US_EMAIL="[e-mail]"
# Supabase数据库的URL和Anon key，必须
NEXT_PUBLIC_SUPABASE_URL="https://xxxyyyzzz.supabase.co" 
NEXT_PUBLIC_SUPABASE_ANON_KEY="XXX.YYY.ZZZ"
# Tap4 AI Crawler爬虫部署后的API的crawler_domain，随意填写仅影响自动收录功能
CRAWLER_API="https://crawler_domain/site/crawl_async"
# Tap4 AI Crawler爬虫部署后的API的AUTH_SECRE，随意填写仅影响自动收录功能
CRAWLER_API_KEY="xxxxx"
# 自定义，手动触发收录的API用
CRON_AUTH_KEY="keyxxxxx"
# 自定义，后续API提交Submit用
SUBMIT_AUTH_KEY="xxxxx"

注意项：

- Vercel部署后，如果环境变量变化，请执行重新部署，让环境变量生效

- 此版本采用了vercel的定时任务用来自动读取自动提交的网站并生成网站结果

• 免费版vercel：仅支持每天调用1次，可以手动调用{domain}/api/cron, 采用POST, Header: {"Authorization":"Bearer CRON_AUTH_KEY"}, 其中auth_key为env环境变量自定义配置

• Pro版vercel：可以参照此文档配置https://vercel.com/docs/cron-jobs#cron-expressions

部署完成后，可以选择自定义域名或者暂时用vercel提供的域名。‍‍

按照上面的说明，基本已经完成了Tap4 AI Crawler和Tap4 AI WebUI的部署，接下来的工作就是根据自己的想法，本地去修改前端的样式、文案及站内的具体内容，具体可以查看项目Readme: https://github.com/6677-ai/tap4-ai-webui/blob/main/README.zh-CN.md。

部署完成，如何变现？

关于AI导航站如何变现，变现能力如何，可以查看这篇文章：

本文由Tap4.ai的作者原创，本公众号进行整理修改。这是此开源项目Tap4.ai作者的微信，如果大家有搭建问题或者合作意向，可以添加好友进行讨论。

关注“独立开发”公众号，了解更多开发、建站、变现手段与SEO技巧