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. VS Code 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 button. Your browser hands off to VS Code, which asks you to install PageHub.
Install in VS CodeTo 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.jsonin a project, for that project only- Your user
mcp.json, for every project. Run MCP: Open User Configuration to open it.
Add this:
{
"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
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
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
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
wwwgets 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.
{
"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 or compare plans.
Frequently Asked Questions
Short answers about building and hosting a site from VS Code.
Build your first site from VS Code
Make a free account, add PageHub to VS Code, and ask Copilot for the site.
Visual Studio Code and GitHub Copilot are trademarks of Microsoft Corporation and GitHub, Inc. PageHub isn't affiliated with or endorsed by either.