How I prospect tradespeople with aging websites — and deliver a demo before even contacting them

Automated Legacy Site Modernization: Building a Pre-Contact Demo Pipeline

Current Situation Analysis

Freelance developers and agencies face a persistent friction point in client acquisition: the "value gap." Prospects rarely convert based on abstract promises of better performance or modern design. They need tangible proof. This is especially acute when targeting small tradespeople and local businesses, whose digital presence often reflects legacy infrastructure rather than current business capabilities.

The industry pain point is twofold. First, identifying qualified leads with genuine technical debt is time-consuming. Second, creating a compelling proof-of-concept for each lead manually destroys unit economics. Most outreach fails because it asks the prospect to imagine a future state without providing evidence.

This problem is often overlooked because developers focus on the code rather than the acquisition funnel. However, technical signals of aging websites are abundant and machine-readable. Small business sites frequently exhibit specific markers of obsolescence:

• Legacy Hosting Providers: Domains hosted on legacy free tiers (e.g., free.fr) often indicate a lack of ongoing technical investment.
• Deprecated HTML Patterns: The presence of <font> tags or <center> elements suggests codebases that haven't been updated since the HTML4 era.
• Missing Responsive Foundations: Absence of the <meta name="viewport"> tag is a definitive signal that a site is not mobile-optimized, which is critical for local tradespeople whose customers search on phones.

Data from automated scanning pipelines indicates that these signals correlate strongly with high conversion potential. A targeted scan can yield 10–15 qualified leads within 30 minutes. By automating the generation of a modernized demo before contact, developers can shift the conversation from "hire me" to "here is your new site, ready to go." This approach reduces time-per-lead to approximately 5 minutes while drastically increasing engagement rates.

WOW Moment: Key Findings

The efficiency gain of a pre-contact demo pipeline is not just about speed; it fundamentally alters the sales dynamic. The following comparison highlights the operational and economic impact of automating the demo generation process versus traditional outreach methods.

Approach	Time Per Lead	Conversion Signal	Technical Risk	Unit Economics
Manual Cold Email	10–15 mins	Abstract promise	None	Low volume; high effort
Automated Demo Pipeline	~5 mins	Live, functional artifact	Low (if templated)	High volume; scalable

Why this matters: The automated pipeline transforms the developer from a vendor pitching services into a partner presenting a solution. The "Live, functional artifact" metric is the key differentiator. When a prospect receives a link to a fully responsive, sector-appropriate demo of their own business, the cognitive load to evaluate the offer drops to near zero. This enables a volume-based acquisition model where 10 converted clients can generate immediate revenue (e.g., €500) plus recurring maintenance income (e.g., €10/month per client), creating a sustainable freelance business model backed by technical automation.

Core Solution

The pipeline consists of three distinct phases: detection, generation, and deployment. The architecture prioritizes type safety, modularity, and idempotency to ensure reliable execution.

Phase 1: Legacy Detection Engine

Instead of fragile string matching, the detection engine uses a structured TypeScript approach to analyze HTML responses. This allows for extensible signal checking and robust error handling.

Architecture Decision: We use a class-based scanner that aggregates signals. This makes it easy to add new indicators (e.g., Flash usage, jQuery version checks) without refactoring the core logic.

import { fetch } from 'undici';
import { parseHTML } from 'linkedom';

export interface ScanResult {
  url: string;
  isLegacy: boolean;
  signals: string[];
  score: number;
}

export class LegacySiteScanner {
  private readonly LEGACY_INDICATORS = [
    { pattern: /<font[\s>]/i, weight: 2, name: 'deprecated_font_tag' },
    { pattern: /<center>/i, weight: 2, name: 'deprecated_center_tag' },
    { pattern: /free\.fr/i, weight: 3, name: 'legacy_hosting_provider' },
    { pattern: /<meta[^>]*viewport/i, weight: -5, name: 'has_viewport_meta' },
  ];

