Ship It: Deploy to Vercel, Connect a Domain, DNS and Cloudflare

Summary

This is the lesson that turns a local project into a real website anyone can visit. You will connect your GitHub repo to Vercel, get a live URL in minutes, point a custom domain at it, and understand DNS and Cloudflare well enough to never be scared of them again. Finish this and you have done the thing the whole course promised: built and shipped a real app with AI.

What you will learn

You will deploy to Vercel from your private GitHub repo, set up automatic deploys on every push, connect a custom domain, understand what DNS records do, and use Cloudflare for DNS, free HTTPS and basic protection. No prior hosting experience needed.

Prerequisites

A project pushed to a private GitHub repo from the previous lesson, and a free Vercel account. The Fundamentals page on DNS will deepen the domain section, but this lesson explains enough to get you live. If you do not own a domain yet, you can ship on Vercel's free URL first and add a domain later.

The problem

Beginners often build something good and then it dies on their laptop because deployment feels like a wall of unfamiliar words: hosting, DNS, nameservers, SSL, CDN. So the project never goes live and never gets feedback. This lesson dissolves that wall by doing it once, in order, with the jargon explained as it appears.

Step by step: deploy to Vercel

Vercel is a hosting platform built for exactly this. The smoothest path is to connect your GitHub repo: Vercel watches it and redeploys automatically every time you push. You barely touch the terminal.

• Sign in to Vercel with your GitHub account.
• Click "Add New Project" and import your private repository - Vercel can read private repos once you authorise it.
• Vercel auto-detects the framework and build settings; for a standard Vite or Next.js app you can accept the defaults.
• Click Deploy. In a minute or two you get a live URL like my-first-app.vercel.app that anyone in the world can open.

From now on, every git push to your main branch triggers a new deploy automatically. This is the modern workflow: you build locally, push, and your live site updates itself. If you set environment variables (your secrets) in the Vercel dashboard rather than in code, they stay safe and never touch your repo - the same .env discipline from the last lesson, applied in production.

What DNS actually is

DNS, the Domain Name System, is the internet's phone book. It translates a human name like yoursite.com into the address of the server that should answer. When you "connect a domain", you are adding records to that phone book that say "for this name, send visitors to Vercel". The two records you will meet most are an A record (points a domain at an IP address) and a CNAME (points one name at another name). That is genuinely most of what you need to know to ship.

• A record: maps a domain or subdomain to a numeric IP address.
• CNAME record: maps a name to another name (for example www to your Vercel target).
• Nameservers: decide which company holds your DNS phone book in the first place.
• Propagation: DNS changes can take minutes to a few hours to spread worldwide - not broken, just slow.

Step by step: connect a custom domain

In Vercel, open your project, go to the domain settings, and add your domain. Vercel then tells you exactly which DNS records to create at your domain provider. You copy those records into your provider's DNS settings, save, and wait for propagation. Vercel verifies the connection and issues a free HTTPS certificate automatically, so your site loads securely with the padlock.

• Add your domain in the Vercel project settings.
• Copy the A and/or CNAME records Vercel gives you.
• Paste them into your DNS provider and save.
• Wait for verification, then visit your domain - it now serves your live site over HTTPS.

Where Cloudflare fits in

Cloudflare is a popular place to manage DNS, and it does more than hold records. Point your domain's nameservers at Cloudflare and you get a clean DNS dashboard, free HTTPS, a global content delivery network that makes your site load faster worldwide, and basic protection against attacks and bots. For most builders the pattern is: domain registered somewhere, DNS managed at Cloudflare, site hosted on Vercel, with Cloudflare's records pointing at the Vercel target. You do not need every Cloudflare feature on day one - the free DNS, HTTPS and CDN are reason enough to use it.

Typical mistakes

The frequent ones: assuming the site is broken when DNS simply has not propagated yet (wait, then recheck); editing the wrong DNS records or leaving stale ones that conflict; forgetting to set environment variables in Vercel so the live site is missing its secrets; and proxying through Cloudflare in a way that double-handles HTTPS. When something looks wrong, check propagation and your environment variables before assuming the worst.

Business ROI

Shipping is where value finally appears. A project on your laptop earns nothing; a live site can be shown to customers, indexed by Google, recommended by AI, and iterated on with real feedback. Automatic deploys mean shipping an improvement costs you a single git push, so the loop from idea to live update is minutes, not days. That speed is the entire competitive advantage of building this way.

Checklist

You have completed Course 1 when all of these are true. Take a moment - this is a genuine milestone.

• Your project is deployed on Vercel and live at a public URL.
• Every git push redeploys the site automatically.
• Secrets live in Vercel environment variables, not in the repo.
• A custom domain (or the Vercel URL) loads your site over HTTPS.

Resources

Keep the Vercel and Cloudflare dashboards bookmarked, and lean on the DNS fundamentals page whenever records confuse you. The Vercel Deploy checklist in the resource library captures these steps for next time. You have now done the whole loop: idea, build, version control, ship.

Your task

Deploy your project to Vercel and confirm it loads at a public URL. If you own a domain, connect it through DNS and confirm HTTPS works. Then make one small change locally, commit, push, and watch Vercel redeploy automatically. Congratulations: you have built and shipped a real website with AI.

Next lesson

You can now take an idea all the way to a live site. Course 2, Claude Code Mastery, turns the agent from a helpful tool into a reliable power-user workflow: project rules, reusable skills, automated quality gates, MCP and multi-agent systems.