Serve Custom Websites (HTML Webpages) with Webhooks
## How it works
This workflow demonstrates how to use n8n to serve a complete, styled HTML webpage. It acts as a mini web server, responding to browser requests with your custom HTML content.
1. **Webhook Trigger:** The workflow starts with a `Webhook` node configured to listen for `GET` requests on a specific path. When you visit this node's Production URL in a browser, it triggers the workflow.
2. **Respond with HTML:** The `Respond to Webhook` node is configured to send a response back to the browser.
- **Content-Type Header:** It sets a crucial response header, `Content-Type: text/html`, which tells the browser to render the response as a webpage, not just plain text.
- **HTML Body:** The entire HTML, CSS, and JavaScript for the webpage is pasted directly into the `Body` field of this node.
When activated, visiting the webhook URL will instantly display the custom webpage.
## Set up steps
**Setup time: < 1 minute**
This workflow is ready to use out-of-the-box.
1. **Activate the workflow.**
2. Open the **`Your WebPage`** (Webhook) node and copy its **Production URL**.
3. Paste the URL into your browser to see the live tutorial page.
4. To use your own HTML, simply open the **`Site`** (Respond to Webhook) node and replace the content in the `Body` field with your own code.
Platform
n8n
Category
Website Building
Price
Free
Creator
Lucas Peyrin
webhook
stickyNote
respondToWebhook
How to import this workflow into n8n
1Purchase or download the workflow to get the n8n workflow JSON file.
2In your n8n instance, open Workflows and choose "Import from File" (or paste the JSON with Ctrl+V on the canvas).
3Open each node marked with a credential warning and connect your own accounts and API keys.
4Run the workflow once manually to verify the data flow, then toggle it to Active.