Step-by-Step Guide: Launching a Directory Website

Why I chose to do create a directory website

I choose to just run some experiments by drawing inspiration from Greg Isenberg, John Rush and Frey Chu, who I had been listening to lately and wanted to give it a go just to have some fun, and test some AI features, hence this article is a step by step process I followed to create a directory website.

Here’s Greg Isenberg and Frey talking about Directory websites.

Creating a directory website can be complex, but with the right tools, you can build an SEO-optimized, fast-loading directory in just a few days. In this guide, I’ll walk you through the tech stack I used:

• Lovable.dev – no work to be done without AI is the motto of this blog, and Lovable is becoming my great favourite over other platforms I have tested, so no coding without Lovable for me, and in my opinion it is a great web designer and as Greg mentioned in the video – WordPress is so yesterday.
• Headless WordPress powered by Directorist, the best directory plugin with a REST API – Still I used WordPress just because
• Hostinger for budget-friendly WordPress hosting (Setup Guide)
• Claude.ai for cleaning and structuring data
• Vercel for free, scalable frontend deployment

Here is the outcome:

https://www.indianrestaurantsnearme.com.au

Let’s dive into the step-by-step process.

Step 1: Keyword research for selecting the Niche

As per Frey’s example of his Dog parks near me, I through a near me keyword is going to be a no brainer hence looked up some near me keywords and ended up finding that restaurants near me was getting huge volumes and bringing it down to niche of Indian Restaurants had good volume and low keyword difficulty.

Step 2: Domain and Hosting

As an obvious step everything starts from getting the rights domain as first step for your SEO directory as well as good hosting, Choosing the right hosting is crucial for a fast and SEO-optimized directory website. Hostinger offers one of the best value WordPress hosting solutions with a simple setup process, free SSL, and excellent performance. I am a fan of Hostinger for the value they pack in and the AI offerings they have for content writing and image generation (limited feature)

👉 Get started with Hostinger here: Hostinger WordPress Hosting

Step 1: Purchase Hosting & Domain on Hostinger

•  Visit Hostinger’s website and select a WordPress hosting plan.
• Register a free domain (included in most plans) or use an existing one.
• Complete the purchase and log into the Hostinger dashboard.

Step 2: Install WordPress on Hostinger

• In the Hostinger dashboard, go to Websites → Create or Migrate a Website.
• Choose WordPress, set up your admin username & password.

Step 3. Install & Configure Directorist

• Install Directorist from the WordPress plugin store
• Create categories, custom fields, and listing types
• Enable the REST API for frontend integration
• Set up essential plugins (Rank Math, Yoast for SEO)
• Test API with sample data that Directoris comes with

Its such a great plugin for creating directories, that I got tempted to use this plugin only with its free theme on wordpress, however decided against it as this is not a wordpress blog :), this is an AI blog and there’s no point not using AI, also, results with AI definitely exceeds all expectations.

The easy to use REST API for this plugin gave me the ease of building Directory and not design the database from scratch, which was a huge time saving in my opinion.

For detailed usage of Directorist REST API Read: Directorist REST API Guide

Step 3: Setting up an AI generated UI for your headless wordpress

Prompting with Lovable to generate your responsive UI

My only prompt which was sufficient to generate the entire website with right structure for a directory. Lovable accurately implemented the directory structure I was looking for, ie. Major Locations, major category, Featured items, and Blog for SEO

Lovable prompt 1

Create an SEO-optimized directory website focused on the keyword ‘Indian Restaurants Near Me.’ The site should feature a structured directory listing Indian restaurants by location and category (e.g., Top 10 Indian Restaurants in Sydney, Best Vegetarian Indian Restaurants in Melbourne). The directory should be integrated with a content-driven blog that publishes AI-generated, SEO-optimized articles targeting long-tail keywords to rank on Google within 7 days. Articles must include schema markup, internal linking, and programmatic SEO techniques. Ensure mobile responsiveness and fast-loading pages for improved rankings

Lovable prompt 2

My second prompt to lovable was sufficient to get it connected to headless wordpress and fetch posts and sample directory listings from WordPress based on the following prompt

