# How to build a website with VS Code and Copilot, and publish it to your own domain Connect PageHub to VS Code once, then describe the site you want in Copilot Chat. Copilot builds it, screenshots it for you to check, and puts it on your domain. You end up with a real site that anyone can edit visually, not a folder of code you still have to host. **What you need:** VS Code with GitHub Copilot, a free PageHub account, and a domain if you want one. Without a domain, the site publishes to a pagehub.dev subdomain. On a Copilot Business or Enterprise plan, your admin may need to allow MCP servers first. ## How it works PageHub runs an MCP server, which is a set of tools an AI agent can call. Copilot supports remote MCP servers over HTTP with OAuth sign-in, so once you add PageHub, Copilot 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 Copilot 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 VS Code works on every plan. ## Step 2: Add the PageHub MCP server to VS Code The quick way: click the Install in VS Code button on this page. Your browser hands off to VS Code, which asks you to install PageHub. To add it by hand instead, run **MCP: Add Server** from the Command Palette, or edit the config file yourself. It lives in one of two places: - `.vscode/mcp.json` in a project, for that project only - Your user `mcp.json`, for every project. Run **MCP: Open User Configuration** to open it. Add this: ```json { "servers": { "PageHub": { "type": "http", "url": "https://pagehub.dev/api/mcp" } } } ``` VS Code's file uses `servers` and `"type": "http"`, not the `mcpServers` shape other apps use. Save it, then click **Start** above the PageHub entry. The first time it starts, VS Code asks whether you trust the server. Then it asks to sign you in, and 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, open Copilot Chat, switch to **Agent** mode, and click **Configure Tools**. PageHub's tools should be listed. Then ask: "List my PageHub sites." Copilot asks before it runs a PageHub tool, so you can see what it's about to do. ## Step 3: Prompt Copilot to build the site Open Copilot Chat, switch to Agent mode, 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, Copilot 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 Copilot 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). Copilot shows the screenshots in the chat and can check them itself. 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. Copilot reads the same draft, so it sees your edits the next time you ask for changes. Before you publish, ask Copilot to run `audit_seo` and `audit_accessibility` and fix what they find. ## Step 5: Publish and connect your domain Ask Copilot: "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 Copilot 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?" Copilot 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 Copilot:** 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 VS Code PageHub is one way to publish a website from VS Code. You can also have Copilot write the site as code in your project, then deploy the code yourself. That's how most people deploy a website from VS 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 VS 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 show up in VS Code Run **MCP: List Servers** from the Command Palette and pick PageHub. If it isn't running, choose **Start Server**. To see why it failed, choose **Show Output**. Not listed at all? Check the file is `.vscode/mcp.json` or your user config, and that it uses `servers`, not `mcpServers`. A missing comma or bracket breaks the whole file. ### 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 and use the config below. VS Code asks for the key once and stores it for you, so it never sits in the file. ```json { "inputs": [ { "type": "promptString", "id": "pagehub-key", "description": "PageHub API key", "password": true } ], "servers": { "PageHub": { "type": "http", "url": "https://pagehub.dev/api/mcp", "headers": { "Authorization": "Bearer ${input:pagehub-key}" } } } } ``` ### Copilot doesn't use the PageHub tools Check the chat is in **Agent** mode. Then click **Configure Tools** and make sure PageHub's tools are switched on. 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 Copilot 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 Copilot gave you a TXT record, add it as well as the others. - DNS changes can take a while to spread. Ask Copilot to check the domain again later. - If the domain is already attached to another Vercel project, remove it there first, then ask Copilot 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 VS Code host a website? No. VS Code is a code editor, so the site has to be hosted somewhere else. In this guide PageHub hosts it, with SSL included. If you have Copilot 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. Copilot is a separate GitHub subscription. ### Do I need to know how to code? No. You describe the site in Copilot Chat, and Copilot calls PageHub's tools to build it. No code files are written to your project. The one technical step is adding DNS records at your domain registrar, and Copilot tells you exactly which records to add. ### Does this put any files in my project? Only the MCP config file, and only if you use the project-level .vscode/mcp.json. Use your user configuration and your project stays untouched. The site itself is stored in PageHub. You can export it as static HTML on any plan. ### Can someone who doesn't use VS Code edit the site? Yes. Every PageHub site opens in a visual editor where you drag sections, change colors and fonts, and rewrite text. Copilot 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 Claude Code or Cursor instead? Yes. It's the same server at the same URL, and there are step-by-step guides for both. A site you start in one, you can keep editing in another. ### Is it safe to let Copilot edit my site? Every change Copilot makes goes to a private draft, and visitors keep seeing the published version until someone publishes. Copilot also asks before it runs a PageHub tool. 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 Copilot to run audit_seo, which checks titles, descriptions, headings, image alt text, and link text, then fix what it finds. --- Visual Studio Code and GitHub Copilot are trademarks of Microsoft Corporation and GitHub, Inc. PageHub isn't affiliated with or endorsed by either.