How I Built a Directory Website in a Day with AI—and Why It's a Game-Changer for SaaS Traffic

10/11/2024
#code#comments#startup#ai#content

Last weekend, on my way home, I was listening to a podcast episode with Greg Eisenberg and John Rush discussing the benefits of building directory websites as traffic sources for SaaS. John shared some incredible insights and tools that sparked an idea for me. Before I knew it, I was diving into the challenge of building my own directory, BestLinkedInTools.com, with the aim of completing it within a day—all made possible by AI.

This article walks through the steps, tools, and takeaways from building a fully functional directory website in a single day and explores how AI is redefining how we approach projects like these.

Motivation & Goals:

Inspired by John Rush’s insights, my main motivation for building a directory website was twofold:

  1. Generate Traffic for My SaaS, ContentIn: I wanted to leverage the ease of ranking a directory site in search engines compared to a typical SaaS landing page. Directories can serve as significant entry points for traffic, and I knew bestlinkedintools.com could help drive relevant users to my SaaS product.

  2. Create a Monetizable Side Hustle: Beyond traffic, I saw the potential for bestlinkedintools.com as a standalone business. Over time, I could monetize it with paid listings or affiliate links, but first, I needed it to rank and generate consistent traffic.

With those goals in mind, I set out to build a high-quality, reusable website that could expand easily into other directories if the model proved successful.

Building the Project:

The AI Tech Stack

The project relied heavily on a stack of AI-powered tools:

  • Cursor AI (Claude Sonnet 3.5): My IDE of choice, Cursor, paired with Claude Sonnet 3.5, was essential for generating code efficiently.
  • Nuxt.js & Tailwind: Familiar technologies that gave me a solid foundation for scalable development.
  • Perplexity AI, N8n, and GPT: A mix of tools for automating content generation.

Here’s how I used each to bring the project to life.

Initial Setup and Design

I started by looking through other directory sites to find a design I liked, then copied the HTML structure and pasted it into Cursor. I knew I wanted to build this site from scratch using Nuxt.js and Tailwind, both for quality and to allow future reusability.

Using Cursor and Claude, I rebuilt the HTML in Nuxt, setting up components, pages, and composables without having to write much code myself. The process was fast, seamless, and highly effective.

Content Automation

Once the site framework was in place, I moved on to content. Here’s the breakdown:

  1. Researching Tools: I used Perplexity AI to generate a list of 100 LinkedIn tools, then fed the data into a Google Sheet.

  2. Automating Entries with N8n and GPT: Using N8n, I set up automation that pushed each entry to GPT, had it scrape the tool’s website, and populate the content into pre-defined fields. I kept it simple and consistent, outputting the data in markdown format, which I then sent directly to GitLab.

In about an hour and a half, I had 80 tool entries created automatically—a process that would have taken days without AI.

Content Automation

CMS & Deployment

To manage content more efficiently, I chose Netlify CMS, which allowed everything to stay on Netlify for straightforward deployment.

With the markdown files generated by GPT in my GitLab repository, Netlify CMS could instantly sync changes and deploy new entries live. I also set up a basic blog section, initially updated manually with SEOBot by John Rush, and plan to automate this later if I expand the blog.

Sitemap Creation

Generating a sitemap, which once took hours of manual work, took just one minute with AI. This was one of the standout moments, a task that used to require significant time and energy reduced to almost no effort.

Challenges & Solutions:

While the AI tools were generally smooth to work with, there were a few notable challenges:

  1. Switching from Claude to GPT: At one point, I hit a rate limit with Claude, which forced me to switch to GPT for some tasks. The quality drop was noticeable, reminding me that not all AI tools are created equal. Working with high-quality tools like Claude 3.5 proved essential to maintaining the workflow’s efficiency and quality.

  2. AI Misunderstandings: AI still has its limits, and occasionally, it would misinterpret requests or generate content that required refinement. Being familiar with my tech stack allowed me to catch these issues quickly and adjust as needed.

Future Plans:

The immediate goal is to rank the site and drive consistent traffic to test its potential. If the site gains traction, I’ll consider monetization options like paid listings or affiliate links. In the meantime, I plan to refine the automation and possibly integrate more AI tools for additional enhancements.

Key Takeaways:

AI has fundamentally changed how quickly and effectively we can build high-quality websites. Here are my biggest takeaways:

  • Speed and Efficiency: What once took days of coding can now be done in hours, without compromising on quality. By automating content generation and leveraging AI for code generation, I could bring this project to life faster than I would have thought possible.

  • Quality and Maintainability: AI enables developers to build with a level of quality and maintainability that goes beyond what traditional page builders can offer. Even as I prioritized reusability and scalability, the speed was unmatched.

  • MVP Mindset: I could have built a simpler MVP without CMS or brandability features and finished the project in half a day. But thanks to AI’s efficiency, I could prioritize quality without losing momentum.

  • AI-Enhanced Development for Coders: While AI might not yet replace coding for non-technical users, it’s an exceptional tool for those who know how to code. AI amplifies developer speed and can outpace any page builder by delivering professional, maintainable code.

The experience was a reminder of the times we’re living in—where anyone with the right skills and tools can bring an idea to life in a matter of hours. With AI by my side, I’m excited to see what’s next.

P.S.: By the way, this article was crafted with GPT as my co-writer. I dictated the story on my way to work into GPT, and the AI then wrote this post from it. Probably my biggest lifehack atm: voice -> GPT -> content.