  async scan(targetUrl: string): Promise<ScanResult> {
    try {
      const response = await fetch(targetUrl);
      const html = await response.text();
      const { document } = parseHTML(html);

      const signals: string[] = [];
      let score = 0;

      // Check for missing viewport (critical for mobile)
      const hasViewport = document.querySelector('meta[name="viewport"]');
      if (!hasViewport) {
        signals.push('missing_viewport');
        score += 5;
      }

      // Evaluate regex patterns against raw HTML
      for (const indicator of this.LEGACY_INDICATORS) {
        if (indicator.pattern.test(html)) {
          signals.push(indicator.name);
          score += indicator.weight;
        }
      }

      return {
        url: targetUrl,
        isLegacy: score > 4,
        signals,
        score,
      };
    } catch (error) {
      console.error(`Scan failed for ${targetUrl}:`, error);
      return { url: targetUrl, isLegacy: false, signals: [], score: 0 };
    }
  }
}

Phase 2: Automated Demo Generation

The generator consumes scan results and business metadata to produce a complete static site. We use a configuration-driven approach where sector-specific assets (colors, imagery placeholders, copy templates) are injected dynamically.

Architecture Decision: The generator outputs a static site compatible with GitHub Pages. This eliminates server costs and leverages Git for version control. We use Tailwind CSS for rapid styling and PWA capabilities to demonstrate modern standards.

export interface DemoConfig {
  clientName: string;
  sector: 'masonry' | 'plumbing' | 'carpentry' | 'metalwork';
  location: string;
  contactEmail: string;
  outputDir: string;
}

export class DemoBuilder {
  private readonly SECTOR_THEMES = {
    masonry: { primary: '#8B4513', accent: '#D2691E', icon: '🧱' },
    plumbing: { primary: '#1E90FF', accent: '#4682B4', icon: '🔧' },
    carpentry: { primary: '#8B5A2B', accent: '#DEB887', icon: '🪚' },
    metalwork: { primary: '#708090', accent: '#C0C0C0', icon: '⚙️' },
  };

  async generate(config: DemoConfig): Promise<string> {
    const theme = this.SECTOR_THEMES[config.sector];
    
    // 1. Scaffold project structure
    const projectPath = `${config.outputDir}/${this.slugify(config.clientName)}`;
    await this.scaffoldDirectory(projectPath);

    // 2. Generate Tailwind config with sector colors
    await this.writeTailwindConfig(projectPath, theme);

    // 3. Render index.html with PWA manifest and quote form
    const htmlContent = this.renderTemplate({
      ...config,
      theme,
      features: ['responsive', 'quote-form', 'pwa-ready'],
    });

    await this.writeFile(`${projectPath}/index.html`, htmlContent);

    // 4. Add noindex to prevent SEO cannibalization
    await this.addMetaTag(projectPath, 'robots', 'noindex, nofollow');

    return projectPath;
  }

  private slugify(text: string): string {
    return text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
  }
  
  // ... implementation details for scaffold, write, render ...
}

Phase 3: Deployment and Handoff

Deployment is automated via a script that commits the generated site to a dedicated GitHub repository configured for Pages. This ensures the demo is live within seconds of generation.

import { execSync } from 'child_process';

export class Deployer {
  async pushToPages(projectPath: string, repoUrl: string): Promise<string> {
    const demoUrl = `https://your-domain.github.io/demos/${projectPath.split('/').pop()}`;
    
    try {
      execSync(`cd ${projectPath} && git init && git add . && git commit -m "Auto-generated demo"`);
      execSync(`cd ${projectPath} && git remote add origin ${repoUrl} || true`);
      execSync(`cd ${projectPath} && git push -f origin main`);
      
      console.log(`✅ Demo live at: ${demoUrl}`);
      return demoUrl;
    } catch (error) {
      console.error('Deployment failed:', error);
      throw error;
    }
  }
}

Pitfall Guide

Building a pipeline that runs reliably in production requires anticipating failure modes. The following pitfalls are common when implementing automated demo generation.

1. False Positives in Scraping

   • Explanation: Simple regex matching may trigger on <font> tags inside comments or minified libraries, leading to wasted effort on modern sites.
   • Fix: Use a DOM parser to inspect the rendered structure. Only count tags that appear in the visible body, not in comments or script blocks.

2. Rate Limiting and Blocking

   • Explanation: Aggressive scanning can trigger WAFs or IP bans from hosting providers, especially legacy ones with poor infrastructure.
   • Fix: Implement exponential backoff, random delays between requests, and rotate User-Agent headers. Respect robots.txt where applicable.

3. The "Uncanny Valley" of Demos

   • Explanation: If the demo looks too generic or uses irrelevant content, the prospect may perceive it as spam.
   • Fix: Use sector-specific copy templates and color palettes. Ensure the demo mentions the specific trade and location. Personalization signals quality.

