# How to build a website with Claude Code and publish it to your own domain Add PageHub to Claude Code with one command, then describe the site you want. Claude Code builds it, checks it with screenshots, and puts it on your domain. You end up with a real site that anyone can edit visually, not a repo you still have to host. **What you need:** Claude Code, a free PageHub account, and a domain if you want one. Without a domain, the site publishes to a pagehub.dev subdomain. ## How it works PageHub runs an MCP server, which is a set of tools an AI agent can call. Claude Code supports remote MCP servers over HTTP with OAuth sign-in, so once you add PageHub, Claude Code can call tools like `create_site`, `set_theme`, `screenshot_site`, and `publish_site` for you. The site lives in PageHub, not in your project folder. PageHub also sends its own build rules to Claude Code when it connects, so you don't paste any instructions. ## Step 1: Create a free PageHub account Go to pagehub.dev/signin and enter your email. You'll get a magic link and a 6-digit code. Use either one to sign in. The free plan has no credit card and no time limit. It includes 1 published site, 20 pages per site, and hosting with SSL, and you can connect 1 domain you own. Connecting Claude Code works on every plan. ## Step 2: Add the PageHub MCP server to Claude Code Run this in your terminal: ```bash claude mcp add --transport http --scope user PageHub https://pagehub.dev/api/mcp ``` `--scope user` makes PageHub available in every project. Leave it off and PageHub is added to the current project only. Use `--scope project` instead to write it to `.mcp.json` at the project root, so everyone on the repo gets it. Now sign in. Start Claude Code, type `/mcp`, and pick PageHub. A PageHub page opens in your browser. Sign in with your email, then click **Approve** on the Authorize PageHub screen. There's no API key to paste. To check it worked, run `claude mcp list`. PageHub should say **Connected**. Then ask Claude Code: "List my PageHub sites." Claude Code asks before it runs each PageHub tool. You can allow a tool once, or tell it not to ask again for that tool. ## Step 3: Prompt Claude Code to build the site Start Claude Code in a terminal, or in VS Code, and describe the site. Say who it's for, which pages you want, and what visitors should do. Real details (hours, prices, your email) beat placeholders. Swap the bracketed parts in these prompts for your own. A local business site: ```text Use PageHub to build a website for [business name], a [type of business] in [city]. Pages: Home, Services (with prices), and Contact. Hours: [days and times]. Address: [address]. Phone: [phone]. Add a contact form that asks for name, email, and what they need. Keep the look [warm and simple / bold / minimal]. Screenshot it on desktop and mobile before you tell me it's done. Don't publish yet. ``` A portfolio: ```text Use PageHub to create a portfolio site for me. I'm a [job title] in [city]. Home page: a short intro, then a grid of 6 projects, each with a title, a one-line summary, and an image. Add an About page and a contact section with my email, [you@example.com]. Clean layout with lots of white space. Use stock photos for now and I'll swap in my own. Show me screenshots before publishing. ``` A landing page for a side project: ```text Use PageHub to make a one-page site for my side project, [name]: [one sentence on what it does]. Sections: a hero with an email sign-up form, 3 features, a short FAQ, and a footer. Suggest 3 color palettes and let me pick one before you build. When it's built, run an SEO check and fix what it finds. Don't publish until I say so. ``` From there, Claude Code looks up PageHub's templates and section blocks, creates the site with `create_site`, sets colors and fonts with `set_theme`, adds sections, and finds stock photos with `find_image`. Then it checks its work with `screenshot_site`. ## Step 4: Review the draft and edit it yourself Everything Claude Code builds lands in a draft. Nobody else sees it until you publish. Ask for screenshots at any point. `screenshot_site` takes a real browser screenshot of the draft, one section at a time if you like, and at phone width (390 pixels). Claude reads the screenshots itself and fixes what it sees. To look for yourself, open the site in your PageHub dashboard. To edit by hand, open your PageHub dashboard, pick the site, and click **Design**. That opens the visual editor. Drag sections around, change colors and fonts, and rewrite text. Claude Code reads the same draft, so it sees your edits the next time you ask for changes. Before you publish, ask Claude Code to run `audit_seo` and `audit_accessibility` and fix what they find. ## Step 5: Publish and connect your domain Ask Claude Code: "Connect [example.com] to this site and tell me the DNS records to add." It calls `set_domain`, which attaches the domain and returns the records. Add them where you bought the domain: - The bare domain (example.com) gets an **A** record at `@`. - A subdomain such as `www` gets a **CNAME** record. - Sometimes there's also a **TXT** record, to prove you own the domain. Copy each value exactly as Claude Code gives it to you. The values are specific to your site, so a value from another guide won't work. PageHub sets up both example.com and www.example.com, and by default sends www visitors to the bare domain. SSL certificates are issued automatically and can take a few minutes once DNS is in place. Then ask: "Is my domain working yet?" Claude Code checks with `get_domain_status`. Connecting a domain doesn't publish the site, so finish with: "Publish the site." That calls `publish_site`, and the site is live. Rather click? The Domains page for your site in the PageHub dashboard shows the same records. ## Step 6: Make changes later You have two ways in, and both edit the same draft. - **From Claude Code:** ask, for example, "In my PageHub site [name], add a reviews section under Services." Check the screenshot, then say "publish." - **From the editor:** open the site, click **Design**, make your changes, and publish. If a change goes wrong, the site's History page lets you restore an earlier version of the whole site or one page. The free plan keeps 15 versions. ## Other ways to ship from Claude Code PageHub is one way to publish a website from Claude Code. You can also have Claude Code write the site as code in your project, then deploy the code yourself. That's how most people deploy a website from Claude Code today. - **Vercel or Netlify:** connect your Git repository, and each push builds and deploys the site. You add your domain in their dashboard and set DNS at your registrar. A good fit when the site is really an app with its own code. - **GitHub Pages:** serves static files straight from a repository. A good fit for simple static sites and project docs. The tradeoff: you own every line and can build anything. You also handle Git, builds, and DNS yourself, and every text change is a code change. Someone who doesn't use Claude Code can't easily update it. PageHub fits when you want a site that people can edit visually. It isn't the right tool for custom app logic. ## Troubleshooting ### PageHub doesn't connect Run `claude mcp list` and read PageHub's status: - **Needs authentication:** start Claude Code, type `/mcp`, pick PageHub, and sign in. - **Failed to connect:** run `claude mcp get PageHub` and check the URL is exactly `https://pagehub.dev/api/mcp`. - **Not listed:** you probably added it without `--scope user` from a different folder. Run the add command again with it. ### Sign-in doesn't finish In the browser window, sign in with the email link or the 6-digit code, then click **Approve**. If the code has expired, request a new one. If the browser sign-in still won't complete, use an API key instead. Create one at pagehub.dev/dashboard/api-key, then replace the server with one that sends it: ```bash claude mcp remove PageHub claude mcp add --transport http --scope user PageHub https://pagehub.dev/api/mcp \ --header "Authorization: Bearer ph_your_key_here" ``` ### Claude Code says a tool isn't available Servers load when a session starts. If you added PageHub while Claude Code was running, quit and start it again. Type `/mcp` to see PageHub's tools. If you see a rate-limit error, wait a minute. The server allows 120 requests per minute for each sign-in. ### The domain isn't working - Compare each record at your registrar with what Claude Code gave you, character for character. A wrong value fails the same way slow DNS does. - The bare domain needs an A record. It can't be a CNAME. - If Claude Code gave you a TXT record, add it as well as the others. - DNS changes can take a while to spread. Ask Claude Code to check the domain again later. - If the domain is already attached to another Vercel project, remove it there first, then ask Claude Code to try again. - Each site takes 1 domain, plus its www version. Want the full tool list and other clients? See the MCP server docs at pagehub.dev/developers/mcp, or compare plans at pagehub.dev/pricing. ## FAQ ### Can Claude Code host a website? No. Claude Code writes and runs code on your computer, so the site has to be hosted somewhere else. In this guide PageHub hosts it, with SSL included. If you have Claude Code write the site as code instead, you deploy that code to a host such as Vercel, Netlify, or GitHub Pages. ### Is it free? PageHub's free plan costs $0 with no credit card and no time limit. It includes 1 published site, 20 pages per site, and hosting with SSL, and you can connect 1 domain you own. Pro is $7 a month per site ($5 billed annually) and raises the limit to 300 pages. You buy the domain itself from a registrar. ### Do I need to know how to code? No. You describe the site in plain words, and Claude Code calls PageHub's tools to build it. No code files are written to your project. The technical steps are one terminal command and adding DNS records at your domain registrar, and Claude Code tells you exactly which records to add. ### Does this put any files in my repo? No, unless you choose --scope project, which writes a .mcp.json file to the project root so your team shares the setup. With --scope user the setup lives in your home folder. The site itself is stored in PageHub. You can export it as static HTML on any plan. ### Can someone who doesn't use Claude Code edit the site? Yes. Every PageHub site opens in a visual editor where you drag sections, change colors and fonts, and rewrite text. Claude Code reads the same draft, so it sees those edits the next time you ask for changes. You can invite 1 teammate per site on Free, and unlimited on Pro and up. ### Can I use the Claude app instead of Claude Code? Yes. In Claude on the web or desktop, add PageHub as a custom connector with the URL https://pagehub.dev/api/mcp and sign in. The website builder for Claude page walks through it. A site you start in one, you can keep editing in the other. ### Is it safe to let Claude Code edit my site? Every change Claude Code makes goes to a private draft, and visitors keep seeing the published version until someone publishes. Claude Code also asks before it runs each PageHub tool unless you allow it. If a change goes wrong, restore an earlier version from the site's History page. ### Are sites built this way good for SEO? PageHub renders pages to HTML on the server, and each custom domain gets its own sitemap.xml and robots.txt. Ask Claude Code to run audit_seo, which checks titles, descriptions, headings, image alt text, and link text, then fix what it finds. --- Claude and Claude Code are trademarks of Anthropic, PBC. PageHub isn't affiliated with or endorsed by Anthropic.