Site Cloner

Clone any live website into a self-contained, dependency-free HTML file with all content, styles, fonts, and images extracted and preserved. Use when asked to clone, copy, replicate, or mirror a website; or when the user says "clone this site", "copy this site", "make me a copy of this URL", or "recreate this website". Handles React/Vue/Angular SPAs by extracting from the JS bundle. Optionally deploys to a VPS via nginx and pushes to a private GitHub repo.

michelle447@michelle447

Install

openclaw skills install @michelle447/site-cloner

Site Cloner

Clones any live website into a clean, standalone HTML file with all assets.

Workflow

1. Fetch the page

powershell

$html = (Invoke-WebRequest -Uri "<URL>" -UseBasicParsing).Content

Check <script src="..."> and <link rel="stylesheet" href="..."> tags.

2. Detect site type

Static HTML: Extract content directly from $html
React/Vue/Angular SPA: The <body> has only <div id="root"> — extract from the JS bundle instead (see references/spa-extraction.md)

3. Extract content from JS bundle (SPA)

Download the JS bundle, then mine for:

UI copy: [regex]::Matches($js, '"([A-Z][^"]{10,400})"') — filter for strings with spaces, no code keywords
Image paths: [regex]::Matches($js, '"(/[^"]+\.(jpg|jpeg|png|webp|svg|avif))"')
Nav links: search for href:"# patterns
Theme/colors: download the CSS bundle, extract --[a-z-]+: custom properties
Fonts: look for family= in the CSS @import URL

4. Download all images

powershell

$images = @("image1.png", "image2.jpg")  # from step 3
$dir = "C:\Users\MJ\.openclaw\workspace\<site-name>-clone\images"
New-Item -ItemType Directory -Force -Path $dir | Out-Null
foreach ($img in $images) {
    Invoke-WebRequest -Uri "<BASE_URL>/images/$img" -OutFile "$dir\$img" -UseBasicParsing -TimeoutSec 25
}

5. Build the HTML file

Use write tool to create index.html. Follow the template in references/html-template.md.

Rules:

Single file, zero npm/build dependencies
Inline all CSS in <style> tags using extracted custom properties
Load fonts via Google Fonts <link> tag
Reference images as /images/filename.ext
Add scroll animations via IntersectionObserver
Add navbar scroll behavior, carousel logic, form toast — all vanilla JS

6. Deploy to VPS (if requested)

powershell

# Upload files
ssh -i C:\Users\MJ\.ssh\vps_key root@187.124.92.226 "mkdir -p /var/www/<name> && chmod 755 /var/www/<name>"
scp -i C:\Users\MJ\.ssh\vps_key index.html root@187.124.92.226:/var/www/<name>/
scp -i C:\Users\MJ\.ssh\vps_key -r images root@187.124.92.226:/var/www/<name>/
ssh -i C:\Users\MJ\.ssh\vps_key root@187.124.92.226 "chmod 755 /var/www/<name>/images"

# Write nginx config locally, scp it (never write via heredoc — variable escaping breaks)
$config = "server { listen <PORT>; server_name _; root /var/www/<name>; index index.html; location / { try_files `$uri `$uri/ =404; } }"
# Write full multiline config to file first, then scp
$config | Out-File ".\nginx-<name>.conf" -Encoding ASCII -NoNewline
scp -i C:\Users\MJ\.ssh\vps_key ".\nginx-<name>.conf" root@187.124.92.226:/etc/nginx/sites-available/<name>
ssh -i C:\Users\MJ\.ssh\vps_key root@187.124.92.226 "ln -sf /etc/nginx/sites-available/<name> /etc/nginx/sites-enabled/<name> && nginx -t && systemctl reload nginx"

Port allocation (MJW VPS — 187.124.92.226):

8080 → arnicapatch
8081 → taylored-touch
8082 → twisted-roots
8083+ → next available

Critical nginx gotcha: Always write the config to a local file and scp it. Never use heredoc or printf over SSH — $uri gets mangled.

7. Push to GitHub (if requested)

powershell

cd "<clone-dir>"
git init
git add index.html images/
git commit -m "Initial clone of <URL>"
gh repo create <name>-clone --private --source=. --remote=origin --push

If repo already exists: git remote set-url origin git@github.com:michelle447/<name>-clone.git && git push

Output

Always report:

✅ Local path
✅ GitHub URL (if pushed)
✅ VPS URL (if deployed)
Image count downloaded

Site Cloner

Install

Site Cloner

Workflow

1. Fetch the page

2. Detect site type

3. Extract content from JS bundle (SPA)

4. Download all images

5. Build the HTML file

6. Deploy to VPS (if requested)

7. Push to GitHub (if requested)

Output

Related skills