使用Webhook提供自定义HTML网页
初级
这是一个自动化工作流，包含 4 个节点。主要使用 Webhook, RespondToWebhook 等节点。 通过Webhook提供自定义HTML网页
前置要求
- •HTTP Webhook 端点（n8n 会自动生成）
使用的节点 (4)
分类
-
工作流预览
可视化展示节点连接关系，支持缩放和平移
导出工作流
复制以下 JSON 配置到 n8n 导入，即可使用此工作流
{
"meta": {
"instanceId": "e409ea34548a2afe2dffba31130cd1cf2e98ebe2afaeed2a63caf2a0582d1da0"
},
"nodes": [
{
"id": "2b9d377c-853f-4ef1-92e2-1d4a324179a4",
"name": "站点",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
100,
-40
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "text/html; charset=UTF-8"
}
]
}
},
"respondWith": "text",
"responseBody": "=<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>n8n Workflow: Serving a Static HTML Page</title>\n <style>\n :root {\n --n8n-bg: #131416;\n --n8n-surface: #1b1c20;\n --n8n-border: #2a2c31;\n --n8n-text: #e1e1e1;\n --n8n-text-muted: #9a9a9a;\n --n8n-green: #37e2a3;\n --n8n-purple: #a45fff;\n --n8n-font: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n body {\n font-family: var(--n8n-font);\n background-color: var(--n8n-bg);\n color: var(--n8n-text);\n margin: 0;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .header h1 {\n font-size: 2.8rem;\n font-weight: 700;\n background: -webkit-linear-gradient(45deg, var(--n8n-green), var(--n8n-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.2rem;\n color: var(--n8n-text-muted);\n max-width: 650px;\n margin: 0 auto;\n }\n\n .step {\n background-color: var(--n8n-surface);\n border: 1px solid var(--n8n-border);\n border-radius: 12px;\n padding: 2rem;\n margin-bottom: 2rem;\n display: flex;\n gap: 2rem;\n align-items: flex-start;\n }\n\n .step-number {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--n8n-border);\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--n8n-green);\n }\n\n .step-content h2 {\n margin-top: 0;\n font-size: 1.5rem;\n color: var(--n8n-text);\n }\n\n .step-content p, .step-content ul {\n color: var(--n8n-text-muted);\n }\n \n .step-content ul {\n padding-left: 20px;\n }\n \n .step-content li {\n margin-bottom: 0.5rem;\n }\n\n code {\n font-family: 'Fira Code', 'Courier New', monospace;\n background-color: var(--n8n-bg);\n color: var(--n8n-green);\n padding: 0.2em 0.4em;\n border-radius: 4px;\n font-size: 0.9em;\n }\n\n .code-block {\n background-color: var(--n8n-bg);\n border: 1px solid var(--n8n-border);\n border-radius: 8px;\n padding: 1.5rem;\n margin-top: 1rem;\n overflow-x: auto;\n }\n\n .code-block pre {\n margin: 0;\n }\n \n .code-block code {\n padding: 0;\n background: none;\n color: var(--n8n-text-muted);\n }\n \n .code-block .comment {\n color: #6a6a6a;\n }\n\n .final-note {\n text-align: center;\n padding: 2rem;\n background-color: var(--n8n-surface);\n border: 1px solid var(--n8n-border);\n border-radius: 12px;\n }\n \n .final-note h2 {\n color: var(--n8n-green);\n }\n\n a {\n color: var(--n8n-green);\n text-decoration: none;\n font-weight: 500;\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n @media (max-width: 768px) {\n body { padding: 1rem; }\n .header h1 { font-size: 2.2rem; }\n .step { flex-direction: column; }\n .step-number { margin-bottom: 1rem; }\n }\n </style>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap\" rel=\"stylesheet\">\n</head>\n<body>\n\n <div class=\"container\">\n\n <header class=\"header\">\n <h1>Serve a Full Webpage with n8n</h1>\n <p>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.</p>\n </header>\n\n <div class=\"step\">\n <div class=\"step-number\">1</div>\n <div class=\"step-content\">\n <h2>The Trigger: Webhook Node</h2>\n <p>Every workflow that responds to a web request starts with the <strong>Webhook</strong> node. This is your entry point.</p>\n <ul>\n <li>Add a new Webhook node to an empty canvas.</li>\n <li>Set the <strong>HTTP Method</strong> to <code>GET</code>. This means it will respond when someone visits the URL in their browser.</li>\n <li>Copy the <strong>Production URL</strong>. 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.</li>\n </ul>\n </div>\n </div>\n\n <div class=\"step\">\n <div class=\"step-number\">2</div>\n <div class=\"step-content\">\n <h2>The Response: Respond to Webhook Node</h2>\n <p>This is where the magic happens. This node sends your data back to the browser that triggered the webhook.</p>\n <p>Connect a <strong>Respond to Webhook</strong> node to your Webhook node. To make it serve a webpage, you need to configure two things:</p>\n \n <p><strong>1. Set the Content-Type Header:</strong></p>\n <p>You must tell the browser it's receiving an HTML document. Under <strong>Options</strong>, add a Response Header:</p>\n <ul>\n <li><strong>Name:</strong> <code>Content-Type</code></li>\n <li><strong>Value:</strong> <code>text/html</code></li>\n </ul>\n\n <p><strong>2. Add your HTML to the Body:</strong></p>\n <p>In the <strong>Body</strong> field of the node, paste your entire HTML code. The workflow will send this exact content as the response.</p>\n\n <div class=\"code-block\">\n <pre><code><span class=\"comment\"><!-- Paste your entire HTML file here --></span>\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>🚀 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</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"final-note\">\n <h2>That's It!</h2>\n <p>Activate your workflow. Now, when you visit your <strong>Production URL</strong>, n8n will serve your custom webpage. You've successfully turned a simple workflow into a mini web server.</p>\n <p>This method is perfect for creating landing pages, dashboards, or dynamic pages where n8n fetches data before rendering the HTML.</p>\n </div>\n\n </div>\n\n</body>\n</html>"
},
"typeVersion": 1.1
},
{
"id": "ec1325bb-c440-46f2-90e5-3288a0683dda",
"name": "您的网页",
"type": "n8n-nodes-base.webhook",
"position": [
-280,
-40
],
"webhookId": "99651075-3d83-4d67-963f-06c7a5e6a3d3",
"parameters": {
"path": "tutorial/your-webpage",
"options": {},
"responseMode": "responseNode"
},
"typeVersion": 2
},
{
"id": "37f044be-f4b8-4404-bd69-f4f2ce233774",
"name": "便签",
"type": "n8n-nodes-base.stickyNote",
"position": [
-400,
-340
],
"parameters": {
"color": 6,
"width": 360,
"height": 460,
"content": "### ▶️ 从这里开始：Webhook"
},
"typeVersion": 1
},
{
"id": "6ae79d50-faa3-42d0-ba1d-65de358f0748",
"name": "便签1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-20,
-340
],
"parameters": {
"color": 7,
"width": 360,
"height": 460,
"content": "#### 🎨 在此处自定义您的网页"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"Your WebPage": {
"main": [
[
{
"node": "Site",
"type": "main",
"index": 0
}
]
]
}
}
}常见问题
如何使用这个工作流？
复制上方的 JSON 配置代码，在您的 n8n 实例中创建新工作流并选择「从 JSON 导入」，粘贴配置后根据需要修改凭证设置即可。
这个工作流适合什么场景？
初级
需要付费吗？
本工作流完全免费，您可以直接导入使用。但请注意，工作流中使用的第三方服务（如 OpenAI API）可能需要您自行付费。
相关工作流推荐
AI提示制作器
AI提示制作器
Form
Webhook
Form Trigger
+4
16 节点Lucas Peyrin
人工智能
教程 - 创建安全Webhook
教程 - 创建安全Webhook
If
Set
Filter
+5
14 节点Lucas Peyrin
构建模块
⚡自动工作流定位！
⚡自动工作流定位！
If
N8n
Switch
+16
34 节点Lucas Peyrin
其他
通过交互式动手教程学习API基础知识
通过交互式动手教程学习API基础知识
If
Set
Wait
+4
28 节点Lucas Peyrin
人工智能
带等待节点的长运行工作流状态管理系统
带等待节点的长运行工作流状态管理系统
If
Set
Code
+10
42 节点Lucas Peyrin
工程
自动n8n更新器（Docker）
自动n8n更新器（Docker）
If
Set
Ssh
+6
26 节点Lucas Peyrin
人工智能
工作流信息
难度等级
初级
节点数量4
分类-
节点类型3
作者
Lucas Peyrin
@lucaspeyrinInnovative builder with a passion for crafting automation solutions that solve real-world challenges. From streamlining workflows to driving efficiency, my work empowers teams and individuals to achieve more with less effort. Experienced in developing scalable tools and strategies that deliver results with n8n, supabase and cline.
外部链接
在 n8n.io 查看 →
分享此工作流