/portable-html-port

name: portable-html-port
description: Port a built site or page into a single self-contained HTML file — CSS and JS inlined, small images base64-embedded, large ones flagged for CDN, source maps stripped — that pastes into any CMS or page-builder custom-HTML surface (WordPress, GoHighLevel, Webflow, Wix, Framer, Squarespace, Carrd, or generic) with no per-platform edits. Trigger when the user says "port to wordpress", "put this in ghl", "single-file html", "portable html", "make this embed-ready", "embed in webflow", or "wp port".

portable-html-port

**Family:** build-and-qa **Status:** Stable

Purpose

Convert a multi-file build (HTML + external CSS + external JS + local images) into a single self-contained HTML file that pastes into any CMS/page-builder custom-HTML surface with no per-platform tweaks. CSS and JS are inlined, small local images are base64-embedded, large ones are flagged for CDN hosting, and dev artifacts (source maps) are stripped.

Triggers

• "port to wordpress" / "wp port"
• "put this in ghl"
• "single-file html" / "portable html"
• "make this embed-ready"
• "embed in webflow"

Inputs

• Source build entry file (the HTML to port) and its asset folder
• Target platform hint (wordpress / ghl / webflow / wix / framer / squarespace / carrd / generic)
• Inline-image size threshold (KB) — images larger stay external

Steps

1. **Locate the entry HTML** and confirm its CSS/JS/images are local (remote `http(s)://` assets are left untouched on purpose). 2. **Run the porter** (try `python3`, then `py` on Windows):

   python3 "${CLAUDE_PLUGIN_ROOT}/scripts/workflow/portable_html.py" \
     --in <path/to/index.html> --out <portable.html> \
     --target <platform> --inline-img-kb 50 --human

3. **Read the report.** It returns the output size, target-specific paste instructions, and warnings — including any images/JS left external and whether the file exceeds the target platform's inline-code limit. 4. **Handle warnings.** If the file exceeds a platform cap (e.g. Webflow ~50KB, GHL ~5MB/element) or large images were left external, recommend CDN-hosting those assets and re-run, or switch to a mixed strategy. 5. **Verify** the output renders standalone (open it / spot-check), then deliver it with the target-specific paste instructions from the report.

Outputs

• `portable.html` — the single-file bundle
• A size + warnings report (JSON, or `--human` text) with paste instructions
• A list of any assets left external (to host on a CDN)

Dependencies

• `scripts/workflow/portable_html.py` (required) — Python 3.10+, standard library only
• Browser or Playwright (optional — adds an automated standalone-render check; free path: open the output file and spot-check manually)

Notes

Platform quirks the output respects (the script encodes the size limits and paste guidance per target):

• **WordPress** (Gutenberg Custom HTML block / Elementor HTML widget) — supports `<style>`+`<script>`
• **GoHighLevel** — Custom Code element; watch per-element size; CDN large media
• **Webflow** — custom-code embeds cap near 50KB; prefer external/CDN assets
• **Wix** — HTML iframe; isolated context, JS can't reach the parent page
• **Framer / Squarespace** — full HTML+CSS+JS embed support
• **Carrd** — Embed element (Code type); requires a Carrd Pro plan

Sample source input lives in `references/examples/portable-html/src/`.