Lesson 3.3 · 50 minFirst deployment and domain

What you will have

The placeholder page opens at your own domain over HTTPS. Every push to the main branch updates the live site automatically, and every other branch gets its own preview link.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Automatic deployment and previews

Purpose: prove that a push to main updates the live site.

Context: app/page.tsx shows the placeholder. The site is connected to Vercel
and deploys from the main branch.

Done when: the second line reads "New website coming soon — launching this
month." and the change is committed and pushed to main.

Constraints: change only that text. Run npm run build and npm run lint before
committing and confirm both pass. Tell me the commit hash you pushed.

Purpose: show me a preview deployment.

Context: main deploys to production on Vercel; other branches get previews.

Done when: a branch named try-headline, with the h1 changed to "Hello from a
preview", is pushed to GitHub; main is untouched; I am back on main locally.

Constraints: run the build before pushing; confirm the current branch with
git status.

Do along

Work on your own project and accounts and pause the video where told.

1. Confirm git status is clean and git push is up to date.
2. Pause after Part 3. In Vercel, create a new project from your GitHub repository and deploy it. Open the vercel.app address on your computer and your phone.
3. Pause after Part 4. Use the first prompt from Part 4 with your own wording for the second line. Watch the new deployment appear and the live text change.
4. Use the second prompt to create a preview branch. Open the preview address and the production address side by side. Then ask Claude to delete the try-headline branch locally and on GitHub.
5. Pause after Part 5. Buy your domain, or use one you own. Turn on automatic renewal.
6. In Vercel, add the domain to the project. Add the A and CNAME records at your registrar with the values Vercel shows.
7. Watch Part 6 while the DNS change spreads. When Vercel shows the domain as valid, open https:// plus your domain.
8. Save the checkpoint with the commands under "Recap and next".

Check your work

1. Open https://your-domain in a private browser window. Expected: the placeholder page, with a padlock and no security warning.
2. Open https://www.your-domain. Expected: the same page (one spelling redirects to the other).
3. Push a small text change to main. Expected: within a few minutes the change is visible on your domain without any other action.

Common problems

• Repository not in Vercel's list → Vercel's GitHub app has no access to it → adjust the GitHub access from the import screen and grant that repository.
• Build fails on Vercel but passed locally → a file was not committed, or the build was not actually run locally → open the build log, copy the error text, and give it to Claude with "this is the Vercel build log; reproduce it locally with npm run build and fix it".
• Domain shows "Invalid Configuration" → an old A, AAAA or CNAME record conflicts, or the value was mistyped → at the registrar, remove conflicting records for @ and www and compare the values with Vercel's screen character by character.

Homework

About 20 minutes, after the lesson. No later lesson depends on it, and nothing here costs money.

1. Hosting and domain record. Read Vercel's Fair Use Guidelines and pricing page. In docs/architecture.md add a short "Hosting and domain" note: which plan you are on and when you will review it, your registrar, the renewal date, that automatic renewal is on, and where the DNS records are edited. No passwords. Deliverable: the note. Commit without a tag. Done when: another person could tell from it where the domain is renewed and which plan the site runs on.
2. Outside check. On your phone with Wi-Fi off, open your domain with and without www. Ask one person somewhere else to do the same. Deliverable: two lines in your notes: who, which device, what they saw. Done when: both saw the page with a padlock and no warning.
3. A preview of your own. Brief Claude for a preview branch with a different heading you are considering. Open the preview address in a private window and note whether it asks you to sign in. Then have Claude delete the branch locally and on GitHub. Deliverable: one line in your notes. Done when: production still shows the original heading and the branch is gone from GitHub.

Save your work

git add -A
git commit -m "Lesson 3.3: deployed to Vercel on custom domain"
git tag lesson-3.3
git push
git push --tags