Create complete, professional static websites in minutes, not months. From landing pages to portfolios, get modern, responsive sites with SEO optimisation and performance features built in.

Quick Start

Jump straight in with these ready-to-use prompts. You'll have a complete website ready to deploy:

Simple Landing Page 
Create a landing page for my design agency with modern styling and contact form
Developer Portfolio 
Generate a portfolio site with dark mode and project showcase sections
Business Website 
Build a business website with SEO features and analytics for my consultancy

Ready to Deploy

Every generated site includes deployment instructions for Netlify, Vercel, and GitHub Pages. Just upload and go live!

What It Does

Think of this as having a skilled web developer and designer work together to create your perfect website. generate_enhanced_static_site creates complete static websites with modern web standards, performance optimisation, and all the features you'd expect from a professional site.

This isn't just a basic HTML generator - you get:

  • Modern Design Systems - Clean, professional layouts that work across all devices
  • Performance Optimisation - Fast loading, compressed assets, lazy loading
  • SEO Ready - Proper meta tags, structured data, sitemap generation
  • Accessibility Compliant - WCAG guidelines built in from the start
  • Progressive Features - PWA support, dark mode, interactive elements
  • Framework Ready - Works with Eleventy, Gatsby, Next.js, or vanilla HTML

Every site is built with modern best practices, so you get professional results without years of web development experience.

Parameters

Customise your website generation to get exactly what you need:

Parameter Type Required Default Description
siteType string No "landing"

Type of site to generate: "landing", "portfolio", "docs", "blog", "business"

Each type comes with appropriate sections and functionality
pages array No ["home", "about", "contact"]

Pages to include in your site

Common options: "home", "about", "contact", "portfolio", "services", "blog"
features array No ["responsive", "seo"]

Features to include

Options: "responsive", "seo", "pwa", "analytics", "dark-mode", "animations"
designStyle string No "modern"

Visual style: "modern", "minimal", "classic", "creative"

Determines colour schemes, typography, and layout approach
framework string No "vanilla"

Framework to use: "vanilla", "eleventy", "gatsby", "nextjs"

Vanilla HTML for simplicity, frameworks for advanced features
content object No {}

Site content and branding information

Include: title, description, logo, colours, contact details

Real-World Examples

See how to create different types of websites:

Creative Portfolio Site

Designer Portfolio 
houtini-lm:generate_enhanced_static_site with:
- siteType: "portfolio"
- pages: ["home", "portfolio", "about", "contact"]
- features: ["responsive", "seo", "pwa", "dark-mode", "animations"]
- designStyle: "creative"
- content: {
    "title": "Sarah Chen - UX Designer", 
    "theme": "minimalist",
    "colors": ["#2D3748", "#4A5568", "#ED8936"]
  }

Business Consultancy Site

Professional Services 
houtini-lm:generate_enhanced_static_site with:
- siteType: "business"
- pages: ["home", "services", "about", "case-studies", "contact"]
- features: ["responsive", "seo", "analytics", "contact-forms"]
- designStyle: "modern"
- framework: "eleventy"
- content: {
    "title": "Strategic Growth Partners",
    "description": "Business consulting for scale-ups",
    "industry": "consulting"
  }

Tech Startup Landing

Product Launch Site 
houtini-lm:generate_enhanced_static_site with:
- siteType: "landing"
- pages: ["home", "features", "pricing", "contact"]
- features: ["responsive", "seo", "pwa", "analytics", "animations"]
- designStyle: "modern"
- content: {
    "title": "TaskFlow AI",
    "description": "Automate your workflow with intelligent task management",
    "cta": "Start Free Trial"
  }

Documentation Site

Project Documentation 
houtini-lm:generate_enhanced_static_site with:
- siteType: "docs"
- pages: ["home", "getting-started", "api-reference", "examples"]
- features: ["responsive", "seo", "search", "dark-mode"]
- designStyle: "minimal"
- framework: "eleventy"

