🗲 Serve custom websites (HTML webpages) with webhooks

Open on n8n.io

$20/month : Unlimited workflows

2500 executions/month

Try free

THE #1 IN WEB SCRAPING

Scrape any website without limits

Try free

HOSTINGER

Early Deal
DISCOUNT 20%

Self-hosted n8n

Unlimited workflows - from $4.99/mo

Try free

#1 hub for scraping, AI & automation

6000+ actors - $5 credits/mo

Try free

Important notice

This workflow is provided as-is. Please review and test before using in production.

1. Workflow Overview

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. Webho...

Best for

Engineering automation workflows
intermediate n8n builders looking for reusable templates

Tools used

n8n-nodes-base.respondtowebhook, n8n-nodes-base.webhook, n8n-nodes-base.stickynote

Source and attribution

This workflow is cataloged by N8N Workflows and links back to its original n8n.io source page by Lucas Peyrin.

Original n8n.io source

1.1 Workflow description

Title: 🗲 Serve custom websites (HTML webpages) with webhooks
Workflow name: 🗲 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.

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.
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.

Activate the workflow.
Open the Your WebPage (Webhook) node and copy its Production URL.
Paste the URL into your browser to see the live tutorial page.
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.

1.2 Logical Blocks

This catalog entry is organized from the workflow JSON. The node-level section below shows the executable blocks available for review before importing the template.

2. Block-by-Block Analysis

Block 1 - Site

Type / Role: n8n-nodes-base.respondToWebhook - respondToWebhook
Config choices: Version 1.1

Block 2 - Your WebPage

Type / Role: n8n-nodes-base.webhook - webhook
Config choices: Version 2

Block 3 - Sticky Note

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 4 - Sticky Note1

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 5 - Sticky Note12

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

3. Summary Table

Workflow	🗲 Serve custom websites (HTML webpages) with webhooks
Complexity	intermediate
Nodes	5
Categories	Engineering
Author	Lucas Peyrin
Published	23 Jun 2025

4. Reproducing the Workflow from Scratch

1. Download the workflow JSON

Use the JSON export at /data/workflows/5173/5173.json as the source template for this automation.
2. Import the template into n8n

Open n8n, import the downloaded JSON, and review each node before activating the workflow.
3. Configure credentials and variables

Replace placeholder credentials, API keys, webhook URLs, account IDs, and environment-specific values with your own settings.
4. Test with sample data

Run the workflow manually or in a staging workspace, inspect node output, and confirm downstream systems receive the expected data.
5. Activate and monitor

Enable the workflow only after testing, then monitor executions, errors, and rate limits during the first production runs.

5. General Notes & Resources

Review imported nodes carefully before activation. This catalog entry is intended to help you inspect the workflow structure, understand required services, and find related templates faster.

Node names, credentials, schedules, webhook paths, and external service limits may need adjustment for your workspace.

Download workflow JSON Original n8n.io source Engineering workflows

Frequently asked questions

What does 🗲 Serve custom websites (HTML webpages) with webhooks do?

What do I need before importing this workflow?

Review the workflow JSON, configure any required credentials in n8n, and test the automation in a safe workspace before using it in production.

Can I customize this workflow?

Yes. Use the block-by-block analysis and the downloadable JSON to inspect each node, then adjust credentials, prompts, schedules, filters, or destinations for your Engineering use case.

Lucas Peyrin

30 workflows

Nodes

n8n-nodes-base.respondtowebhook n8n-nodes-base.webhook n8n-nodes-base.stickynote

Complexity

intermediate

Published 23 Jun 2025

Likes 0

View on n8n.io Download Workflow

Install path: /data/workflows/5173/5173.json

Share Your Workflow

Have a useful automation to share? Publish it and help the community.

Submit Your Template How to Submit

Related Workflows

Build self-improving agent skills with cognee

## Quick overview A self-improving loop for agent skills, powered by the cognee Verified Node. When a skill's review scores below your threshold, it proposes a rewrite, and you approve the before/after diff before it's applied. No code required. ## How it works 1. Execute your workflow. 2. Set the demo inputs (skill name, dataset name, skill procedure markdown, review task text, and the score threshold). 3. Ingest the skill into cognee. 4. Cognee reviews the skill’s performance and returns a JSON with a score and gaps. 5. If the score is below the threshold, the workflow requests a cognee improvement proposal for the skill. 6. The workflow retrieves the full proposal from cognee and builds a human-readable before/after diff. 7. If the proposal is approved, the workflow applies the improvement in cognee, fetches the updated skill, and outputs the updated procedure and diff. ## Setup 1. Create a cognee API credential in n8n and use it in all cognee nodes (Ingest Skill, Review Skill, Propose Improvement, Get Proposal, Apply Improvement, Get Skill). Information for the credential (URL and API key) can be found in your Cognee Cloud account. 2. Update the skill parameters (skill_name, dataset_name, skill_markdown, task_text, score_threshold, and approved) to match your use case. 3. Ensure the referenced cognee dataset name exists so the skill can be stored and retrieved consistently.

