AI-Powered Website Generation and Netlify Auto-Deployment - n8n Workflow

• Rapid Prototypers: Individuals needing to quickly generate and deploy simple landing pages based on prompts.


• Automation Engineers: Users looking for advanced examples of combining AI agents, structured output parsing, and HTTP requests in a single n8n workflow.


• Content Creators: Those who want to offer AI-driven website creation services.


• n8n Users: Anyone seeking powerful n8n templates for generative AI and DevOps tasks.

This cutting-edge n8n workflow solves the problem of slow, manual website creation and deployment. By integrating Google Gemini's generative capabilities with Netlify's robust hosting platform, users can define their desired website via a simple form prompt. The AI generates the necessary HTML, CSS, and JavaScript, which the n8n automation then packages, zips, provisions a new site on Netlify, and finally deploys the files. This powerful n8n automation significantly accelerates the development lifecycle, turning a concept into a live website in minutes. Utilizing specialized n8n node components for AI, this solution demonstrates the peak capabilities of integrating large language models into DevOps pipelines.

The entire process is managed end-to-end by the n8n workflow, triggered by a form submission.

1. Trigger and Input: The n8n trigger, the On Form Submission n8n node, captures the user's request (e.g., 'Generate a simple blog about coffee').


2. AI Generation (Langchain Agent): The input is passed to an AI Agent n8n node, orchestrated using multiple Gemini models and a Structured Output Parser. This ensures the AI generates clean, structured code (HTML) rather than freeform text.


3. Netlify Provisioning: The n8n workflow uses an HTTP Request n8n node to check authentication and subsequently calls the Netlify API to reserve and create a new site ID.


4. Data Preparation: A Set n8n node prepares and maps the necessary variables (like the new Site ID and the generated HTML code) for the deployment steps.


5. File Creation: The raw HTML text generated by the AI is converted into a deployable file object (index.html) using the Convert to File n8n node.


6. Compression: Since Netlify API deployments often require compressed archives, the file is immediately packaged into a ZIP format using the Compression to ZIP n8n node.


7. Deployment: Another specialized HTTP Request n8n node (acting as the core Netlify n8n node for deployment) uploads the ZIP archive to the newly provisioned Netlify site.


8. Logging: Finally, the n8n workflow logs the successful deployment details, including the live URL, into an Airtable database using the Airtable n8n node for record keeping.

To utilize this complex n8n template, follow these steps:

1. Import the n8n Workflow: Copy the provided JSON data and paste it into your n8n instance using the 'New' -> 'Import from JSON' function.


2. Configure Credentials:

1. Setup the n8n Trigger: Access the On Form Submission n8n trigger node and copy the generated webhook URL. Use this URL in your chosen form submission tool or test the n8n workflow manually by executing the trigger.

On form submission (n8n trigger):
Function: Initiates the n8n workflow upon receiving form data, providing the initial prompt to the AI.
Key Configuration: Configured to listen on a specific webhook ID.
AI Agent (Langchain n8n node):
Function: Manages the communication and planning logic for the AI model, ensuring complex tasks are handled efficiently.
Key Configuration: Linked to the Google Gemini Chat Model and the Structured Output Parser.
Google Gemini Chat Model (Langchain n8n node):
Function: The core Large Language Model responsible for generating the structured HTML code based on the user's prompt.
Netlify - Create new site (HTTP Request n8n node):
Function: Calls the Netlify API endpoint /api/v1/sites to provision a new hosting environment.
Convert html text to HTML File (Convert To File n8n node):
Function: Converts the string output of the AI (the website code) into a binary file format required for deployment, naming it appropriately (e.g., index.html).
Compression to ZIP (n8n node):
Function: Compresses the generated HTML file into a .zip archive, preparing the payload for the Netlify deployment API.
Netlify - Create deployment (HTTP Request n8n node):
Function: Uploads the zipped website file to the newly created Netlify site ID, initiating the automated deployment process. This is a critical step in the n8n workflow.
Create a record (Airtable n8n node):
Function: Used for post-deployment logging, tracking the site URL and creation details, proving a record of the complete n8n automation execution.