Serve Custom HTML Pages via Webhook - n8n Workflow

Developers needing to quickly prototype landing pages or simple dashboards.
Users looking for lightweight hosting solutions powered by n8n.
Automation specialists who want to serve data visualization or reports generated by an n8n workflow.
Anyone interested in turning an n8n node into a simple web server.

This powerful n8n workflow demonstrates how to leverage the built-in webhook functionality to act as a custom web server. While n8n is primarily known for integration and automation, this configuration allows you to define a specific URL that, when visited, returns a complete HTML document, including custom CSS and JavaScript.

The challenge this n8n template solves is the need for a fast, secure way to present custom web content without relying on external web hosting services. By properly configuring the Respond to Webhook n8n node, we ensure the browser interprets the response body as HTML rather than plain text, enabling your n8n workflow to host functional webpages.

This n8n workflow operates on a simple request-response model:

1. Trigger Reception: The process starts when a user or service sends a GET request to the public URL defined by the Your WebPage n8n trigger node.


2. Flow Execution: The incoming request immediately passes to the next n8n node in the sequence.


3. Response Configuration: The Site (Respond to Webhook) n8n node is activated. This crucial step is where the response is defined.


4. Header Setting: The node explicitly sets the Content-Type header to text/html; charset=UTF-8. This tells the visitor's browser (e.g., Chrome, Firefox) that the incoming text is a webpage that needs to be rendered, not just displayed as raw text.


5. Content Delivery: The entire HTML/CSS content embedded within the body parameter of the Respond to Webhook n8n node is sent back to the browser.


6. Result: The user's browser renders the custom webpage defined in the n8n workflow, completing the automation cycle.

To set up this n8n workflow template, follow these steps:

1. Import: Copy the provided JSON code and import it directly into your n8n instance via the Workflows page (New -> Import from JSON).


2. Review the Webhook: The Your WebPage (Webhook) n8n node is pre-configured with a path (tutorial/your-webpage). You can modify this path if desired.


3. Customize Content: Open the Site (Respond to Webhook) n8n node. In the Response Body field, replace the existing example HTML with your own custom HTML, CSS, and scripting.


4. Activate: Save the n8n workflow and click the 'Activate' toggle in the top right corner.


5. Test: Copy the Production URL from the Webhook n8n trigger node and paste it into your browser to view your live webpage served directly by n8n.

This n8n workflow utilizes two primary nodes to achieve the custom webpage hosting functionality.

Your WebPage (Webhook n8n Trigger)
Function: Acts as the initial entry point, listening for incoming HTTP requests (GET method).
Key Configuration: The Path is set to /tutorial/your-webpage. The Response Mode is set to 'Respond to node', ensuring the Webhook waits for the subsequent Respond to Webhook n8n node to finalize and deliver the content.

Site (Respond to Webhook n8n Node)
Function: This n8n node handles the crucial task of generating and sending the response back to the client browser.
Key Configuration:
Respond With: Set to Text.
Response Headers: A key configuration is the header entry: Name: Content-Type, Value: text/html; charset=UTF-8. This is essential for rendering the body as a webpage.
* Response Body: Contains the entire custom HTML document, which is served as the page content. You can place any complex HTML structure here, making this n8n node highly flexible.