View

Orchestrate multi-agent energy optimization with OpenAI GPT and Claude

## Quick Overview This workflow runs manually to orchestrate multi-agent analysis for a thermodynamic system, using OpenAI and Anthropic models to interpret sensor inputs, optimize energy usage, plan and execute tasks, validate results, and send an HTTP alert if validation fails. ## How it works 1. Starts when you manually trigger the workflow with initial system state, temperature, energy budget, and a task queue. 2. Uses OpenAI (GPT-5-mini) to analyze the provided sensor context, detect anomalies, and output structured sensor readings with confidence scores. 3. Uses OpenAI (GPT-5-mini) plus a calculator and custom energy-analysis code tool to compute efficiency/entropy metrics and propose an optimized energy allocation. 4. Uses OpenAI (GPT-5-mini) to build an execution plan and energy estimate for the queued tasks based on the optimized budget and sensor state. 5. Uses Anthropic (Claude Sonnet) to execute the planned task sequence within the estimated energy limit and return structured outcomes and actual energy usage. 6. Uses Anthropic (Claude Sonnet) to validate thermodynamic compliance by comparing planned vs. actual energy and generating recommendations. 7. If validation passes, compiles a final system report and returns the final system state; if validation fails, generates recalibration parameters and posts a JSON alert to an external webhook endpoint. ## Setup 1. Add credentials for OpenAI (Chat) and Anthropic (Chat) so the Perception, Energy Optimization, Planning, Execution, Validation, and Recalibration agents can run. 2. Replace the placeholder alert webhook URL in the HTTP Request step and configure HTTP Header Auth credentials for the target alerting endpoint. 3. Provide the required input fields on trigger (systemState, temperature, energyBudget, and taskQueue) or adjust the prompts to match your data structure. 4. If your execution step needs real environment context, add or connect a node that supplies the referenced environment data (the workflow currently references “Fetch Environment Data” but does not include it).

View

Optimize maritime routes and disruption response with OpenAI and Slack

## Quick Overview This workflow runs every 15 minutes to pull vessel telemetry/AIS data, enrich it with port and weather context, and use OpenAI to detect disruptions, simulate route alternatives, and generate an executive briefing that requires human approval before notifying teams in Slack. ## How it works 1. Runs every 15 minutes on a schedule. 2. Fetches fleet vessel telemetry and AIS data from a configured HTTP API. 3. Retrieves weather forecast and port congestion context for each vessel/route from a second HTTP API. 4. Uses OpenAI to analyze telemetry against historical baselines and classify any operational anomalies with severity and confidence. 5. Uses OpenAI to aggregate anomaly, weather, and port context into risk factors, urgency, and an action category. 6. Uses OpenAI to simulate 2–3 routing and speed options, estimating cost, emissions, fuel, duration, and weather risk, and selects a recommended route. 7. Generates an executive briefing with compliance and master-authority notes, pauses for human approval via an n8n form, and then posts the decision and recommendation to a Slack channel. ## Setup 1. Add OpenAI API credentials for the three OpenAI chat model steps. 2. Configure HTTP Header Auth credentials and replace the placeholder URLs and query parameters for your AIS/telemetry API and your weather/port API. 3. Ensure the upstream APIs return the fields referenced in the prompts (for example position, speed, fuel consumption, historical baselines, forecast, and port congestion). 4. Connect a Slack OAuth2 credential and select the target channel for posting the approved briefing. 5. Test the approval form step in n8n and confirm who will receive and complete approvals before enabling the workflow.

View

Need Custom Automation?

Get help designing a custom n8n workflow that connects your stack and fits your process.

🗲 Serve custom websites (HTML webpages) with webhooks

Workflow preview

Important notice

1. Workflow Overview

Best for

Tools used

Source and attribution

1.1 Workflow description

How it works

Set up steps

1.2 Logical Blocks

2. Block-by-Block Analysis

Block 1 - Site

Block 2 - Your WebPage

Block 3 - Sticky Note

Block 4 - Sticky Note1

Block 5 - Sticky Note12

3. Summary Table

4. Reproducing the Workflow from Scratch

1. Download the workflow JSON

2. Import the template into n8n

3. Configure credentials and variables

4. Test with sample data

5. Activate and monitor

5. General Notes & Resources

Frequently asked questions