# Sites by Agents > Build and launch your own website with an AI coding agent. A practical educational guide by Valid Agenda. Canonical: https://sitesbyagents.com/ The interactive book teaches five stages: brief an agent, run and refine a local project, save it in GitHub, deploy to hosting, and connect a domain. You make the decisions and keep control of your accounts and source code. ## Read and build - [Complete written guide](https://sitesbyagents.com/guide.md): All five learning stages, setup instructions and official references. - [Prompt library](https://sitesbyagents.com/prompts.md): The starter prompt and follow-up prompts. - [Webinar](https://www.youtube.com/watch?v=W12o95rBnCA): Watch the original walkthrough on YouTube. - [FAQ](https://sitesbyagents.com/faq.md): Ownership, costs, tools and support. ## Beyond the website - [About Sites by Agents](https://sitesbyagents.com/about.md): The educational project and its connection to Valid Agenda. - [Get help](https://sitesbyagents.com/get-help.md): Support when DIY feels overwhelming and fractional technology advice for the next business challenge. - [Valid Agenda](https://www.validagenda.com/): Official service information. - [Book a conversation](https://www.validagenda.com/book): Discuss scope, availability and fees directly. ## Resources - [Agent resources](https://sitesbyagents.com/agents.md) - [Source repository](https://github.com/DavesAgenda/sba-masterclass) --- # Build it yourself. Keep the ownership. > Sites by Agents is a practical learning project by Valid Agenda: build a website with an AI agent and keep control of the result. Canonical: https://sitesbyagents.com/about Publisher: [Valid Agenda](https://www.validagenda.com/) ## A useful first project This guide takes a small website from an initial brief to a local preview, a GitHub repository, hosting and a domain. The interactive book is one way to follow it; the complete written guide and prompt library are here whenever you need to look something up. You choose the purpose, judge the output and decide what to publish. An AI agent can help with implementation, but reviewing the result is still part of the work. - [Read the complete guide](https://sitesbyagents.com/guide) - [Use the prompt library](https://sitesbyagents.com/prompts) ## By Valid Agenda Valid Agenda is led by Dave Pengelley and helps business owners work out what to build next and how to move it forward. That can include fractional technology and AI advice, focused prototypes, and coordinating specialist support. Sites by Agents gives you a practical place to start. If the next challenge extends beyond a website, or you would rather have help with the build, there is a route to a conversation. - [Find the right help](https://sitesbyagents.com/get-help) - [Explore Valid Agenda](https://www.validagenda.com/) ## Use the tools that fit The examples use an AI coding agent, GitHub and Vercel. Other agents and hosts can work too. Keep your domain, accounts and repository accessible to you, and understand the services and costs you are choosing. - [Watch the webinar](https://www.youtube.com/watch?v=W12o95rBnCA) - [View this site's source](https://github.com/DavesAgenda/sba-masterclass) --- # You don’t have to work it all out alone. > Get help when a DIY website feels overwhelming, or talk to Valid Agenda about fractional technology and AI advice beyond your website. Canonical: https://sitesbyagents.com/get-help Publisher: [Valid Agenda](https://www.validagenda.com/) ## Stuck in the build? You may have a working draft but be unsure about the code, hosting or next step. Or the tutorial may have become more work than you wanted to take on. Bring the goal, what you have tried, and the point where progress stopped to a conversation with Valid Agenda. - Work out what needs fixing before you publish. - Decide what to keep doing yourself and where help would be useful. - Discuss a focused piece of support or a more guided build. - [Talk through your website](https://www.validagenda.com/book) ## The website is live. What comes next? A website can bring larger questions into focus: how enquiries reach your team, which tools should connect, where automation would help, or what a new service needs to become viable. Fractional technology advice gives you experienced input for those decisions without starting with a full-time executive hire. - Choose the technology work that supports your business priorities. - Assess AI and automation opportunities against a real workflow. - Scope a prototype or next product before committing to a larger build. - Choose suitable tools, delivery partners and ownership arrangements. ## Start with a conversation Tell Valid Agenda what you want to achieve, what is already in place and where you need support. Discuss scope, availability and fees directly before agreeing to any work. Using this educational site does not sign you up for a service. - [Book a conversation with Valid Agenda](https://www.validagenda.com/book) - [Learn about Valid Agenda](https://www.validagenda.com/) ## A little preparation helps Share context, not passwords or API keys. Access arrangements can be discussed if work is agreed. - Your website or local preview, if you have one. - The outcome you want and the main obstacle. - Your preferred timing and an indication of budget. - A short description of the tools your business already uses. --- # The complete website-building guide. > A readable, step-by-step guide to briefing an AI agent, testing locally, using GitHub, deploying and connecting your domain. Canonical: https://sitesbyagents.com/guide Publisher: [Valid Agenda](https://www.validagenda.com/) ## 01. Start with a clear brief. Give your agent enough context to build something useful. You’ll need: A coding agent, a project folder and an idea. Be specific about what visitors should be able to do. ‘A one-page site for a local architect, with three projects and an email link’ gives the agent more direction than ‘make a modern website’. Review the proposed scope and keep the first version small. - Open your coding agent in an empty project folder. Codex, Claude Code or another capable agent can work. - Describe the purpose, audience, content and visual direction. Add a reference if you have one. - Adapt the starter prompt below. Ask the agent to create the files and explain how to preview the result. - [Copy the starter prompt](https://sitesbyagents.com/prompts) ## 02. Run it. Look at it. Refine it. Turn the first draft into a site you are happy to share. You’ll need: Your project folder, Node.js and a terminal. Try ‘Make the heading smaller’, ‘Reduce the spacing between these sections’, or ‘Stack this layout on mobile’. Make one clear request at a time and check it. If a command fails, share the full error with your agent instead of guessing at a fix. - Install a current Node.js LTS release if it is not already available. Open a terminal in the project folder. - Run the commands below, then open the local address printed in the terminal. Keep the terminal running while you work. - Review the copy, links and layout at desktop and mobile sizes. Tell the agent what to change, then check the result. - Before publishing, ask the agent to run the production build and fix errors. Run the project’s lint command too, if configured. ```text npm install npm run dev ``` - [Get Node.js](https://nodejs.org/en/download) ## 03. Give your code a home. Save a version of your site outside your computer. You’ll need: A GitHub account and Git or GitHub Desktop. The repository holds the project. A commit records a set of changes locally, with a message describing them. A push sends those commits to GitHub. Commit and push after meaningful updates so you have a history to return to. A private repository can still be connected to Vercel. - Create an empty repository on GitHub. A repository is the project’s home: its files and change history. - Ask your agent to initialise Git and review which files will be included. Exclude passwords, .env files, node_modules and build output. - Make a commit: a named snapshot of your changes. Connect the local project to your new GitHub repository. - Push the commit to GitHub, then open the repository online and check that your source files are there. Your agent may be able to run these steps with your permission. ```text Local project → commit → push → GitHub ``` - [GitHub’s publishing guide](https://docs.github.com/en/repositories/creating-and-managing-repositories/adding-locally-hosted-code-to-github) ## 04. Put your site on the internet. Make the website available to visitors. You’ll need: Your GitHub repository and a Vercel account. Once GitHub and Vercel are connected, a push to the production branch can automatically build and publish the next version. Other branches can get preview links so you can review changes before they reach the main site. - Sign in to Vercel. Choose Add New → Project, connect GitHub and grant access to the repository you want to deploy. - Import the repository. Check that Vercel detects Next.js and that the root directory contains package.json. Keep the default build settings for this simple site. - Select Deploy. If the build fails, copy the relevant build log into your agent and fix the source, then commit and push again. - Open the supplied .vercel.app address. Test navigation, mobile layout and video playback on the deployed site. - [How Vercel Git deployments work](https://vercel.com/docs/deployments/git) ## 05. Make the address your own. Let people find your website at an address you own. You’ll need: A registered domain and access to its DNS settings. DNS changes need time to reach different networks. Use Vercel’s domain status to check progress. If verification fails, confirm which provider actually manages your nameservers and compare every record with Vercel’s instructions. Use the values shown for your project; do not copy a random IP address from an old guide. - Buy a domain from a registrar, or use one you already own. In Vercel, open your project’s Settings → Domains and add it. - Vercel will show the DNS records it needs. At the provider managing your DNS, copy the exact record types, names and values it gives you. - Keep unrelated records, especially those for email. If you want both the root domain and www, add both in Vercel and choose the primary address. - Wait for DNS verification and HTTPS to complete, then visit the domain. Update your site’s canonical domain configuration and redeploy if it has changed. - [Vercel’s domain setup guide](https://vercel.com/docs/domains/working-with-domains/add-a-domain) ## Keep moving at your own pace The book and webinar cover the same learning path. Keep checking the actual result as you build. If you would like support with the next step, speak with Valid Agenda. - [Watch the webinar](https://www.youtube.com/watch?v=W12o95rBnCA) - [Get help](https://sitesbyagents.com/get-help) --- # Give your agent a useful starting point. > Copyable website-building prompts for your first brief, mobile layout, visual refinement and checks before deployment. Canonical: https://sitesbyagents.com/prompts Publisher: [Valid Agenda](https://www.validagenda.com/) ## Your first website Replace the bracketed text with your own purpose, audience and content. Start small, check the preview, and make one clear change at a time. ```text Build a small website using Next.js, TypeScript and Tailwind CSS. The site should: - Purpose: [what the website should do] - Audience: [who it is for] - Visual direction: [colours, typography and references] - Sections: [the content visitors need] Keep the architecture simple. Use reusable components. Do not add a database, authentication or backend unless required. Use accessible HTML and responsive layouts. The project should run with npm run dev, pass linting and npm run build, and be deployable to Vercel. Explain how to preview it and which files I can edit. ``` ## Improve the mobile layout Give the small screen the same care. ```text Review this page at mobile widths and fix any overflow, cramped spacing or layouts that should stack vertically. Check tap targets and code blocks. Preserve the desktop design. ``` ## Make the design less generic More intention. Less decoration. ```text Review the visual design for generic AI/SaaS patterns. Remove unnecessary gradients, decorative cards and visual clutter. Use stronger typography, spacing and a more deliberate visual hierarchy instead. ``` ## Check before deployment Turn a working draft into a site you can publish. ```text Prepare this project for production deployment. Run linting and the production build. Fix any errors. Check for broken links, console errors, obvious accessibility problems and mobile overflow. Do not make unrelated design changes. Summarise what you tested and any remaining issues. ``` ## When another prompt isn’t the answer If the scope keeps growing or you cannot tell whether the result is ready, a conversation may be more useful than another iteration. - [Talk through the next step](https://sitesbyagents.com/get-help) --- # Before you build. After you launch. > Answers about AI agents, website ownership, hosting costs and when to ask Valid Agenda for help. Canonical: https://sitesbyagents.com/faq Publisher: [Valid Agenda](https://www.validagenda.com/) ## Do I need to know how to code? You can start by describing the site in ordinary language. You will still need to follow setup instructions, review changes and test the result. The written guide gives you a sequence to follow. ## Which agent and hosting platform should I use? Use a coding agent that can work with your project files and explain its changes. The guide uses GitHub and Vercel as examples. Check the current capabilities, pricing and terms of any tool you choose; the site does not require one particular provider. ## Who owns the website? Create and control your repository, hosting account and domain account. Keep copies of your source and content. Check the licences of third-party code, images and fonts you use; owning the project does not transfer those third-party rights. ## Is everything free? This guide and its prompts are free to read. Agents, domains, hosting and other services may charge fees. Check the plans you use and any limits that apply. Advice or delivery work with Valid Agenda is discussed and agreed separately. ## What if I feel overwhelmed or the build stops working? Save your working version and describe the specific issue to your agent. If you want someone to help assess the situation or take a more active role, speak to Valid Agenda about the support you need. - [Get help with your build](https://sitesbyagents.com/get-help) ## Can Valid Agenda advise on more than websites? Yes. Discuss the wider technology decisions behind your business: AI opportunities, workflows, prototypes, tools and delivery priorities. Fractional advice can help shape the next step beyond the website. - [Explore fractional technology advice](https://sitesbyagents.com/get-help) --- # Read the site in the format you need. > Machine-readable resources for Sites by Agents, including llms.txt, complete Markdown content and canonical source links. Canonical: https://sitesbyagents.com/agents Publisher: [Valid Agenda](https://www.validagenda.com/) ## Start here The same guide, prompts and information pages are available as server-rendered HTML and Markdown. No account, browser automation or page-turn interaction is needed to read them. - [llms.txt — concise content index](https://sitesbyagents.com/llms.txt) - [llms-full.txt — complete content bundle](https://sitesbyagents.com/llms-full.txt) - [Home page as Markdown](https://sitesbyagents.com/index.md) ## Find the original page Each information page links to its Markdown version. HTML metadata and HTTP Link headers advertise the alternate format and llms.txt. Markdown responses link back to their canonical HTML page. The sitemap lists the public HTML pages. - [XML sitemap](https://sitesbyagents.com/sitemap.xml) - [Crawler access rules](https://sitesbyagents.com/robots.txt) ## Scope and attribution This is an educational website by Valid Agenda. These resources describe public content; they do not provide an API for booking, purchases or site management. Follow the official Valid Agenda links for advice and current service details. A visitor must choose to make contact themselves. Please link to the canonical source when referencing the guide. llms.txt is a discovery convention, not a guarantee that any particular search engine or model will use the content.