Publish a Product Website Built with Claude Code

From generated folder to live product page

Claude Code can generate a product website with text, layout, 3D visuals, screenshots, pricing sections and interactive demos. That helps ecommerce teams, product marketers and founders test a product story quickly.

The generated site still needs a publishing workflow before anyone outside the team sees it. The assets, code and data files must stay together. Reviewers need a private URL. You must also be able to update the page after the next prompt, at the same address. This guide shows that workflow with Cloudflare Pages, Netlify and Vercel.

Check the product claims first

Before you publish a generated product page, review the claims as carefully as the layout. A polished mockup can still contain invented specifications, placeholder prices, sample reviews, or buttons that lead nowhere.

• Compare product names, dimensions, materials and compatibility notes with the real product.
• If sample reviews, ratings and customer logos are not real and approved, replace them.
• Make sure that every price, discount and availability note is current.
• Remove claims that you cannot support, such as “best in class” or invented test results.
• Find every form, checkout button and API call. A static page can display a product, but those actions need working destinations.

Keep the generated site folder together

Ask Claude Code to export the site as a clean, self-contained folder. A simple export can look like this:

product-demo/
  index.html
  assets/
    hero-product.webp
    model.glb
    gallery-01.webp
  data/
    specs.json
  styles.css
  app.js

Product sites often depend on local images, 3D models, videos and data files. If those files move, or the HTML points to absolute paths on your computer, the live page breaks. Ask Claude Code to use relative paths and to list every file that the page loads.

Test the folder through a local web server. Do not double-click index.html. When you open a page from disk, browsers often block it from loading JSON or 3D model files. In the folder, run this command:

python3 -m http.server 8000

Then open http://localhost:8000. Click through every section. If the project uses a framework, run its production build. Then test the output folder (often dist or build) instead.

Also look at the file sizes. Cloudflare Pages Direct Upload accepts files of up to 25 MiB each. Its dashboard drag-and-drop accepts up to 1,000 files (Wrangler allows more). A large 3D model or video can need compression or a different host.

Deploy the folder

Pick one host. Keep that host for this product page. Each of these hosts accepts a prebuilt static folder (a folder of finished files):

Host	First deploy	Later updates to the same URL
Cloudflare Pages	Drag the folder into Workers & Pages > Create application > Get started > Drag and drop your files, or run npx wrangler pages deploy product-demo	npx wrangler pages deploy product-demo --project-name=<name>, or Create a new deployment in the dashboard
Netlify	Drag the folder onto Netlify Drop, or run netlify deploy --prod --dir=product-demo from a linked folder	netlify deploy --prod --dir=product-demo, or drop the new folder on the project’s Deploys page
Vercel	Run vercel in the folder. The first deployment of a new project is a production deployment	vercel --prod for production, or plain vercel for a preview

Claude Code can run these commands in its terminal. It asks for your approval before it runs shell commands, unless you already allowed them. Here is a useful prompt:

Build the product site for production if it has a build step. Deploy the output folder to the existing Cloudflare Pages project named product-demo as a preview on the branch “review”. Show me the command before you run it, and report the preview URL.

First, sign in to the CLI of the host yourself (npx wrangler login, netlify login or vercel login). Then no account passwords or tokens end up in the chat.

Use a private review URL before launch

A product page often contains unreleased pricing, packaging, claims, mockups or positioning. Before you share it, put it behind access control. Make sure that you know which addresses the protection covers.

• On Vercel, you set Deployment Protection under Settings > Deployment Protection of the project. Vercel Authentication is available on all plans. It lets in three groups: logged-in Vercel users with access to the project, people that you grant access, and holders of a Shareable Link. Standard Protection covers previews and generated URLs but not production domains. All Deployments covers production too. A shared password is a paid option on Pro and included on Enterprise.
• On Netlify, password protection is available on Pro plans and above, not on the Free and Personal plans. It can cover production and previews, or previews only.
• On Cloudflare Pages, Settings > General > Enable access policy puts preview deployments behind Cloudflare Access. Your *.pages.dev production address and any custom domain need extra Access steps. Cloudflare describes these steps on its Pages known issues page.

For step-by-step guides, see Vercel, Netlify and Cloudflare Pages with Access.

Before you send the link, open it in a private window. Make sure that the login or password screen appears. Then do the same test with a direct link to one image or PDF.

Review the product page like a customer

Open the deployed URL, not your local copy. Examine these parts as if you are a buyer:

• Hero section (the first screen of the page) and product images
• Mobile layout, on a real phone if possible
• 3D or interactive elements
• Pricing, discounts and call-to-action links
• Asset loading on a slow connection
• Accuracy of the text and any compliance wording that your product needs
• Forms, checkout buttons and download links

If something is wrong, ask Claude Code for a specific fix. Then redeploy to the same project.

Update the same product page after the next prompt

The advantage of a fixed hosting project is that you can repeat the same steps. When the product story changes, ask Claude Code to update the source folder. Then deploy again to the same destination. Reviewers continue to use the link that they already have.

Here are examples of specific follow-up prompts:

• “Add a comparison table against the old model.”
• “Replace the hero image with the new render.”
• “Add a wholesale pricing section.”
• “Make the page feel more premium, but keep the current copy hierarchy.”
• “Fix the mobile gallery so the product images do not crop.”

A good rhythm is to deploy each revision as a preview first and review it. Only then deploy to production with --prod (Netlify and Vercel) or the production branch (Cloudflare Pages).

Keep a record of what went live. For each published revision, commit the site folder to Git with a short message. Then you can trace when the text, assets or pricing changed. The hosts also keep their own deploy history. Netlify has the Deploys page, and Vercel has the deployments list. For Cloudflare Pages, run npx wrangler pages deployment list.

Know what a static host will not do

A static deploy serves files. Unless you add those parts on purpose, it does not run your checkout, store form submissions or call private APIs with secret keys. Before launch, do these steps:

• Point buy buttons at a hosted checkout page from your payment provider.
• Send contact or waitlist forms to a form service or your own backend.
• Never put API keys in app.js or any other file in the folder. Visitors can download every file in the folder.

Claude Code can build the product page and run the deploy. The host keeps the page at one URL. While the page is private, the host keeps it behind access control. The same project takes every later update.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.