<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Steve Smith</title>
    <description>The latest articles on DEV Community by Steve Smith (@stevysmith).</description>
    <link>https://dev.to/stevysmith</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3971876%2F3538b426-98b2-478a-ba86-b7460c7fe225.png</url>
      <title>DEV Community: Steve Smith</title>
      <link>https://dev.to/stevysmith</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/stevysmith"/>
    <language>en</language>
    <item>
      <title>Everything that breaks when you mirror a Webflow site (and the fixes)</title>
      <dc:creator>Steve Smith</dc:creator>
      <pubDate>Thu, 11 Jun 2026 00:13:09 +0000</pubDate>
      <link>https://dev.to/stevysmith/everything-that-breaks-when-you-mirror-a-webflow-site-and-the-fixes-1c65</link>
      <guid>https://dev.to/stevysmith/everything-that-breaks-when-you-mirror-a-webflow-site-and-the-fixes-1c65</guid>
      <description>&lt;p&gt;Webflow's code export has two problems. It is only available on paid Workspace plans, and even when you pay, it does not include your CMS content: collection lists export as empty states, collection pages export with nothing in them. If your site has a blog, the export gives you a site without a blog. Forms and search are disabled in exported code too, per Webflow's own docs.&lt;/p&gt;

&lt;p&gt;Meanwhile, the published site is sitting on a CDN, fully rendered. Every CMS page is real HTML. &lt;code&gt;wget --mirror&lt;/code&gt; will happily fetch all of it.&lt;/p&gt;

&lt;p&gt;What wget gives you, though, is not deployable. I migrated a production Webflow site this way and hit the same five breakages everyone hits, so I turned the fixes into a Claude Code skill that runs the whole workflow. This post is the five breakages, because they are useful whether or not you use the skill, and they apply to Framer, Squarespace, and friends with different domain names.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setup: the mirror itself
&lt;/h2&gt;

&lt;p&gt;The one wget incantation that matters, because Webflow serves assets from a separate CDN domain and you have to tell wget to follow it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;wget &lt;span class="nt"&gt;--mirror&lt;/span&gt; &lt;span class="nt"&gt;--convert-links&lt;/span&gt; &lt;span class="nt"&gt;--adjust-extension&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--page-requisites&lt;/span&gt; &lt;span class="nt"&gt;--span-hosts&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--domains&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;yourdomain.com,cdn.prod.website-files.com &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--no-parent&lt;/span&gt; https://yourdomain.com/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This downloads every page plus the CSS, JS, images, and fonts they reference, and rewrites URLs to relative paths. It looks complete. It is about 90% complete, and the missing 10% is invisible until the page renders blank.&lt;/p&gt;

&lt;h2&gt;
  
  
  Breakage 1: the page renders blank, console says "integrity"
&lt;/h2&gt;

&lt;p&gt;The symptom: your mirrored page shows raw unstyled text or nothing at all, and the console says &lt;code&gt;Failed to find a valid digest in the 'integrity' attribute&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The cause is subtle. Webflow ships its &lt;code&gt;&amp;lt;link&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags with SHA-384 SRI hashes. wget's &lt;code&gt;--convert-links&lt;/code&gt; rewrites URLs &lt;em&gt;inside&lt;/em&gt; the downloaded CSS files, which changes their bytes, which means the SRI hash no longer matches, which means the browser silently refuses to apply the stylesheet. The file is right there. The browser will not touch it.&lt;/p&gt;

&lt;p&gt;The fix is to strip the integrity attributes (and &lt;code&gt;crossorigin&lt;/code&gt;, which travels with them):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt; &lt;span class="nt"&gt;-E&lt;/span&gt; &lt;span class="s1"&gt;'s/ integrity="[^"]*"//g; s/ crossorigin="[^"]*"//g'&lt;/span&gt; &lt;span class="k"&gt;*&lt;/span&gt;.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the single most common cause of a "broken" migration, and no static file check will ever catch it, because every file exists and every reference resolves.&lt;/p&gt;

&lt;h2&gt;
  
  
  Breakage 2: the page still renders blank (webpack chunks)
&lt;/h2&gt;

&lt;p&gt;Webflow's runtime is webpack-built and lazy-loads chunks named &lt;code&gt;webflow.achunk.&amp;lt;hash&amp;gt;.js&lt;/code&gt; for sliders, animations, and interactions. wget never sees them, because they are loaded dynamically at runtime, not referenced in any HTML. When the entry bundle throws on the missing import, you get a blank page with a clean asset check. Again.&lt;/p&gt;

&lt;p&gt;Each entry bundle embeds a chunk-id-to-hash map. Extract the hashes, fetch the chunks from the same CDN path, and drop them next to the entry bundles (webpack derives its public path from the entry script location, so no config needed). The skill does this with a small regex pass over the entry bundles; doing it by hand means searching for &lt;code&gt;achunk&lt;/code&gt; in the runtime JS and pulling out the hash map object.&lt;/p&gt;

&lt;h2&gt;
  
  
  Breakage 3: zero-byte images with weird filenames
&lt;/h2&gt;

