Not long ago, building and deploying a polished website required juggling a designer, a developer, a DevOps engineer, a domain registrar, and a hosting provider — all while somehow maintaining a coherent vision across all of them. Today, the same outcome can be achieved by one person with a laptop, a few free accounts, and an AI pair-programmer named Claude.
This is the story of exactly how we built MarrSynth — our personal AI projects site — from scratch to a live, auto-deploying production URL. The process was faster and more collaborative than any traditional web project we've been involved with, and it required almost no manual coding.
The best part? It was easy. Genuinely, surprisingly easy.
TL;DR — The Short Version
If you just want the recipe before diving into the details:
- Claude Code (inside VS Code) built and iterated on the site.
- ChatGPT helped clarify business intent and informed further changes.
- GitHub holds the source code and acts as the deployment trigger.
- Render.com hosts the site and auto-deploys on every GitHub push.
- Namecheap provided the domain name, connected to Render.
- Free tier accounts everywhere — except the domain name itself (~$10–15/year).
Every change we make locally in VS Code gets pushed to GitHub with a simple Claude Code instruction, and Render automatically serves the updated version within minutes. No FTP. No manual builds. No deployment scripts to maintain.
The Toolchain at a Glance
Before walking through each step, here's a quick orientation to every tool involved and the role it plays:
| Tool | Role | Cost |
|---|---|---|
| Visual Studio Code | Code editor and local development environment | Free |
| Claude Code (Anthropic) | AI pair-programmer — writes, edits, and deploys code | Subscription / API usage |
| ChatGPT (OpenAI) | Business strategy and content direction discussions | Free / Subscription |
| GitHub | Version control and configuration management | Free |
| Render.com | Static site hosting, auto-deploy from GitHub | Free tier (dev) → Starter $7/mo (production) |
| Namecheap | Domain name registration and DNS management | ~$10–15/yr for domain |
Each of these tools is excellent on its own. Connected together, they form a lightweight, modern deployment pipeline that rivals what engineering teams spend significant effort building and maintaining.
Step 1: Building the Site with Claude Code in VS Code
The starting point for the entire project was a YouTube video that changed how we thought about AI-assisted web development:
The title is not clickbait. Watching that video demonstrated something we had to see to believe: Claude Code, running inside Visual Studio Code, can take a plain-language description of what you want and produce a working, aesthetically coherent website — iteratively, conversationally, and fast.
Claude Code is Anthropic's agentic command-line tool that integrates directly into VS Code. Once installed, you work with it the same way you'd work with a senior developer sitting next to you: you describe what you want, it proposes changes, and it applies them to your actual files. It can read your project structure, understand context across multiple files, run commands, and — critically for our workflow — interact with Git.
We began with a simple brief: describe the MarrSynth brand, its dark aesthetic, its focus on AI projects, and the general pages we needed. Claude Code produced a complete site structure — HTML, CSS, layout logic, navigation, and placeholder content — in a fraction of the time any manual approach would have required. From there, every refinement was a conversation:
"Make the hero section more dramatic. Add an isometric cube logo element. Tighten the spacing on mobile. Change the accent color to match the hexagon motif."
Each instruction produced real, applied code changes — viewable immediately in a local browser preview. The feedback loop was tight enough that iteration felt less like development and more like design direction.
Step 2: Refining the Vision with ChatGPT
While Claude Code excelled at translating intent into working code, we found real value in stepping back and using ChatGPT as a strategic thinking partner. Before asking Claude Code to build or change something significant, we'd run the idea through a ChatGPT conversation first.
These discussions helped sharpen the answers to questions like:
- What is this site actually for — what problem does it solve?
- Who is the intended audience, and what do they need to see first?
- What tone, terminology, and framing best represents the brand?
- What sections and calls-to-action make the most sense given those goals?
The outputs from those conversations — clearer positioning language, refined section priorities, better copy direction — then became direct inputs to Claude Code. We'd paste the refined brief and say: "Based on this updated intent, revise the About section and restructure the Services page." Claude Code would execute.
This two-AI workflow turned out to be remarkably effective. ChatGPT as strategist, Claude Code as implementer. Each model doing what it does best.
Step 3: Connecting GitHub for Configuration Management
Any real project needs version control, and this one is no exception. We initialized a GitHub repository early in the process, which serves two purposes simultaneously: it's the source of truth for all site content, and it's the trigger for automatic deployment.
Setting up the repository is straightforward — create a new repo on GitHub, then initialize it locally in your VS Code project folder. Once the remote is connected, here's where Claude Code earns its keep again: rather than manually staging, committing, and pushing changes, you simply tell it to do so.
"Push the current changes to the GitHub repo."
Claude Code handles the git workflow — staging modified files, writing a commit message, and executing the push. For a developer, this is minor convenience. For someone less familiar with Git commands, it removes a meaningful barrier entirely.
Every commit becomes part of a clean project history. If a change breaks something, rolling back is simple. And because Render.com watches the repo, every push to the main branch automatically triggers a fresh deployment. Configuration management and continuous delivery, set up in minutes.
Step 4: Acquiring a Domain with Namecheap
A professional site needs a real domain name. We used Namecheap.com for domain registration, which remains one of the most straightforward and cost-competitive registrars available.
The process is exactly what you'd expect: search for your desired domain,
add it to your cart, and check out. Namecheap offers free WhoisGuard
privacy protection and a reasonably clean DNS management interface. A
standard .com domain runs approximately $10–15 per year
depending on promotional pricing — this is the only meaningful cost in
the entire stack.
Once the domain is registered, you'll point it at Render.com using Namecheap's DNS settings — we'll cover exactly how in the next step.
Tip: Before buying, think carefully about the name. This is the one part of the process where AI can't do the work for you — a domain is permanent enough to warrant deliberate thought. Use ChatGPT to brainstorm options if needed, then verify availability directly on Namecheap.
Step 5: Deploying and Hosting with Render.com
Render.com is where the site actually lives. It's a modern cloud hosting platform with a genuinely useful free tier for static sites — no credit card required for the account itself. Start on the free tier. It's sufficient for the entire build, test, and iteration phase while you're actively developing.
Connecting it to your GitHub repo takes only a few clicks:
- Create a free Render account and authorize it to access your GitHub account.
- Create a new Static Site service in Render.
- Select your GitHub repository as the source.
- Configure the build command and publish directory (for a simple static site, this is often just the root folder).
- Click Create Static Site — Render immediately pulls the repo and deploys.
Connecting the custom domain from Namecheap requires one additional step:
Render will provide you with a CNAME value (something like
your-site.onrender.com). Copy that value, go to Namecheap's
DNS management for your domain, and add a CNAME record pointing your
domain (or www subdomain) at that Render address. DNS
propagation typically resolves within minutes to a few hours.
Once it's live, every future push to your GitHub repo triggers an automatic redeploy. No manual intervention. No FTP. No SSH. The deployment just happens.
When to upgrade to the Starter plan ($7/month): Render's free tier spins down inactive services after a period of inactivity. When a visitor arrives at a spun-down site, they experience a noticeable delay — sometimes 30 seconds or more — while the service wakes up. During development this is fine; nobody notices a cold start on a site you're building privately. When you're ready to go live and real visitors are arriving, that spin-up delay is worth eliminating. Upgrading to Render's Starter plan at $7/month keeps the instance warm continuously, so the site responds instantly for every visitor. It's the one cost worth adding at the point of public launch.
Step 6: The Ongoing Development Workflow
This is where the full picture comes together, and where the value of the toolchain becomes clearest. Our day-to-day workflow for making changes to the site looks like this:
- Discuss the change. Either we know what we want, or we use ChatGPT to think through it more carefully — copy direction, new section ideas, structural changes.
- Instruct Claude Code. In VS Code, we describe the change in plain language. Claude Code proposes the edits and applies them to the actual files.
- Review locally. We preview the changes in a local browser. If something needs adjustment, we continue the conversation with Claude Code until it's right.
- Push to GitHub. When satisfied, we tell Claude Code to push the changes. It handles the git workflow.
- Render deploys automatically. Within minutes, the updated site is live at the production URL. Done.
This loop is fast, low-friction, and — importantly — it doesn't require holding a complex technical context in your head. Claude Code holds the project context. You provide direction. The infrastructure handles delivery.
It's a fundamentally different way of working on a web project, and once you've experienced it, the traditional approach feels unnecessarily laborious.
What It Cost
Let's be specific, because cost is always a real consideration:
| Item | Cost | Notes |
|---|---|---|
| Render.com hosting | $0 → $7/mo | Free tier during development; upgrade to Starter ($7/mo) at launch to eliminate spin-up delays |
| GitHub | $0 | Free for public and private repos |
| Namecheap account | $0 | Account creation is free |
| Domain name (e.g., jwmarrai.com) | ~$10–15/yr | This is the only real recurring cost |
| Visual Studio Code | $0 | Free and open source |
| Claude Code | Subscription / usage | Anthropic pricing applies; see anthropic.com for current plans |
| ChatGPT | Free / Subscription | Free tier is sufficient for the strategy discussions described here |
The infrastructure to build, version-control, and host a professional website starts at effectively zero cost. The only unavoidable cost is the domain name — and at $10–15 per year, it's hardly a barrier. Render's Starter plan at $7/month is the one optional upgrade worth making at launch: it keeps your instance warm so visitors never wait for a cold start.
What's Next — AI Agents Running the Show
What we've described here is the foundation: a human-directed, AI-assisted workflow where Claude Code handles implementation and GitHub plus Render handle delivery. It's already a significant improvement over traditional web development — but it's only the beginning.
The longer-term vision for MarrSynth goes further: using AI agents to not just assist with changes, but to actively monitor, maintain, and grow the site and the business behind it. Agents that can analyze performance data, suggest content updates, draft new articles, test and deploy changes, and surface opportunities — all with minimal human intervention.
We're actively building toward that. The toolchain described in this article — Claude Code, GitHub, Render — is deliberately chosen with that future in mind. Agents need reliable, programmatic interfaces to act through. This stack provides exactly that.
In an upcoming article, we'll cover how we're connecting AI agents into this workflow: what that looks like in practice, which tools and frameworks are involved, and what it means for the way a small team — or a single person — can operate an ambitious web presence without proportional increases in manual effort.
Subscribe or check back — that article is coming soon.
If this walkthrough was useful, share it with someone who's been putting off building a site because it felt too complicated. The stack described here removes most of the traditional friction. The barrier isn't technical anymore — and that's exactly the point.