Edit your site with Claude Code

Claude Code can read your whole website project, make changes across several files and check that the site still builds. This article is for site owners and marketers who want to make bigger changes than a text edit, such as a new page type or a new section, without writing the code themselves. You will learn how to set Claude up in your project, how to ask for changes and how to check them before they go live.

Before you start

You need:

• Claude Code installed and signed in. See Install Claude Code.
• A copy of your website’s repository on your computer, with pnpm install run once. Or use Claude Code in the cloud, which works on the repository directly.
• Permission to push branches to the repository on GitHub.

Why Claude already knows the structure

Viralistic projects include a skill at .claude/skills/astro-site-architecture/SKILL.md. It describes how every Viralistic site is built: content in src/content, strict schemas, a type per page that picks the layout, one route, blocks for sections and tokens for styling. Claude Code loads it automatically when you work on the site, so it follows the same rules a Viralistic developer would.

For facts about your own business (tone of voice, which pages matter most, what never to change), add a CLAUDE.md file to the project root. See Write a CLAUDE.md.

Start a session

1. Open a terminal in your project folder.
2. Start Claude Code:

claude

3. Ask Claude to create a new branch for your change, so your work stays separate from the live site.

Ask for a change

Describe the outcome you want, where it belongs and what it should look like. A few examples that work well:

Add a new service page for brand photography at /photography/brand-photography.
Use the same page type and tone as the other photography pages.

The about page needs a section with three team members: name, role, photo.
Add it the Viralistic way: schema field, content in the markdown file, a block, wired in the layout.

Change the primary brand colour to #2f6f5e everywhere. Only change the tokens.

For larger changes, ask Claude to propose a plan first and approve it before any files change. Claude Code also has a dedicated plan mode for this.

Tip: Mention files and folders by their path when you know them, for example src/content/pages/about.md. Claude finds things faster and makes fewer assumptions.

Check the result

Ask Claude to verify its own work before you look at it:

Run pnpm check and pnpm build, fix anything that fails, then start the dev server.

1. Open the address the dev server prints (usually http://127.0.0.1:4321).
2. Click through the pages you changed, on a wide screen and a narrow one.
3. Ask Claude to show you a summary of the files it changed and why.

If something is wrong, say what you see, in plain words: “the new section has no space above it on mobile” works better than guessing at the code.

Publish through a pull request

1. Ask Claude to commit the change with a clear message, such as feat: add brand photography page.
2. Ask it to push the branch and open a pull request on GitHub.
3. Wait for the Netlify deploy preview link on the pull request and check the change there.
4. Merge the pull request. Netlify builds and publishes the live site.

Warning: Do not let Claude push directly to the main branch of a live website. A pull request with a deploy preview is your safety net, and it costs one extra minute.

Good habits

• Keep one change per session and per pull request. Small changes are easier to review and to undo.
• Ask Claude to explain anything you do not understand before you merge.
• Keep secrets such as API keys out of the chat and out of the repository. They belong in Netlify’s environment variables.
• If Claude suggests adding a new route file in src/pages for normal content, ask it to use a markdown file and a page type instead. That is how Viralistic sites stay maintainable.

Next steps

• How a Viralistic Astro site is organised
• Claude Code for non-developers
• Deploy to Netlify