{"workflow":{"id":12216,"name":"Generate SEO-optimized PWA website with Google Gemini and deploy to S3","views":11,"recentViews":0,"totalViews":11,"createdAt":"2025-12-27T14:21:46.088Z","description":"# Generate SEO-Optimized PWA Website with AI and Deploy to S3\n\n## Who's it for\n\nThis workflow is designed for agencies, freelancers, and businesses who want to generate **production-ready static websites** with built-in SEO optimization and PWA (Progressive Web App) capabilities — all without manual coding.\n\nIt is best suited for users who need landing pages, portfolios, event pages, or client microsites that are **mobile-friendly, SEO-optimized, and installable as apps** on any device.\n\n## What it does\n\nThis workflow collects website requirements via an n8n form, uses **Google Gemini AI** to generate a complete HTML page with SEO metadata and PWA components (service worker, manifest, offline support), assembles all files, uploads them to AWS S3, and sends the published URL via email.\n\nUnlike basic AI website generators, this workflow produces **three separate AI-generated outputs** that are assembled into a complete, deployable package:\n\n- ✅ SEO-optimized meta tags, Open Graph, and structured data (Schema.org)\n- ✅ PWA manifest + service worker for offline support and \"Add to Home Screen\"\n- ✅ Responsive, single-page website with embedded CSS and JavaScript\n- ✅ All files deployed as a cohesive package to S3\n\n## How it works\n\n1. **Website Request Form** — User fills out requirements (name, purpose, colors, content, keywords).\n2. **Process Form Data** — Workflow structures the input for AI processing.\n3. **Generate SEO Metadata** (Gemini AI) — Creates meta tags, Open Graph tags, Twitter cards, and JSON-LD structured data based on the site's purpose and keywords.\n4. **Generate Website HTML** (Gemini AI) — Produces a complete, responsive HTML/CSS/JS page incorporating the SEO metadata.\n5. **Generate PWA Components** — Creates `manifest.json` and `service-worker.js` for offline capability and app-like behavior.\n6. **Assemble All Files** — Merges HTML, manifest, and service worker into a deployment-ready package.\n7. **Convert to Binary** — Prepares all files for S3 upload.\n8. **Upload to S3** — Deploys all files (`index.html`, `manifest.json`, `sw.js`) with proper content types.\n9. **Build Response** — Constructs the live URL and deployment summary.\n10. **Send Confirmation Email** — Delivers the live URL, SEO report, and PWA installation instructions to the user.\n\n## Requirements\n\nTo use this workflow, you will need:\n\n- A **Google Gemini API key** (Gemini 1.5 Flash or Pro recommended)\n- An **AWS account** with S3 access\n- An S3 bucket configured for **static website hosting**\n- A **Gmail account** for sending confirmation emails (or replace with another email service)\n\n## AWS Setup Guide\n\n### Step 1: Create an IAM User for n8n\n\n1. Go to AWS Console → IAM → Users → Create user\n2. User name: `n8n-s3-uploader`\n3. Attach the following custom policy:\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"S3WebsiteUpload\",\n \"Effect\": \"Allow\",\n \"Action\": [\n \"s3:PutObject\",\n \"s3:PutObjectAcl\",\n \"s3:GetObject\",\n \"s3:ListBucket\"\n ],\n \"Resource\": [\n \"arn:aws:s3:::YOUR_BUCKET_NAME\",\n \"arn:aws:s3:::YOUR_BUCKET_NAME/*\"\n ]\n }\n ]\n}\n```\n\n4. Create access key → Select \"Application running outside AWS\"\n5. Save the Access Key ID and Secret Access Key for n8n credential setup\n\n### Step 2: Create an S3 Bucket\n\n1. Go to AWS Console → S3 → Create bucket\n2. Bucket name: Choose a globally unique name (e.g., `my-ai-websites-12345`)\n3. Region: Select your preferred region\n4. **Object Ownership**: Select \"ACLs enabled\" → \"Bucket owner preferred\"\n5. **Block Public Access**: Uncheck \"Block all public access\" and acknowledge the warning\n6. Create bucket\n\n### Step 3: Enable Static Website Hosting\n\n1. Go to your bucket → Properties tab\n2. Scroll to \"Static website hosting\" → Edit\n3. Enable static website hosting\n4. Index document: `index.html`\n5. Error document: `index.html` (for PWA routing)\n6. Save changes\n7. Note the bucket website endpoint URL (e.g., `http://YOUR_BUCKET_NAME.s3-website-REGION.amazonaws.com`)\n\n### Step 4: Add Bucket Policy for Public Access\n\n1. Go to your bucket → Permissions tab\n2. Scroll to \"Bucket policy\" → Edit\n3. Paste the following policy:\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"PublicReadGetObject\",\n \"Effect\": \"Allow\",\n \"Principal\": \"*\",\n \"Action\": \"s3:GetObject\",\n \"Resource\": \"arn:aws:s3:::YOUR_BUCKET_NAME/*\"\n }\n ]\n}\n```\n\n4. Replace `YOUR_BUCKET_NAME` with your actual bucket name\n5. Save changes\n\n### Step 5: Configure n8n Credentials\n\n1. In n8n, go to Credentials → Add credential → AWS\n2. Enter the Access Key ID and Secret Access Key from Step 1\n3. Set the region to match your S3 bucket region\n4. Save the credential\n\n## Important limitations\n\n- Generated websites are single-page only (no multi-page navigation).\n- The AI may occasionally produce varying results depending on prompt complexity.\n- S3 bucket must have public access enabled for the websites to be viewable.\n- PWA \"Add to Home Screen\" requires HTTPS — use CloudFront for production deployments.\n- No custom domain support out of the box (requires additional CloudFront/Route53 setup).\n- Service worker caching is basic (cache-first strategy); for advanced caching, customize the generated `sw.js`.\n- AWS charges may apply based on S3 storage and data transfer usage.\n\n## How to set up\n\n1. Complete the AWS Setup Guide above.\n2. Add your **Google Gemini API credential** in n8n.\n3. Add your **AWS credential** in n8n (from Step 5 above).\n4. Update the S3 bucket name in the \"Upload to S3\" node.\n5. Update the bucket URL in the \"Build Response\" node.\n6. Configure Gmail OAuth2 credential (or replace with your email service).\n7. Activate the workflow and share the form URL.\n\n## How to customize\n\n- **AI Model**: Swap Google Gemini for OpenAI, Anthropic, or any LLM supported by n8n.\n- **Form fields**: Add fields for target audience, language preference, or industry-specific requirements.\n- **SEO depth**: Extend the SEO prompt to generate sitemaps, robots.txt, or additional structured data types.\n- **PWA features**: Customize the service worker for push notifications, background sync, or advanced caching strategies.\n- **Notifications**: Replace Gmail with Slack, Discord, or webhook notifications.\n- **Storage**: Add a database node to track generated websites with analytics.\n- **Domain**: Integrate with CloudFront + Route53 for custom domains with HTTPS.\n- **Error handling**: Add error handling nodes and retry logic for production use.\n\n## What makes this different\n\nMost AI website generators create a basic HTML file. This workflow goes further:\n\n| Feature | Basic Generator | This Workflow |\n|---------|----------------|---------------|\n| HTML/CSS/JS | ✅ | ✅ |\n| SEO Meta Tags | ❌ | ✅ (AI-generated) |\n| Open Graph / Twitter Cards | ❌ | ✅ |\n| Schema.org Structured Data | ❌ | ✅ (JSON-LD) |\n| PWA Support | ❌ | ✅ (manifest + service worker) |\n| Offline Capability | ❌ | ✅ |\n| \"Add to Home Screen\" | ❌ | ✅ |\n| Multiple AI Calls | 1 | 2 (specialized prompts) |\n| Deployment Files | 1 (index.html) | 3+ (html + manifest + sw.js) |\n\n## Security Considerations\n\n- The generated websites are publicly accessible. Do not use this for sensitive content.\n- Consider adding authentication if you want to restrict who can generate websites.\n- Review AWS costs regularly to avoid unexpected charges.\n- For production use, set up CloudFront with HTTPS (required for full PWA functionality).\n- Service workers require HTTPS in production; localhost is exempt for testing.\n\n---\n\n**Note:**\nThis workflow was built using Google Gemini AI and AWS S3 static website hosting.\nFor production deployments, we recommend adding CloudFront for HTTPS, custom domains, and global CDN distribution.\n","workflow":{"meta":{"instanceId":"0fd24758e45cbed1f63c03b9ca7326acab4b855985945af441ee95f8874d3e22","templateCredsSetupCompleted":true},"nodes":[{"id":"cbd057a8-9404-4a25-833f-03cfc0afebf6","name":"Workflow Overview","type":"n8n-nodes-base.stickyNote","position":[928,992],"parameters":{"width":540,"height":832,"content":"## AI Multi-Language PWA Website Generator with SEO Optimization\n\n## How it works\n1. User fills out a detailed form with website requirements, target languages, and SEO keywords\n2. Form data is processed and structured for multi-stage AI generation\n3. AI generates comprehensive SEO metadata (meta tags, Open Graph, Schema.org, sitemap)\n4. AI creates a full multi-language, PWA-ready website with embedded SEO optimization\n5. PWA components are generated (Service Worker, Web App Manifest, sitemap.xml, robots.txt)\n6. All files are merged, optimized, and uploaded to AWS S3\n7. User receives an email with the live website URL and PWA installation instructions\n\n## Setup steps\n1. Configure **OpenAI** or **Google Gemini** credentials for AI generation\n2. Configure **AWS S3** credentials with an S3 bucket that has static website hosting enabled\n3. Configure **Gmail** credentials for sending confirmation emails\n4. Update the S3 bucket name in the Upload to S3 node\n5. Activate the workflow and share the form URL with users\n\n## Key features\n- Multi-language website generation (10+ languages)\n- Progressive Web App with offline support\n- AI-powered SEO optimization with structured data\n- Automatic sitemap.xml and robots.txt generation\n- Google Analytics and Facebook Pixel integration\n- Professional email notification with PWA install guide\n\n⚠️ Note: Requires OpenAI or Google Gemini API key, AWS S3 bucket, and Gmail credentials."},"typeVersion":1},{"id":"64026efa-a624-4ceb-98d6-51a94bc6929e","name":"Step 1 - Trigger & Config","type":"n8n-nodes-base.stickyNote","position":[1472,992],"parameters":{"color":7,"width":500,"height":380,"content":"## Trigger & Configuration\nCollects detailed website requirements including target languages, SEO keywords, design preferences, PWA options, and analytics IDs. Processes and structures all form data for the AI pipeline."},"typeVersion":1},{"id":"a15d2841-3f0e-41e1-a1ae-a4bfd330583d","name":"Step 2 - AI Generation","type":"n8n-nodes-base.stickyNote","position":[1984,992],"parameters":{"color":7,"width":628,"height":560,"content":"## AI SEO & Content Generation\nTwo-stage AI pipeline: first generates comprehensive SEO metadata (meta tags, Open Graph, Schema.org structured data), then creates a complete multi-language PWA website incorporating all SEO data, analytics codes, and responsive design."},"typeVersion":1},{"id":"ca18882c-0a9c-4cf1-9be0-8a1910f918de","name":"Step 3 - PWA & Files","type":"n8n-nodes-base.stickyNote","position":[2624,992],"parameters":{"color":7,"width":500,"height":560,"content":"## PWA Processing & File Assembly\nGenerates PWA components (Service Worker, Web App Manifest), SEO files (sitemap.xml, robots.txt), processes the AI-generated HTML, injects PWA registration code, and assembles all files for deployment."},"typeVersion":1},{"id":"5f54d7ae-c5c4-43ad-8058-74d440c38614","name":"Step 4 - Deploy & Notify","type":"n8n-nodes-base.stickyNote","position":[3152,992],"parameters":{"color":7,"width":720,"height":560,"content":"## Deploy & Notify\nSplits the file bundle into individual items, converts each to binary, uploads all files to S3 (HTML, Service Worker, Manifest, sitemap, robots.txt), builds a success response with all URLs, and sends a professional confirmation email with PWA installation instructions."},"typeVersion":1},{"id":"1817afe6-763d-4be4-bf42-0f147e621277","name":"Website Request Form","type":"n8n-nodes-base.formTrigger","position":[1520,1152],"webhookId":"4b01057c-abc5-452b-abf4-af7793eaa1da","parameters":{"options":{"respondWithOptions":{"values":{"formSubmittedText":"Your multi-language PWA website is being generated with AI..."}}},"formTitle":"AI Multi-Language PWA Website Generator","formFields":{"values":[{"fieldLabel":"Website Name","placeholder":"e.g., Global Tech Solutions","requiredField":true},{"fieldType":"dropdown","fieldLabel":"Primary Purpose","fieldOptions":{"values":[{"option":"Corporate Website"},{"option":"Portfolio"},{"option":"Product Landing Page"},{"option":"SaaS Landing"},{"option":"Blog"},{"option":"Event Page"},{"option":"Restaurant or Local Business"},{"option":"Non-profit"}]},"requiredField":true},{"fieldLabel":"Target Languages","placeholder":"e.g., en, ja, es, fr (comma-separated language codes)","requiredField":true},{"fieldType":"dropdown","fieldLabel":"Design Style","fieldOptions":{"values":[{"option":"Modern Minimalist"},{"option":"Corporate Professional"},{"option":"Creative Bold"},{"option":"Tech SaaS"},{"option":"Dark Mode"},{"option":"Colorful Playful"}]},"requiredField":true},{"fieldLabel":"SEO Keywords","placeholder":"e.g., web development, consulting, technology","requiredField":true},{"fieldLabel":"Main Heading","placeholder":"e.g., Transform Your Business with AI","requiredField":true},{"fieldType":"textarea","fieldLabel":"Business Description","placeholder":"Describe your business, products, or services in detail...","requiredField":true},{"fieldType":"email","fieldLabel":"Contact Email","placeholder":"user@example.com","requiredField":true},{"fieldLabel":"Company Name","placeholder":"e.g., Tech Solutions Inc."},{"fieldLabel":"Phone Number","placeholder":"+1234567890"},{"fieldLabel":"Social Media Links","placeholder":"Facebook, Twitter, LinkedIn URLs (comma-separated)"},{"fieldLabel":"Google Analytics ID","placeholder":"G-XXXXXXXXXX (optional)"},{"fieldLabel":"Facebook Pixel ID","placeholder":"1234567890 (optional)"},{"fieldType":"textarea","fieldLabel":"Special Features","placeholder":"e.g., contact form, testimonials, image gallery, pricing table"}]},"formDescription":"Create a professional, SEO-optimized, multi-language Progressive Web App with AI."},"typeVersion":2.2},{"id":"5f54999e-4773-4dd2-9839-90f323ece455","name":"Process Form Data","type":"n8n-nodes-base.code","position":[1728,1152],"parameters":{"jsCode":"const f = $json;\nconst langs = (f['Target Languages'] || 'en').split(',').map(l => l.trim());\n\nconst socialLinks = {};\nif (f['Social Media Links']) {\n f['Social Media Links'].split(',').forEach(link => {\n const l = link.trim();\n if (l.includes('facebook')) socialLinks.facebook = l;\n else if (l.includes('twitter') || l.includes('x.com')) socialLinks.twitter = l;\n else if (l.includes('linkedin')) socialLinks.linkedin = l;\n else if (l.includes('instagram')) socialLinks.instagram = l;\n });\n}\n\nconst slug = f['Website Name'].toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');\n\nreturn {\n websiteName: f['Website Name'],\n purpose: f['Primary Purpose'],\n languages: langs,\n primaryLang: langs[0],\n designStyle: f['Design Style'],\n seoKeywords: f['SEO Keywords'],\n mainHeading: f['Main Heading'],\n description: f['Business Description'],\n contactEmail: f['Contact Email'],\n companyName: f['Company Name'] || f['Website Name'],\n phone: f['Phone Number'] || '',\n socialLinks: socialLinks,\n gaId: f['Google Analytics ID'] || '',\n fbPixelId: f['Facebook Pixel ID'] || '',\n specialFeatures: f['Special Features'] || '',\n slug: slug,\n timestamp: Date.now()\n};"},"typeVersion":2},{"id":"8d50a807-8248-490d-9404-e4a831f89b1f","name":"Generate SEO Metadata","type":"@n8n/n8n-nodes-langchain.chainLlm","position":[2080,1152],"parameters":{"text":"=You are an expert SEO specialist. Analyze the following and generate SEO metadata as JSON.\n\nBusiness: {{ $json.companyName }}\nPurpose: {{ $json.purpose }}\nKeywords: {{ $json.seoKeywords }}\nDescription: {{ $json.description }}\nLanguages: {{ $json.languages.join(', ') }}\n\nRespond ONLY in valid JSON with these keys:\n- metaTitle: SEO title (50-60 chars)\n- metaDescription: meta description (150-160 chars)\n- ogTitle: Open Graph title\n- ogDescription: Open Graph description\n- schemaType: Schema.org type (Organization, LocalBusiness, WebSite, etc.)\n- schemaJson: complete Schema.org JSON-LD object as a string\n- keywords: array of 10-15 SEO keywords\n- h1Suggestion: suggested H1 tag text\n- h2Suggestions: array of 3-5 H2 suggestions","messages":{"messageValues":[]},"promptType":"define"},"typeVersion":1.5},{"id":"00a4cfd6-abab-4d79-b01d-270e119e243d","name":"Generate Website HTML","type":"@n8n/n8n-nodes-langchain.chainLlm","position":[2368,1152],"parameters":{"text":"=You are an expert web developer. Generate a complete, production-ready HTML page.\n\nRequirements:\n- Name: {{ $('Process Form Data').item.json.websiteName }}\n- Purpose: {{ $('Process Form Data').item.json.purpose }}\n- Languages: {{ $('Process Form Data').item.json.languages.join(', ') }} (primary: {{ $('Process Form Data').item.json.primaryLang }})\n- Style: {{ $('Process Form Data').item.json.designStyle }}\n- Heading: {{ $('Process Form Data').item.json.mainHeading }}\n- Description: {{ $('Process Form Data').item.json.description }}\n- Email: {{ $('Process Form Data').item.json.contactEmail }}\n- Phone: {{ $('Process Form Data').item.json.phone }}\n- Social: {{ JSON.stringify($('Process Form Data').item.json.socialLinks) }}\n- Features: {{ $('Process Form Data').item.json.specialFeatures }}\n- GA ID: {{ $('Process Form Data').item.json.gaId }}\n- FB Pixel: {{ $('Process Form Data').item.json.fbPixelId }}\n\nSEO Data:\n{{ $json.text }}\n\nInstructions:\n1. Semantic HTML5, mobile-first responsive, modern design\n2. Embed ALL SEO meta tags, Open Graph, Twitter Card, and Schema.org JSON-LD in head\n3. Add language selector in nav with translations for each target language\n4. Add hreflang link tags for all languages\n5. Include in head\n6. Register Service Worker before \n7. Embed Google Analytics and Facebook Pixel if IDs provided\n8. Sections: hero, about/services, features, contact form, footer with social links\n9. All CSS in