如何在一天之内利用 AI 创建一个导航网站？

作者：derkinzi

上周末，我在回家途中听了一期由 Greg Eisenberg 和 John Rush 主持的播客节目，探讨将目录网站作为 SaaS 的流量来源的好处。John 分享了一些极具启发性的见解和工具，这些内容激发了我的想法。还没等我多想，我就已经开始了建立自己目录网站的挑战，即 bestlinkedintools.com，并计划在一天内完成——这全都得益于 AI 的助力。

本文将带你逐步了解我如何在一天内构建一个功能齐全的目录网站，以及 AI 如何重新定义我们完成这类项目的方式。

动机与目标

在受到 John Rush 的见解启发后，我创建目录网站的主要动机有两个：

• 为我的 SaaS 产品 ContentIn 生成流量：我希望利用目录网站在搜索引擎中更容易获得排名的特点，相较于传统的 SaaS 落地页，目录网站更容易成为流量的主要入口点。我知道 bestlinkedintools.com 可以帮助我的 SaaS 产品吸引到相关用户。
• 创造一个可盈利的副业：除了流量之外，我还看到了 bestlinkedintools.com 作为独立业务的潜力。随着时间推移，我可以通过付费列表或联盟链接来实现盈利，但首先，我需要让它获得排名并生成稳定的流量。

带着这些目标，我着手构建一个高质量的、可重复使用的网站，如果这个模式成功的话，还可以轻松扩展到其他目录中。

构建项目：AI 技术栈

该项目高度依赖于一系列 AI 驱动的工具栈：

• Cursor AI（Claude Sonnet 3.5）：我选择的 IDE 是 Cursor，它与 Claude Sonnet 3.5 搭配使用，有助于高效地生成代码。
• Nuxt.js 和 Tailwind：熟悉的技术，它们为可扩展开发提供了坚实的基础。
• Perplexity AI、N8n 和 GPT：用于内容生成自动化的一组工具。

以下是我如何利用这些工具来实现项目。

初始设置与设计

我首先浏览了其他目录网站，寻找我喜欢的设计，然后复制其 HTML 结构并粘贴到 Cursor 中。我决定从头开始使用 Nuxt.js 和 Tailwind 来构建该站点，既能保证质量，又能为未来的重用提供可能性。

借助 Cursor 和 Claude，我在 Nuxt 中重新构建了 HTML，设置了组件、页面和可组合项，几乎不用自己编写代码。整个过程快速、流畅且非常高效。

内容自动化

一旦网站框架搭建完成，我就开始处理内容。以下是具体步骤：

• 工具研究：我使用 Perplexity AI 生成了一个包含 100 个 LinkedIn 工具的列表，并将数据输入到 Google 表格中。
• 通过 N8n 和 GPT 自动填充条目：借助 N8n，我设置了一个自动化流程，将每个条目发送到 GPT，指示它从工具的网站上抓取内容，并将数据填入预定义的字段中。我保持内容的简单和一致性，数据以 markdown 格式输出，然后直接发送到 GitLab。

在大约一个半小时内，我自动生成了 80 个工具条目——如果没有 AI，这个过程本来需要数天的时间。

内容管理系统 (CMS) 与部署

为了更高效地管理内容，我选择了 Netlify CMS，这使得所有内容都可以留在 Netlify 上，简化了部署过程。

由于 GPT 生成的 markdown 文件已存储在我的 GitLab 仓库中，Netlify CMS 能够立即同步变更并将新条目实时部署。我还设置了一个简单的博客板块，最初使用 John Rush 的 SEOBot 手动更新。若以后扩展博客板块，我计划将其自动化。

站点地图生成

生成站点地图曾经是一个耗时数小时的手动工作，而现在借助 AI，只需一分钟即可完成。这是整个过程中让我印象最深刻的环节之一，一个曾经需要大量时间和精力的任务几乎无需任何付出便能完成。

挑战与解决方案

尽管 AI 工具在总体上使用流畅，但仍遇到一些显著的挑战：

• 从 Claude 切换到 GPT：有一次，我因使用 Claude 达到速率限制，不得不将部分任务转到 GPT 上。质量的下降明显，提醒我并非所有 AI 工具都是一样的。像 Claude 3.5 这样的高质量工具在保持工作流的效率和质量方面至关重要。
• AI 的误解：AI 仍然有局限性，偶尔会误解请求或生成需要进一步改进的内容。熟悉技术栈使我能够迅速发现这些问题并进行相应调整。

未来计划

眼下的主要目标是使该网站获得排名并吸引稳定的流量，以测试其潜力。如果该网站获得了关注，我会考虑付费列表或联盟链接等变现选项。同时，我计划进一步完善自动化流程，并可能集成更多 AI 工具，以实现额外的提升。

关键收获

AI 已从根本上改变了我们构建高质量网站的速度和效率。以下是我最大的收获：

• 速度和效率：曾经需要数天的编码工作，现在可以在数小时内完成，且不牺牲质量。通过自动化内容生成和 AI 代码生成，我能比想象中更快地完成这个项目。
• 质量和可维护性：AI 使开发人员能够以超越传统页面构建工具的质量和可维护性来进行构建。即便在优先考虑可重用性和可扩展性的同时，速度依然无可匹敌。
• MVP 思维：我本可以构建一个不带 CMS 或品牌化功能的简化 MVP，半天内就能完成。但是多亏了 AI 的效率，我能优先考虑质量而不失动力。
• 为开发者增强的 AI 开发：尽管 AI 可能还无法替代非技术用户的编码需求，但对懂代码的人来说，它是一种出色的工具。AI 极大地加速了开发人员的工作，能够以专业、可维护的代码超越任何页面构建器。

这次体验让我再次意识到我们所处的时代——拥有合适的技能和工具，任何人都能在几小时内实现一个想法。有了 AI 的帮助，我对未来充满期待。

P.S.：顺便提一下，这篇文章也是由 GPT 作为我的协作者完成的。我在上班路上将故事口述给 GPT，AI 根据我的讲述完成了这篇文章。目前这是我最大的生活技巧：语音 -> GPT -> 内容。