What You Get Back

Every generated site is a complete, professional package ready for deployment:

📁 Complete Website Structure

  • All HTML pages with semantic markup and proper structure
  • Responsive CSS that works beautifully on all devices
  • Interactive JavaScript for forms, animations, and user experience
  • Optimised assets including images, icons, and fonts
  • Configuration files for your chosen framework

🎨 Modern Design System

  • Professional typography with web font loading
  • Consistent colour palette applied throughout
  • Responsive grid system that adapts to any screen size
  • Accessibility features including proper contrast and focus states
  • Dark mode support (when requested)

🚀 Performance Features

  • Optimised loading with lazy loading for images and content
  • Minified assets for faster download times
  • Progressive enhancement that works without JavaScript
  • Caching strategies built into the HTML structure
  • Web vitals optimisation for Google Core Web Vitals

🔍 SEO & Analytics Ready

  • Proper meta tags for social sharing and search engines
  • Structured data markup for rich snippets
  • Sitemap generation for search engine indexing
  • Analytics integration ready for Google Analytics or Plausible
  • Open Graph tags for beautiful social media previews

📋 Documentation & Deployment

  • README with setup instructions and customisation guide
  • Deployment guides for Netlify, Vercel, and GitHub Pages
  • Build scripts for development and production
  • Content editing guide for non-technical updates
  • Browser compatibility notes and testing checklist

Production Ready

Every generated site follows web standards and best practices. You get professional-quality code that passes accessibility audits and performs well on all devices.

Site Types Available

Each site type comes with optimised layouts and functionality:

🎯 Landing Pages

Perfect for product launches, services, or campaigns. Includes hero sections, feature highlights, testimonials, and strong calls-to-action.

  • Hero section with compelling headlines
  • Feature showcase with icons and descriptions
  • Social proof and testimonials
  • Contact forms and lead generation

💼 Portfolio Sites

Showcase your work with style. Includes project galleries, case studies, about sections, and contact forms.

  • Project galleries with filtering
  • Case study templates
  • Skills and experience sections
  • Contact and collaboration forms

🏢 Business Sites

Professional websites for companies and consultancies. Multiple pages, service descriptions, team sections, and lead generation.

  • Service pages with detailed descriptions
  • Team and about us sections
  • Case studies and client testimonials
  • Contact forms and business information

📚 Documentation Sites

Technical documentation with search, navigation, and code examples. Perfect for APIs, libraries, or project documentation.

  • Searchable documentation structure
  • Code syntax highlighting
  • Navigation with nested sections
  • Mobile-optimised reading experience

📝 Blog Sites

Content-focused sites with article layouts, categorisation, and RSS feeds. Built for readers and SEO performance.

  • Article layouts optimised for reading
  • Category and tag organisation
  • RSS feed generation
  • Author profiles and bio sections

Available Features

Enhance your site with modern web features:

📱 Essential Features

  • Responsive Design - Works perfectly on mobile, tablet, and desktop
  • SEO Optimisation - Meta tags, structured data, sitemap generation
  • Contact Forms - Working forms with validation and spam protection
  • Social Integration - Social media links and sharing buttons

⚡ Advanced Features

  • Progressive Web App - Offline support and app-like experience
  • Dark Mode - Automatic theme switching with user preference
  • Analytics Integration - Google Analytics or privacy-focused alternatives
  • Performance Monitoring - Web vitals tracking and optimisation

🎨 Design Features

  • Smooth Animations - Subtle interactions that enhance user experience
  • Custom Fonts - Web font integration with proper loading
  • Image Optimisation - Automatic resizing and lazy loading
  • Accessibility - WCAG compliance built in

Perfect Use Cases

Here's when this function becomes your go-to solution:

🚀 Rapid Prototyping

Need to test an idea quickly? Generate a complete landing page in minutes to validate concepts, test messaging, or gather early feedback from potential customers.

💼 Client Projects

