Back to home

Edit the Website: Make Changes

Update pages, add classes, change copy, add blog posts, modify images—all without coding. Use Claude Code to edit HTML files directly, then deploy with one command. Every change goes live in seconds.

File Structure and Locations

Your website source code lives locally on your Mac. Here is the directory structure:

/Volumes/T7 Shield/DK-Mac/projects/yoglove/ index.html ← Homepage about.html ← About page classes.html ← Classes listing page retreats.html ← Retreats overview page blog.html ← Blog listing page /css/ main.css ← Primary stylesheet responsive.css ← Mobile styles /js/ intro.js ← Opening animation main.js ← Interactive features /assets/ logo.svg ← Yog Love logo hero-image.jpg ← Homepage hero image (more images) ← Retreat photos, testimonial images /functions/ contact-form.js ← Contact form handler (serverless) _headers ← Caching rules wrangler.toml ← Cloudflare Pages config

The Complete Edit Workflow

1

Open Project in Claude Code

Launch Claude Code application on your Mac.

Once open, click "File" in the top menu bar.

Select "Open Folder" from the dropdown.

2

Navigate to Project Folder

A file picker appears. You need to navigate to your project directory:

Navigate to: /Volumes/T7 Shield/DK-Mac/projects/yoglove

Step-by-step:

  • Click on "Volumes" in the left sidebar (or at the top of the path bar)
  • Find and double-click "T7 Shield" folder
  • Double-click "DK-Mac" folder
  • Double-click "projects" folder
  • Double-click "yoglove" folder
  • You should now see index.html, about.html, css/ folder, js/ folder, etc. inside

Click the blue "Open" button to load the project into Claude Code.

3

Wait for Project to Load

Claude Code scans the project files. After 10-20 seconds, you see the full file tree in the left panel. All your HTML, CSS, and image files are now visible.

4

Open Claude Code Chat

At the bottom-right of Claude Code, find the chat icon (looks like a speech bubble). Click it to open the Claude Code chat panel.

A chat window appears at the bottom. This is where you'll describe changes in plain English, and Claude will edit your files for you.

Make Your First Change: Add a New Class

1

Describe the Change in Chat

In the Claude Code chat (bottom), type exactly this:

Type this message: Add a new class to the classes page. Class name: "Vinyasa Flow for Strength", date: August 10, time: 6:00 to 7:00 PM IST, instructor: Ira Trivedi, link: https://www.yoglove.in/event-details/vinyasa-flow-strength. Add it to the classes list with the same style as existing classes.

Press Enter or click Send to submit your request to Claude.

2

Claude Reads Your Files and Responds

Claude reads your classes.html file, understands the structure, and sends you a response showing exactly what it will change.

Claude shows you:

  • The exact file it's editing (classes.html)
  • The original code (old HTML)
  • The new code with your class added (new HTML)

Review the change carefully. Make sure the new class looks right and is in the correct place.

3

Accept and Apply the Change

If the change looks correct, click the "Accept" button (usually shown near Claude's response in the chat).

Claude now saves the change to classes.html on your Mac. The file is updated locally.

4

Open Terminal and Deploy

Your change is saved locally, but not live yet. You need to deploy it to Cloudflare Pages. Open Terminal on your Mac.

You can also open Terminal from inside Claude Code: look for "Terminal" in the top menu, then select "New Terminal".

5

Navigate to Project Directory in Terminal

In Terminal, type this command exactly (copy-paste to avoid typos):

Terminal command: cd /Volumes/T7\ Shield/DK-Mac/projects/yoglove

Press Enter. Your terminal is now inside the yoglove project folder (you should see the path change in your terminal prompt).

6

Deploy to Cloudflare Pages

Type this command:

Terminal command: wrangler pages deploy .

Press Enter. Wrangler uploads all your files (including your edited classes.html) to Cloudflare Pages.

Wait 30-60 seconds for the deploy to complete. You should see "Deployment complete" or similar message.

7

Verify Changes Live

Open your browser and go to https://www.yoglove.in/classes

Press Ctrl+Shift+R (or Cmd+Shift+R on Mac) to do a hard refresh and bypass cache.

Your new "Vinyasa Flow for Strength" class should now appear in the class list on the page.

Success! Your change is live on www.yoglove.in and visible to everyone.

Common Changes and Exact Prompts to Use

Change 1: Update Homepage Copy

Use this prompt in Claude Code chat:

Update the hero title on index.html from "Yoga for Everyone" to "Transform Your Body and Mind with Yoga". Keep everything else the same.

After Claude confirms, accept and deploy using the terminal commands from STEP 5-6.

Change 2: Add a Blog Post

Create a new blog post page called "blog-post-detox-yoga.html". Title: "Detox Yoga: 5 Poses for Better Health". Author: Ira Trivedi. Date: July 31, 2026. Include 3-4 paragraphs about detox benefits and yoga poses. Add a link back to blog.html at the top. Save in the root folder.

Change 3: Update Retreat Image

I'm replacing the retreat hero image (currently "assets/retreat-hero.jpg") with a new file. After I upload the new image to /assets/new-retreat-hero.jpg, update the img src in retreats.html from "retreat-hero.jpg" to "new-retreat-hero.jpg". Change only the src attribute, leave alt text and CSS classes the same.

Change 4: Add a Testimonial

Add a new testimonial to index.html testimonials section. Name: Sarah Johnson. Quote: "This yoga practice changed my life. I feel stronger, more peaceful, and more connected than ever before." Star rating: 5 stars. Add it as a card matching the style of existing testimonials.

Important Notes and Tips

Deployments take 30-60 seconds. After you run `wrangler pages deploy .`, Cloudflare uploads files and caches them. Your change is live once you see the "Deployment complete" message.
Hard refresh in browser (Cmd+Shift+R on Mac). Browser cache can show old versions. Always hard refresh to see your latest changes.
Rollback available. If something breaks, go to Cloudflare dashboard (dash.cloudflare.com). Pages section shows all past deployments. You can revert to a previous version with one click.
Claude Code helps with syntax. If you're unsure about HTML syntax, just ask in chat: "How do I add an image tag?" Claude will guide you or fix the syntax.

Cloudflare Dashboard (for deploy history and rollback)