4. SEO Cannibalization

   • Explanation: If the demo site is indexed, it may compete with the prospect's existing site or appear in search results, causing confusion.
   • Fix: Always inject <meta name="robots" content="noindex, nofollow"> into the generated demo. This is non-negotiable for ethical outreach.

5. Broken Form Actions

   • Explanation: A quote request form that doesn't work undermines the demo's credibility.
   • Fix: Configure forms to use mailto: links or mock endpoints that return a success message. Clearly label the form as a demo feature in the UI.

6. Deployment Friction

   • Explanation: Manual deployment steps break the automation loop and increase time-per-lead.
   • Fix: Use a CI/CD script or a dedicated deployment CLI that handles authentication and git operations automatically. Ensure the script is idempotent.

7. Maintenance Liability

   • Explanation: Prospects may assume the demo is their new site and expect it to be maintained.
   • Fix: Include a clear disclaimer in the demo footer: "This is a demonstration of modernization capabilities. Not a live production site."

Production Bundle

Action Checklist

• Configure Scanner Targets: Define the list of legacy indicators and hosting providers relevant to your target market.
• Set Up Demo Repository: Create a GitHub repository with GitHub Pages enabled for automated deployment.
• Create Sector Templates: Develop HTML/CSS templates for each trade sector with distinct color schemes and content blocks.
• Implement Rate Limiting: Add delays and error handling to the scanner to avoid blocking.
• Test Generation Loop: Run the pipeline end-to-end with a test lead to verify deployment and link generation.
• Draft Outreach Template: Prepare a concise email template that links to the demo without aggressive sales language.
• Add Noindex Tags: Verify that all generated demos include noindex directives.
• Monitor Conversion: Track click-through rates and responses to refine the pipeline over time.

Decision Matrix

Use this matrix to determine the appropriate strategy based on your business goals and resource constraints.

Scenario	Recommended Approach	Why	Cost Impact
High Volume, Low Ticket	Automated Demo Pipeline	Maximizes reach; 5 mins/lead allows scaling to hundreds of prospects.	Low marginal cost; requires initial dev time.
Low Volume, High Ticket	Manual Custom Demo	Allows for deep customization and relationship building for enterprise clients.	High time cost; limited scalability.
Niche Market	Hybrid Pipeline	Automate detection but generate demos with manual review for quality control.	Medium cost; balances speed and quality.
Budget Constraints	Static Site Generator	Use free hosting (GitHub Pages) and open-source tools to minimize overhead.	Near-zero infrastructure cost.

Configuration Template

Use this configuration structure to manage pipeline settings and sector definitions.

{
  "pipeline": {
    "scanner": {
      "delayMs": 1500,
      "maxRetries": 3,
      "indicators": [
        { "pattern": "<font", "weight": 2 },
        { "pattern": "free\\.fr", "weight": 3 },
        { "pattern": "viewport", "weight": -5 }
      ]
    },
    "generator": {
      "outputDir": "./demos",
      "repoUrl": "git@github.com:your-org/demos.git",
      "sectors": {
        "masonry": {
          "colors": { "primary": "#8B4513", "accent": "#D2691E" },
          "features": ["quote-form", "gallery"]
        },
        "plumbing": {
          "colors": { "primary": "#1E90FF", "accent": "#4682B4" },
          "features": ["quote-form", "service-list"]
        }
      }
    }
  }
}

Quick Start Guide

Get the pipeline running in under 5 minutes with these steps.

1. Initialize Project:

   mkdir legacy-modernizer && cd legacy-modernizer
   npm init -y
   npm install undici linkedom typescript
   

2. Create Scanner Script: Save the LegacySiteScanner code to src/scanner.ts. Update the LEGACY_INDICATORS array with your target signals.

3. Run Detection:

   npx ts-node src/scanner.ts --url "http://example.free.fr"
   

   Verify the output shows isLegacy: true if signals are detected.

4. Generate Demo: Use the DemoBuilder to create a site for a test lead. Ensure the output directory is created and files are generated.

5. Deploy and Verify: Run the deployment script to push to GitHub Pages. Check the generated URL to confirm the demo is live and includes noindex.

This pipeline provides a repeatable, scalable method for demonstrating value to prospects with legacy websites. By automating the detection and generation phases, developers can focus on high-impact outreach and closing deals, rather than manual prospecting and repetitive coding tasks.