{"slug": "i-built-and-published-a-small-business-website-with-claude-code-the-exact", "title": "I built and published a small business website with Claude Code: the exact workflow", "summary": "A developer published a step-by-step workflow for building and deploying a small business website using Claude Code in the Claude desktop app, taking users from an empty folder to a live, version-controlled site on Vercel without hand-writing code. The guide emphasizes scoping the project folder, writing specific prompts, testing the local preview as a visitor would, making one change per message, and using GitHub for version history before deploying. The developer notes the result is a marketing site only, with booking, payments, email notifications and client login left as separate future projects.", "body_md": "You can build a small business website without writing code by hand. You still have to make decisions and check the result yourself. This is the workflow I use with Claude Code in the Claude desktop app. It takes you from an empty folder to a live site on Vercel. I've written it for people who have never coded.\n\nCreate an empty folder with a plain name, for example `anna-first-site`. Every file for the site will live there.\n\nOpen the desktop app, sign in and go to the **Code** tab. Choose that folder as the project. Before you build anything, ask:\n\nWhich folder are you working in?\n\nIf Claude names a different folder, stop and fix that first. A wrong folder is the most common way beginners lose work or mix two projects together.\n\nA vague prompt like \"make me a website\" gets you a generic page. A good first prompt says what the business is, which sections the page needs, what it should look like, what one button must do, and what Claude must *not* do. Here is the kind of prompt I start with, using a fictional photographer:\n\nIn this empty project folder, build a responsive Next.js website for Anna, a fictional family photographer. Include an opening section, services, three stages of a session and contacts. Use a dark graphite background, warm light text and a copper accent. The \"Discuss a session\" button must scroll to the contact section. Label sample content; do not invent reviews or contact details. Keep it local, with no accounts or payments. Explain any missing setup simply, then start the preview and give me its exact address.\n\nThese lines do most of the work:\n\nLet Claude finish. If it asks you to install something or approve a step, read what it says before you agree.\n\nClaude starts a local preview, usually an address like `http://localhost:3000`, and you can open it in the app's Browser pane. A localhost address only works on the computer running the project. You can't send it to anyone yet.\n\nTest it the way a visitor would:\n\nOnly call it done when it passes these checks. \"Claude said it works\" isn't a check.\n\nAsk for one specific change per message:\n\nMake the main heading shorter and keep the \"Discuss a session\" button working.\n\nThen check that change yourself. Asking for one change at a time makes it obvious which change broke something, if anything does.\n\nWhen something does break, give Claude a proper bug report, not just \"it's broken\":\n\nI opened [http://localhost:3000](http://localhost:3000), clicked \"Discuss a session\", expected to land on Contacts, but nothing happened.\n\nNext time, keep working in the same project folder. Don't start over in a new one.\n\nWhile the site lives only in a folder, you have no history and no backup. GitHub fixes both. Create a free account, then ask Claude in the same project:\n\nPut this project on GitHub as a new private repository. Explain each step before you do it, and tell me what I need to approve.\n\nAfter that, make each change on purpose and save it with a clear description, for example \"Shorten hero heading\". If a later change goes wrong, you can go back to a version you know was good. That's the main reason to use GitHub in the first place.\n\nSign in to Vercel with your GitHub account. Import the repository and keep the defaults Vercel detects for a Next.js project, then deploy. You get a public `*.vercel.app` address.\n\nNow test the hosted site like a stranger would, on your phone too. Run the Step 3 checks again on the public address. From now on, each change you save to GitHub creates a new deployment. Look at it before you call it released.\n\nAdding your own domain comes later. You set it up in Vercel's domain settings once the site is in a state you're happy with.\n\nAt the end of this, you have a working, published, version-controlled marketing site. You don't yet have online booking, payments, email notifications or a client login. Each of those is a separate project with its own setup and its own ways to go wrong. Get the simple site live first.\n\nI've turned this workflow into a written course, *Build & Launch Your First Website with Claude*: 16 practical lessons in English and Russian. It covers the steps above in more detail and then adds sign-in and a private client area with Supabase. The first lesson is free to read at [https://g-lab.agency/learn/welcome](https://g-lab.agency/learn/welcome). The full course is $19, one-time: [https://g-lab.agency/courses/build-with-claude](https://g-lab.agency/courses/build-with-claude).", "url": "https://wpnews.pro/news/i-built-and-published-a-small-business-website-with-claude-code-the-exact", "canonical_source": "https://dev.to/__9ca22bc8f/i-built-and-published-a-small-business-website-with-claude-code-the-exact-workflow-1ene", "published_at": "2026-11-01 07:36:14+00:00", "updated_at": "2026-11-01 07:52:09.848845+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "generative-ai", "developer-tools"], "entities": ["Claude Code", "Anthropic", "Vercel", "GitHub", "Next.js"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-and-published-a-small-business-website-with-claude-code-the-exact", "markdown": "https://wpnews.pro/news/i-built-and-published-a-small-business-website-with-claude-code-the-exact.md", "text": "https://wpnews.pro/news/i-built-and-published-a-small-business-website-with-claude-code-the-exact.txt", "jsonld": "https://wpnews.pro/news/i-built-and-published-a-small-business-website-with-claude-code-the-exact.jsonld"}}