Deliver professional websites to clients without weeks of development time. Perfect for agencies, freelancers, or consultants who need quality results fast.

📈 Marketing Campaigns

Launch product pages, event sites, or campaign-specific landing pages quickly. Include analytics and contact forms to track performance and capture leads.

🎯 Personal Branding

Create your professional online presence. Whether you're job hunting, building a consultancy, or establishing thought leadership, get a polished site quickly.

📚 Project Documentation

Turn your project documentation into a beautiful, searchable website. Much more engaging than markdown files in a repository.

🏪 Small Business Websites

Help local businesses get online fast. Generate professional sites with contact forms, service descriptions, and local SEO optimisation.

Pro Tip

Combine this with wordpress_theme_from_static to create a content management workflow - generate the static site first, then convert it to a WordPress theme for client editing.

Best Practices

Get the most out of your static site generation:

📝 Content Strategy

  • Plan your pages - Know what content you need before generating
  • Prepare your content - Have text, images, and branding ready
  • Think about your audience - Mention target users in your prompts
  • Consider the user journey - What actions do you want visitors to take?

🎨 Design Decisions

  • Choose appropriate styles - "modern" for tech, "classic" for traditional businesses
  • Consider your brand - Include colours, fonts, and style preferences
  • Think mobile-first - Your site will work on mobile, but consider mobile users
  • Plan for accessibility - Generated sites are accessible, but consider your content too

⚡ Performance Considerations

  • Use appropriate frameworks - Vanilla for simple sites, frameworks for complex ones
  • Consider hosting - Static sites work great on CDNs like Netlify or Vercel
  • Optimise images - The generator will help, but start with good quality images
  • Plan for growth - Consider if you'll need dynamic features later

🔧 Development Workflow

  • Generate first, customise later - Get the structure right, then add personal touches
  • Test on different devices - Generated sites are responsive, but always verify
  • Set up analytics early - Include analytics in the generation, not as an afterthought
  • Plan for maintenance - Static sites are low-maintenance, but content needs updating

Troubleshooting

Common issues and how to solve them:

Generated site doesn't match my expectations

The site style or layout isn't what you were hoping for.

  • Be more specific about design style and include visual references
  • Mention specific features you want (dark mode, animations, etc.)
  • Include brand colours and typography preferences in the content object
  • Try different designStyle options: "modern", "minimal", "classic", "creative"
Missing pages or content sections

Important pages or sections are missing from the generated site.

  • Explicitly list all pages you need in the "pages" parameter
  • Choose the right siteType for your needs (business, portfolio, etc.)
  • Be specific about required sections in your prompt
  • Remember you can always regenerate with different parameters
Framework integration issues

Generated site doesn't work properly with your chosen framework.

  • Start with "vanilla" framework for simple sites
  • Only use frameworks like "eleventy" or "gatsby" if you need their features
  • Ensure you have the framework properly installed and configured
  • Check the generated README for framework-specific setup instructions
Contact forms or features not working

Interactive features like contact forms aren't functioning.

  • Static sites need a service for form processing (Netlify Forms, Formspree)
  • Check the deployment documentation for form setup instructions
  • Some features require JavaScript to be enabled in browsers
  • Test forms on the actual deployed site, not just local files
Site looks broken on mobile devices

The responsive design isn't working properly on phones or tablets.

  • Ensure "responsive" is included in your features array
  • Test on actual devices, not just browser developer tools
  • Check that images have appropriate sizes and alt tags
  • Verify the viewport meta tag is present in the HTML head
SEO or analytics not working

Search engines can't find your site or analytics aren't tracking.

  • Include "seo" and "analytics" in your features array
  • Add your site to Google Search Console after deployment
  • Configure analytics tracking ID in the generated configuration
  • Submit your generated sitemap to search engines

Next Steps

Now that you can generate static sites, explore these related functions:

Convert to WordPress Theme

Transform your static site into a dynamic WordPress theme

Generate Components

Create individual responsive components for your sites