{ "nodes": [ { "id": "2b9d377c-853f-4ef1-92e2-1d4a324179a4", "name": "Site", "type": "n8n-nodes-base.respondToWebhook", "position": [ 100, -40 ], "parameters": { "options": { "responseHeaders": { "entries": [ { "name": "Content-Type", "value": "text/html; charset=UTF-8" } ] } }, "respondWith": "text", "responseBody": "=\n\n\n \n \n n8n Workflow: Serving a Static HTML Page\n \n \n \n \n\n\n\n
\n\n
\n

Serve a Full Webpage with n8n

\n

Learn how to use a simple n8n workflow to act as a web server, returning a complete HTML page to anyone who visits your webhook URL.

\n
\n\n
\n
1
\n
\n

The Trigger: Webhook Node

\n

Every workflow that responds to a web request starts with the Webhook node. This is your entry point.

\n
    \n
  • Add a new Webhook node to an empty canvas.
    • \n
  • Set the HTTP Method to GET. This means it will respond when someone visits the URL in their browser.
    • \n
  • Copy the Production URL. You'll use this to see your workflow in action. Once you activate the workflow, you'll be able to see your webpage in the browser.
    • \n
\n
\n
\n\n
\n
2
\n
\n

The Response: Respond to Webhook Node

\n

This is where the magic happens. This node sends your data back to the browser that triggered the webhook.

\n

Connect a Respond to Webhook node to your Webhook node. To make it serve a webpage, you need to configure two things:

\n \n

1. Set the Content-Type Header:

\n

You must tell the browser it's receiving an HTML document. Under Options, add a Response Header:

\n
    \n
  • Name: Content-Type
    • \n
  • Value: text/html
    • \n
\n\n

2. Add your HTML to the Body:

\n

In the Body field of the node, paste your entire HTML code. The workflow will send this exact content as the response.

\n\n
\n 
<!-- Paste your entire HTML file here -->\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Your Very Own WebPage (AI can build it);/title>\n    <style>\n        :root {\n            --bg-color: #2e2e30;\n            /* ... all your other CSS styles ... */\n        }\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto;\n            /* ... etc ... */\n        }\n    </style>\n</head>\n<body>\n    <div class=\"container\">\n        <h1>\ud83d\ude80 Your Very Own WebPage (AI can build it)</h1>\n        <p>You can put any html here !!</p>\n        \n        <!-- ... The rest of your HTML content ... -->\n\n    </div>\n</body>\n</html>\n
\n
\n
\n
\n\n
\n

That's It!

\n

Activate your workflow. Now, when you visit your Production URL, n8n will serve your custom webpage. You've successfully turned a simple workflow into a mini web server.

\n

This method is perfect for creating landing pages, dashboards, or dynamic pages where n8n fetches data before rendering the HTML.

\n
\n\n
\n\n\n" }, "typeVersion": 1.1 }, { "id": "ec1325bb-c440-46f2-90e5-3288a0683dda", "name": "Your WebPage", "type": "n8n-nodes-base.webhook", "position": [ -280, -40 ], "parameters": { "path": "tutorial/your-webpage", "options": {}, "responseMode": "responseNode" }, "typeVersion": 2 }, { "id": "37f044be-f4b8-4404-bd69-f4f2ce233774", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ -400, -340 ], "parameters": { "color": 6, "width": 360, "height": 460, "content": "### \u25b6\ufe0f START HERE: The Webhook\n\nThis node is the entry point for your webpage.\n\n1. **Activate** the workflow.\n2. Copy the **Production URL** from this node.\n3. Paste the URL into your browser to see the result.\n\n\nThe `Path` is set to `tutorial/your-webpage`, but you can change it to whatever you like." }, "typeVersion": 1 }, { "id": "6ae79d50-faa3-42d0-ba1d-65de358f0748", "name": "Sticky Note1", "type": "n8n-nodes-base.stickyNote", "position": [ -20, -340 ], "parameters": { "color": 7, "width": 360, "height": 460, "content": "#### \ud83c\udfa8 CUSTOMIZE YOUR WEBPAGE HERE\n\nThis node sends the HTML content back to the browser.\n\n**To use your own design:**\n1. **Replace the HTML in the `Body` field** with your own code. You can put anything here: HTML, CSS, and even `