Your site has multiple pages, shared navigation, reusable components, and a polished look. Time to push it live.
You know this from Chapter 2 — open the Source Control panel in VS Code (⌘⇧G · Ctrl+Shift+G ), type a commit message like build personal site, click Commit, then Sync Changes.
Give Vercel a minute, then visit your URL. Your multi-page site is live on the internet.
?Getting your own domainNow try sharing a link on Discord, Twitter, or Slack. Paste your homepage URL and watch it unfurl — that's what it's called when a chat app fetches the page and shows a preview card with a title, description, and image.
It works — you see a title. But now share /projects or /about. The preview shows the exact same title and description. Every link unfurls identically.
Your site is an SPA — there's only one HTML file, and JavaScript swaps the content in the browser. That works great for visitors, but unfurlers don't run JavaScript. They just read the HTML, which is the same for every route.
Try it yourself — right-click any page on your live site and choose View Page Source. You'll see a mostly empty HTML file. That's all the unfurler sees too.
Ask your AI:
Enable prerendering so each page gets its own HTML file, and add
<title>and<meta>tags directly in each route component's JSX so each page shows its own title and description in link previews. Don't use the route modulemetaexport.
This prompt is unusually specific because rendering <meta> tags directly in JSX is a React 19 feature — your AI may not know about it yet and will likely reach for an older pattern instead.
The AI will do two things: add prerendering to your build config so each page gets its own HTML file, and add <meta> tags so link previews know what title and description to show.
Commit, push, wait for Vercel to deploy, then right-click any page on your live site and choose View Page Source. You should see real HTML content with <title> and <meta> tags instead of an empty shell. Share a page link again — this time each page shows its own title and description in the preview card.
This isn't a template anymore. You added pages, connected them with navigation, created a shared layout, built reusable components, styled the whole thing, and made it shareable. You directed the AI through every step — and when it got things wrong, you caught it and told it to fix them.
That's building. That's what it feels like.
Your site looks real, shares well, and Google can find it. But it's still a brochure — it shows information but can't collect any. What if you wanted visitors to reach out?
Ask your AI:
Add a contact form to the about page with fields for name, email, and message, and a submit button.
The AI will build it. The form will appear. It'll look great.
Your AI might warn you that the form won't actually send data. That's fine — tell it to build the form anyway. We want to see that gap for ourselves.
Now fill it out and hit submit.
Nothing happens. The data goes nowhere. There's no server to receive it, no database to store it. Your site can display content, but it can't save anything.
That's the gap. Your site is a poster, not an app.
In Chapter 4, you'll build your second app — a form builder with a real backend. A server that processes data, a database that stores it, and forms that actually work.