Setting up a staging copy before using Claude Code

Before Claude Code changes anything on your website, it should have a copy to work on, and you should have a private place to look at the result before customers do. In practice that means two things: a local copy of the site's files in git on the computer where Claude Code runs, and a staging or preview copy on the web where a person checks each change. Claude Code edits the local copy. The change goes to staging or a preview first. Only after a person approves it does anything reach the live site.

How you get there depends on your platform. Sites built from code on hosts such as Vercel and Netlify get preview copies almost for free. WordPress usually needs a staging site from your host or a plugin. Shopify uses a duplicate or unpublished theme. This guide covers each one as of October 2026, plus the two staging mistakes that cause the most damage: letting Google index the copy, and pointing the copy at live data.

Local, staging and preview: what each copy is for

You don't always need all four. A static or Next.js site often gets by with local copies plus preview deployments. A WordPress or WooCommerce store usually needs a real staging site, because so much of it lives in the database.

Why Claude Code needs a copy

Three facts from Anthropic's documentation explain it.

• Undo is local. Rewind restores file edits from the session, but "actions that affect remote systems (databases, APIs, deployments) can't be checkpointed." If Claude changes a live database or triggers a deploy, rewind can't help.
• Pushes can be deploys. In auto mode, which current versions use as the starting mode in the terminal and VS Code, Claude Code may push to any branch, including main, according to Anthropic's auto mode docs. Vercel deploys automatically "on every branch push and merges onto the production branch," so on many sites a push to main is a live deploy.
• Review needs something to look at. Reading a diff tells you what changed in the files. A staging or preview copy tells you what the page looks like and whether the form still sends.

When we rebuilt eseospace.com, every bulk edit ran on a copy first, then twice on the real files, with the second run required to change nothing. A copy is what makes that kind of rule possible.

Options by platform

Platform details are in our guides to Claude Code for WordPress, Claude Code for Shopify and Claude Code with Vercel and Netlify.

Step by step: a code-based site on Vercel or Netlify

1. Confirm the site is in a git repository connected to your host. Check: the host's dashboard lists deploys with commit messages.
2. Confirm which branch is production. Usually main. Check: the host's project settings name the production branch.
3. Clone (download) the repository to the computer where Claude Code runs. Ask your developer, or ask Claude Code to do it once you've installed it. Check: the folder contains the site's files and a git history.
4. Find the local preview command. Ask Claude: What command runs this site locally? Don't change any files. Check: you can open the site at a local address in your browser.
5. Make a test change on a branch, push the branch and open a pull request. A branch is a separate line of work; a pull request asks to merge it into main. Check: the host posts a preview link on the pull request, and the change shows there but not on the live domain.
6. Protect main. Turn on GitHub branch protection with a required review, so nothing merges into the production branch without approval. See our git basics for non-developers.

Vercel also offers Instant Rollback to a previous production deployment, and Netlify lets you publish an earlier deploy from its dashboard. Test the rollback once on a quiet day, so you know where the button is before you need it.

Step by step: WordPress and WooCommerce

1. Take a full backup of the live site. Files and database. Check: the backup is listed with today's date in your host or backup tool.
2. Create the staging site. Ask your host first: WooCommerce notes "most hosting providers can help with this," and it mentions the WP Staging plugin as another route. Check: the staging URL loads and shows your content.
3. Block it from search engines and the public. See the next section.
4. Turn off anything on staging that touches real people. Outgoing order or form emails, live payment gateways, marketing tags. Ask your developer how on your stack.
5. Put your custom theme and plugin code in git. Claude Code works on those files locally, and you deploy them to staging first. A local install with wp-env or WordPress Studio gives Claude Code a copy to run commands against.
6. Test there, then move changes to live deliberately. WooCommerce's advice for updates: test on staging and "update WooCommerce, extensions, payment gateways, and your theme together."

Our existing guide to WordPress staging sites covers host options in more detail.

Shopify: duplicate or unpublished theme

Shopify's help center says: "Before you customize a theme, it's a good idea to make a backup copy so that you can discard your changes and start again if you need to." In the admin, go to Online Store, open the actions menu for your theme and choose Duplicate. The copy appears on the Themes page as "Copy Of" plus the theme name. Shopify caps a store at 20 themes, so delete old copies when you're done.

If a developer has set up Shopify CLI, Shopify's command-line tool, shopify theme push --unpublished creates a new unpublished theme and pushes the local files to it, and the command returns a preview link. The --publish and --allow-live flags target the live theme, so keep those for a person to run after review. Our Claude Code templates include a Shopify CLAUDE.md that tells Claude never to push or publish.

Keep staging out of Google

A public staging copy can end up in search results as duplicate content. Two common protections:

• Password protection. Many hosts can put a password in front of a staging site. Visitors and crawlers can't see the pages at all.
• A noindex rule. Google says noindex, set as a meta tag or an X-Robots-Tag response header, makes Google "drop that page entirely from Google Search results." The page must not be blocked by robots.txt (the file that tells crawlers which URLs to skip), or "the crawler will never see the noindex rule."

Code-based hosts help here. Vercel adds an x-robots-tag header with the value noindex to preview deployments automatically, and Netlify adds one to Deploy Previews, though Netlify still recommends password protection or a private project. On other platforms, check whether your staging copy is protected, and turn protection on if it isn't.

The opposite mistake is worse: noindex copied from staging to the live site during a deploy. Make "no page has noindex by accident" part of your release check. Our Claude Code pre-deploy checklist includes it, along with a prompt that checks for it.

Staging data and secrets

• Use separate, limited keys for staging. A staging payment or email key that can't touch real customers is safer if it leaks.
• Don't copy customer data you don't need. If the staging database must include orders or form entries, treat it as carefully as live. If your site handles health, financial or personal records, ask counsel what's allowed; this isn't legal advice.
• Keep secrets out of Claude's reach. Environment files (such as .env) hold a site's passwords and keys. Deny Claude Code read access to them with a rule such as Read(./.env) in the project's permission settings, and never paste keys into prompts.
• Don't give Claude Code live server or live database access. If Claude needs data, give it an export or a staging copy.

When you're not ready to use Claude Code yet

If your site has no version control, no staging copy and no backup you've tested, set those up before anyone runs an AI coding agent on it. That's not a knock on the tool. It's the same rule you'd apply to a new contractor: they work on a copy, and someone checks their work before it goes live.

Conclusion

A staging setup for Claude Code doesn't need to be elaborate: a local copy in git where Claude works, a private preview or staging copy where a person checks each change, search engines kept out of it, and a tested way to roll back. Pick the option your platform supports, set it up once, and every change gets a safe place to fail. If you'd like a developer to set up the repository, staging and deploy flow for your site, our Claude Code development team does that as part of website projects. More guides are in our Claude Code Guide.

Frequently asked questions