&lt;p&gt;Webflow double-encodes special characters in CMS asset filenames. A file with a space ships as &lt;code&gt;%2520&lt;/code&gt; (the percent sign itself encoded), a plus as &lt;code&gt;%252B&lt;/code&gt;, an ampersand as &lt;code&gt;%2526&lt;/code&gt;. Decode once before fetching and the CDN 404s, and wget writes a zero-byte file without complaining.&lt;/p&gt;

&lt;p&gt;Find them and re-fetch with the double-encoded URL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;find site/assets/images &lt;span class="nt"&gt;-empty&lt;/span&gt; &lt;span class="nt"&gt;-type&lt;/span&gt; f
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Breakage 4: missing hero images (inline background-image)
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;--page-requisites&lt;/code&gt; follows &lt;code&gt;src&lt;/code&gt; and &lt;code&gt;href&lt;/code&gt; attributes. It does not parse inline styles, so every &lt;code&gt;background-image:url(...)&lt;/code&gt; asset, which on a typical Webflow marketing site includes the hero, is simply not downloaded. Grep the HTML for &lt;code&gt;background-image:url(&lt;/code&gt; references to the CDN, extract, fetch. Bonus breakage inside the breakage: &lt;code&gt;--convert-links&lt;/code&gt; mangles these same inline URLs into nested-quote garbage that needs its own sed pass.&lt;/p&gt;

&lt;h2&gt;
  
  
  Breakage 5: fonts 404 after you reorganize
&lt;/h2&gt;

&lt;p&gt;Webflow's CSS references fonts as &lt;code&gt;url(../font.ttf)&lt;/code&gt;, assuming Webflow's directory layout. The moment you consolidate into a sane &lt;code&gt;assets/css/&lt;/code&gt;, &lt;code&gt;assets/js/&lt;/code&gt;, &lt;code&gt;assets/images/&lt;/code&gt; structure, that relative path points at the wrong directory. One regex pass over the CSS rewrites them.&lt;/p&gt;

&lt;h2&gt;
  
  
  The skill that runs all of this
&lt;/h2&gt;

&lt;p&gt;I packaged the whole thing, mirror, consolidate, rewrite, the five fixes, an in-browser verification pass, and deploy, as an open-source Claude Code skill:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx skills add stevysmith/website-builder-migrate-skill
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then &lt;code&gt;/website-builder-migrate https://yourdomain.com/&lt;/code&gt; runs the seven-phase workflow. It is platform-agnostic with per-platform notes: Framer (React SPA, verify hydration), Squarespace (server-side image transforms), Carrd (trivial, single file), and Wix, which I will be honest about: heavily client-rendered Wix sites mirror badly, treat it as static-template-only.&lt;/p&gt;

&lt;p&gt;Repo: &lt;a href="https://github.com/stevysmith/website-builder-migrate-skill" rel="noopener noreferrer"&gt;https://github.com/stevysmith/website-builder-migrate-skill&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Verify on a private URL before DNS moves
&lt;/h2&gt;

&lt;p&gt;A migrated site needs checking against the original before anything public changes. Disclosure: I build Stacktree, which is the deploy target I added for exactly this step, because it is the only one that needs no account. The migrated folder publishes to a private, unguessable preview URL in one line:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;site &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; zip &lt;span class="nt"&gt;-qr&lt;/span&gt; ../site.zip .&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; curl &lt;span class="nt"&gt;-F&lt;/span&gt; &lt;span class="s2"&gt;"file=@site.zip"&lt;/span&gt; https://api.stacktr.ee/sites
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That preview lives 24 hours, which is enough to click through every page next to the original. When it checks out, deploy wherever you like; the skill's docs cover Render, Netlify, and Vercel too, and keeping the Stacktree one is a free tier away.&lt;/p&gt;

&lt;h2&gt;
  
  
  What stays broken, on every path
&lt;/h2&gt;

&lt;p&gt;Forms (they need Webflow's backend; swap in Formspree or Basin), native site search (Pagefind is the static-friendly answer), and live CMS updates (the mirror is a snapshot; re-run the skill when content changes). Worth repeating: Webflow's official paid export disables forms and search as well, and does not give you the CMS pages at all. The mirror is not a downgrade. For static sites it is the more complete copy.&lt;/p&gt;

&lt;p&gt;If you hit a breakage not on this list, open an issue on the repo. The list grew to five by exactly that process.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>webflow</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Give your AI coding agent a publish-HTML button (with MCP)</title>
      <dc:creator>Steve Smith</dc:creator>
      <pubDate>Sat, 06 Jun 2026 22:22:54 +0000</pubDate>
      <link>https://dev.to/stevysmith/give-your-ai-coding-agent-a-publish-html-button-with-mcp-1ghi</link>
      <guid>https://dev.to/stevysmith/give-your-ai-coding-agent-a-publish-html-button-with-mcp-1ghi</guid>
      <description>&lt;p&gt;Your coding agent writes HTML all day. A quick dashboard to eyeball some data. A PR writeup with a rendered diff. A status report, a Mermaid diagram, a one-off internal tool. Then what? You screenshot it into Slack, paste it into a gist, or spin up a Vercel project for a file you will delete tomorrow.&lt;/p&gt;

&lt;p&gt;There is a verb missing from the agent toolbox: &lt;strong&gt;publish&lt;/strong&gt;. Not deploy. Publish. One file in, one private URL out.&lt;/p&gt;

&lt;p&gt;This post is about how to add that verb to any MCP-compatible agent, why "private by default" matters more than it sounds, and what the publish primitive looks like in practice.&lt;/p&gt;

&lt;h2&gt;
  
  
  The shape of the problem
&lt;/h2&gt;

&lt;p&gt;A deploy is a project. It expects a repo, a build, a config, a domain. That is the right amount of ceremony for a product and far too much for the artifact-shaped output an agent emits dozens of times a session.&lt;/p&gt;

&lt;p&gt;What an agent actually needs is closer to a paste-bin with teeth:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It writes a file. It gets back a URL. No project, no build step.&lt;/li&gt;
&lt;li&gt;The URL is private by default, because agent output routinely embeds real data: API responses, customer rows, the prompt context itself.&lt;/li&gt;
&lt;li&gt;When the agent revises the artifact, the same URL updates in place. You do not want 30 links from 30 iterations.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Model Context Protocol (MCP) is the clean way to expose exactly this. If you have not used MCP, the one-line version: it is the standard every major AI assistant now speaks for calling tools, so a tool you expose once works in Claude Code, Cursor, Codex, Claude.ai, and the rest. (Longer primer: &lt;a href="https://stacktr.ee/blog/mcp-servers-explained-for-developers" rel="noopener noreferrer"&gt;https://stacktr.ee/blog/mcp-servers-explained-for-developers&lt;/a&gt;)&lt;/p&gt;

&lt;h2&gt;
  
  
  The publish tool, conceptually
&lt;/h2&gt;

&lt;p&gt;A publish-oriented MCP server needs one core tool and a few supporting ones. In MCP terms the action is a &lt;strong&gt;tool&lt;/strong&gt; (model-controlled), the list of what you have published is a &lt;strong&gt;resource&lt;/strong&gt; (the client reads it), and a saved "publish this privately" flow is a &lt;strong&gt;prompt&lt;/strong&gt; (the user invokes it). If that tools/resources/prompts split is new to you, here is the breakdown: &lt;a href="https://stacktr.ee/blog/mcp-resources-vs-tools-vs-prompts" rel="noopener noreferrer"&gt;https://stacktr.ee/blog/mcp-resources-vs-tools-vs-prompts&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The tool call itself is mundane, which is the point:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json-doc"&gt;&lt;code&gt;&lt;span class="c1"&gt;// the agent calls:&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="err"&gt;publish_html(&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="na"&gt;file&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dashboard.html"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="err"&gt;)&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;span class="c1"&gt;// it gets back:&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://stacktr.ee/p/3f9a2c7b1e"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"expires"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"24h"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is the whole interaction. The agent hands you a link. You send it to a teammate, who opens it with no account and no login.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why "private by default" is the real feature
&lt;/h2&gt;

&lt;p&gt;Public-by-default hosting made sense when humans hand-published finished pages. It is the wrong default for machine-generated HTML, because the agent does not pause to ask whether this particular file contains anything sensitive. It usually does.&lt;/p&gt;

&lt;p&gt;Private by default flips the burden. The URL is unguessable, so the link itself is the credential. There is no directory listing, no search indexing, no crawl. If you need more, you add a layer: a shared password, or an email-domain gate so only &lt;code&gt;@yourco.com&lt;/code&gt; addresses can open it. For the genuinely sensitive case, end-to-end encryption keeps the host from ever seeing plaintext.&lt;/p&gt;

&lt;p&gt;None of that requires the agent to make a judgment call. The safe thing is the default thing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it in one command
&lt;/h2&gt;

&lt;p&gt;I build &lt;a href="https://stacktr.ee" rel="noopener noreferrer"&gt;Stacktree&lt;/a&gt;, which is one implementation of this primitive: an MCP server for publishing HTML, private by default. Wiring it into your agent is a single command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx stacktree-install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It detects Claude Code, Cursor, Codex, OpenCode, and Amp, writes the MCP config for each, and the publish tools show up in your agent automatically. The first publish is anonymous and the link lives 24 hours, so you can prove it out before you even make an account.&lt;/p&gt;

&lt;p&gt;It is MIT-licensed on the client side and listed in the official MCP registry as &lt;code&gt;ee.stacktr/publish&lt;/code&gt;. Source for the server package: &lt;a href="https://github.com/stevysmith/stacktree-mcp" rel="noopener noreferrer"&gt;https://github.com/stevysmith/stacktree-mcp&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The broader point
&lt;/h2&gt;

&lt;p&gt;Whether or not you use Stacktree, the pattern is worth internalizing: as agents generate more artifacts, the missing infrastructure is not more compute or a fancier framework. It is small, sharp primitives that fit the agent loop. Publish is one of them. A file goes in, a private link comes out, and the agent can replace it in place when it iterates.&lt;/p&gt;

&lt;p&gt;Happy Building!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>mcp</category>
      <category>webdev</category>
      <category>resources</category>
    </item>
  </channel>
</rss>