for posts:  wp-json/wp/v2/posts; JSON object: array[i].content
for all directory categories: wp-json/directorist/v1/listings/categories
Response: array of following object
{Object}
for individual directory location: wp-json/directorist/v1/listings/locations/:id -results in single object as above

for all listings:  wp-json/directorist/v1/listings
for individual listings:
Refer to endpoint {{baseUrl}}/directorist/v1/listings/:id for fetching details for respective listings where ID is the id of listing. Based on this JSON block output for ListingDetails

1. SEO Fundamentals:
- Implement proper [Schema.org](http://schema.org/) Review markup with itemscope and itemtype
- Create an SEO-optimized title tag (50-60 characters)
- Write a compelling meta description (150-160 characters)
- Use semantic headings (H1-H6) with target keywords
- Include structured data for rich snippets
- Optimize image alt tags with descriptive keywords
1. Content Structure (SEO-focused):
- Opening: Start with a keyword-rich introduction (150+ words)
- Include [DESCRIPTION] with natural keyword placement
- Break down [SERVICES] into scannable sections with relevant subheadings
- Format [HOURS] and [PRICE_RANGE] in both human and machine-readable formats
- Maintain optimal keyword density (2-3%)
1. Technical SEO Elements:
- Add schema markup for:
    - Restaurant information
    - Reviews
    - Ratings
    - Price range
    - Opening hours
    - Location
- Include proper Open Graph tags for social sharing
- Implement canonical URLs
- Add JSON-LD markup

Step 4: Getting data for directory

Getting Data by Scraping Google Maps with Outscraper

Populating your directory with high-quality listings can be time-consuming, but scraping Google Maps is an efficient way to gather business data quickly. Outscraper is a powerful tool that allows you to extract business names, addresses, phone numbers, ratings, and more from Google Maps.

👉 Get started with Outscraper here: Outscraper Google Maps Scraper

Step-by-Step Guide to Scraping Google Maps with Outscraper

• Sign up on Outscraper using this link.
• Select “Google Maps Scraper” and enter keywords (e.g., “real estate agents in Sydney”).
• Set filters (location, number of results, rating, etc.).
• Start the extraction process and wait for results.
• Download the data as CSV for easy import into Directorist.

Benefits of Using Outscraper for Directory Websites

✅ Extract real-time business data from Google Maps

✅ Get contact details, reviews, and ratings for better listings

✅ Easily import data into Directorist via CSV or API

✅ Save time and effort compared to manual data entry

With Outscraper, you can quickly populate your directory with high-quality listings, making it more valuable and SEO-friendly. 🚀

👉 Try Outscraper: Outscraper Google Maps Scraper

Step 5: Using Claude.ai for Data Cleaning

Although I liked Directorist as a plugin, however, there were strict limitations where I needed to clean and prepare data and needed to manipulate a few things to get desired results.

e.g.

1. Rendering restaurant data for Services from google maps
2. Displaying google reviews and ratings data
3. Business hours data, because business hours display feature is only available in premium version

• Automatically structure raw directory data

• Remove duplicates and format listings

• Generate metadata for better SEO

Step 6: Bulk Importing Listings to Directorist

1. Prepare a CSV with structured data

2. Use Directorist’s import tool or REST API

3. Optimize images for performance

There were some challenges but it turned out to be fine at the end.

Step 7. Deploying on Vercel

This cannot get any simpler, all you need to do is connect your project to GitHub with Lovable one click feature and then you need to select your GitHub project to Vercel for deployment.

Step-by-Step Guide to Deploy on Vercel

Update CNAME and DOMAIN in your Hostinger domain management

Step 8: Overcoming challenges

Lovable hallucinations

At times it can cost you your entire month worth of tokens, it hallucinated in 2 areas primarily for me

1. CORS issues referring to headless wordpress domain which needed fix at both wordpress and Lovable side
2. Differentiating between various location filtered listings data with subtle differences and click handling on some occasions

Data formatting

Custom fields in Directorist API doesn’t show up in REST API from the plugin hence I had to collate JSON data and put everything in description field to later format at UI level.

FAQ