1. Courses
  2. AI Engineering
  3. Run and Grow Your Site
  4. Stop 1

25 minBeginner

Your own domain, with DNS at Cloudflare

Mangrove Kitchen works at mangrove-kitchen.vercel.app, but nobody remembers that address. In this lesson you buy a domain, let Cloudflare run its DNS, and point it at Vercel so the site opens at its own name over HTTPS.

By the end you can

  • Explain domain, registrar, DNS record and nameserver in one sentence each
  • Buy a domain safely, with auto-renew and two-factor sign-in
  • Move the domain's DNS to Cloudflare by changing two nameservers
  • Add the A and CNAME records Vercel asks for, with the right proxy setting

The everyday picture

Opening a shop has three parts. You register the shop's name at an office and renew it every year. You paint the name on the signboard. And you put a listing in the city directory that says where the shop actually is.

On the web, the domain is the name, the registrar is the office, DNS is the directory listing, and the nameservers say which directory office holds it. Here, that office is Cloudflare.

Four words you need

  • : the name people type, rented by the year.
  • : the shop you rent it from.
  • : one line of the listing. An A record points a name at an IP address. A CNAME points a name at another name. A TXT record holds text other services read, for example to check you own the domain.
  • : the servers that hold your records. Change them at the registrar to move your DNS.

Why Cloudflare? Its DNS is free and easy to edit, and the next lessons add many records (e-mail, Google, ads). Kolom itself runs this way: DNS at Cloudflare, the site on Vercel.

Browser Domain registry NS: Cloudflare Cloudflare DNS A: 76.76.21.21 Vercel serves the site 1. which DNS? 2. get IP 3. HTTPS
Every visit starts with a lookup. The registry says which nameservers hold the domain, Cloudflare answers with the A record, and the browser connects to Vercel. The answers are cached for a while, so later visits skip most of this.

Quick check

You want Cloudflare to run your DNS, but you bought the domain at another registrar. What do you change?

Buying the name safely

Pick a short name that is easy to say on the phone. Protect it like a bank account: losing it means losing your site and your e-mail.

  • Where: any well-known registrar. Cloudflare Registrar sells at cost with no markup. Country endings such as .com.bd have their own registries and rules, so check those first.
  • Auto-renew on, with a card that will still work next year. An expired domain stops the site and e-mail at once.
  • Two-factor sign-in on the registrar account, with recovery codes in your password manager.
  • WHOIS privacy on, so your address and phone number aren't public.
  • Owner e-mail: the site's shared owner address from lw-01, not a personal one.

Most registrars bill international cards in US dollars. In Bangladesh, a dual-currency card enabled for international online payments usually works; ask your bank. Moving a new domain to another registrar is locked for 60 days, so choose the registrar you want to stay with.

Quick check

Which setting protects the site from going offline because nobody renewed the name?

Pointing it at Vercel: A, CNAME and the grey cloud

You add both the bare domain (mangrovekitchen.example) and www in Vercel, and one redirects to the other. Vercel then shows the records to add. For years these were an A record of 76.76.21.21 for the bare domain and a CNAME of cname.vercel-dns.com for www. Newer projects may show different values, so copy exactly what your Vercel screen shows.

Every record in Cloudflare has a . An orange cloud means visitors go through Cloudflare's network first. A grey cloud, "DNS only", means Cloudflare only answers the lookup and the browser goes straight to Vercel. Vercel recommends DNS only for records that point at it: it runs its own global network and issues the certificate itself, and proxying on top can block the certificate or loop redirects.

DNS only (grey) Browser direct Vercel issues HTTPS Proxied (orange) Browser Cloudflare edge Vercel extra hop Use for Vercel Risk: redirect loop
Grey cloud: Cloudflare answers the lookup and steps aside, and Vercel handles HTTPS. Orange cloud: every request passes through Cloudflare first, which can fight with Vercel's own certificate and redirects.

Record changes show within minutes with Cloudflare's "Auto" . A nameserver change is slower: often under an hour, sometimes a day.

Quick check

After you add the records, the site shows "too many redirects" and both records have an orange cloud. What is the first fix to try?

Do it

Put your site on its own domain. Menus move, so look for the named setting if a button has a new place.

  1. Buy the domain

    Use the checklist above. Write the renewal date in your cost sheet.

  2. Add it to Cloudflare

    In Cloudflare, choose to add a domain, type the name and pick the Free plan. Cloudflare scans existing records; delete leftovers such as the registrar's parking page.

  3. Change the nameservers

    Cloudflare shows two nameservers. At your registrar, find the domain's Nameservers setting, choose custom nameservers and paste both. If you bought the domain at Cloudflare, this is already done.

  4. Check that Cloudflare answers

    Wait for the "Active" e-mail, or check yourself in a terminal (it works on Windows, macOS and Linux):

    Terminal
    nslookup -type=NS mangrovekitchen.example
    Output
    Non-authoritative answer:
mangrovekitchen.example  nameserver = ada.ns.cloudflare.com
mangrovekitchen.example  nameserver = bob.ns.cloudflare.com

    Your names will differ. Still the registrar's? Wait and retry.

  5. Add the domain in Vercel

    In your Vercel project, open Settings, then Domains. Add the bare domain and www, and choose which one redirects to the other. Vercel shows the records it needs.

  6. Copy the records into Cloudflare

    In Cloudflare, open DNS, then Records. Add the A record (name @) and the CNAME (name www) with exactly the values Vercel shows. Set both to DNS only.

  7. Wait for the certificate

    Vercel's Domains page turns to "Valid Configuration" and issues the certificate. Open both addresses in a private window and check the padlock.

  8. Move every address to the new name

    Change NEXT_PUBLIC_SITE_URL in Vercel and redeploy. In Supabase, set the Site URL to the new address and add it to Redirect URLs (lw-04). Then ask your agent to find leftovers:

    Markdown
    Search the whole project for "mangrove-kitchen.vercel.app" and list
every file and line. Don't change anything yet. For each one, tell me
whether it should use NEXT_PUBLIC_SITE_URL instead.

Bring it to your team

Ask these before you announce the new address.

  • Who owns the registrar account, and is auto-renew on with a card that won't expire this year?
  • Is two-factor sign-in on for both the registrar and Cloudflare?
  • Do both the bare domain and www open the site over HTTPS, and does one redirect to the other?
  • Do sign-in e-mails now open the new address, not the vercel.app one?

Red flags

  • The domain is registered to a personal e-mail of someone who may leave.
  • The renewal date is in nobody's calendar or cost sheet.

Practice

Write your DNS plan

For your own site (or Mangrove Kitchen), write a plan before you touch a dashboard: domain, registrar, renewal date, nameservers, each record (type, name, value, proxy status) and what to update afterwards.

  • The plan has an A record for the bare domain and a CNAME for www, with values copied from Vercel
  • Both records are marked DNS only
  • It says which of the two addresses redirects to the other
  • It lists the follow-ups: NEXT_PUBLIC_SITE_URL plus a redeploy, Supabase Site URL and redirect URLs
  • It names the account owner, auto-renew and two-factor sign-in
Show a model answer
Output
Domain: mangrovekitchen.example at Cloudflare Registrar
Owner: kitchen-owner@ shared address; 2FA on; auto-renew on
Renews: 14 October next year (in the cost sheet)
Nameservers: ada.ns.cloudflare.com, bob.ns.cloudflare.com
Records (from Vercel's Domains page):
  A      @    76.76.21.21           DNS only
  CNAME  www  cname.vercel-dns.com  DNS only
Redirect: www -> mangrovekitchen.example (set in Vercel)
After: NEXT_PUBLIC_SITE_URL + redeploy; Supabase Site URL and
  Redirect URLs; ask the agent to search for the old address

Check yourself

You moved DNS to Cloudflare an hour ago. Your phone opens the new site, but a friend's laptop still shows the registrar's parking page. What is most likely happening?

Vercel's Domains page shows www as "Invalid Configuration". The bare domain works. What should you check first in Cloudflare?

The site now opens at the new domain, but sign-in e-mails still send people to mangrove-kitchen.vercel.app. What did you miss?

Flashcards

Open my review

Key takeaways

  • The domain is the name, the registrar rents it to you, DNS records say where it points, and nameservers say who holds those records.
  • Move DNS to Cloudflare by changing two nameservers at the registrar, then wait for "Active".
  • Copy Vercel's A and CNAME records exactly, set them to DNS only, and let Vercel issue the certificate.
  • After the switch, update the site address variable, Supabase's URLs and any old address in the code.

Sources and further reading

Episode transcriptTwo nameservers and a grey cloud · about 8 minutes · tap any line to play from there
  1. NadiaImran, Mangrove Kitchen has been live for a week. What's the address?
  2. ImranMangrove dash kitchen dot vercel dot app. I've said it on three calls today, and every time someone asks me to spell it.
  3. NadiaThat's the sign it needs its own name. Today we buy a domain, hand its DNS to Cloudflare, and point it at Vercel. No code at all. Just copying a few lines between dashboards, carefully.
  4. ImranCarefully sounds like there's a trap.
  5. NadiaThere's one big one, and it's a little cloud icon. We'll get there.
  6. NadiaStart with a shop. You register the shop's name at an office and renew it every year. You paint it on the signboard. And you put a listing in the city directory that says where the shop actually is.
  7. ImranSo the domain is the name, and the office is the registrar.
  8. NadiaYes. And DNS is the directory listing. The nameservers say which directory office holds your listing. In this lesson, that office is Cloudflare.
  9. ImranWhy Cloudflare, if I bought the name somewhere else?
  10. NadiaIts DNS is free and easy to edit, and you'll add a lot of records in the next lessons. E-mail, Google verification, ads. Kolom itself runs this way, with DNS at Cloudflare and the site on Vercel.
  11. ImranOkay. What actually happens when someone types the name?
  12. NadiaIf you can see your screen, the first diagram shows it. If not, picture the browser on the left and three boxes on the right. First, the browser asks the domain registry which nameservers hold this name. The registry says Cloudflare.
  13. NadiaSecond, it asks Cloudflare for the A record, which is an IP address. Third, it connects to that address, which is Vercel, over HTTPS.
  14. ImranAnd an A record is just an address. What's a CNAME then?
  15. NadiaA CNAME points a name at another name instead of an address. You'll use an A record for the bare domain and a CNAME for the www version.
  16. ImranLet me guess the mistake people make. They change the A record at their old registrar and wonder why nothing happens.
  17. NadiaExactly. Once the nameservers point at Cloudflare, the old registrar's records don't matter anymore. Cloudflare answers for the domain. So you change two nameservers at the registrar, and from then on you edit records only in Cloudflare.
  18. ImranBefore any of that, I have to buy the name. What do I watch for?
  19. NadiaTreat it like a bank account, because losing the domain means losing the site and the e-mail. Four things. Auto-renew on, with a card that still works next year. Two-factor sign-in on the registrar.
  20. ImranThat's two.
  21. NadiaThree, WHOIS privacy, so your home address isn't public. Four, the owner e-mail should be the site's shared address, not someone's personal inbox.
  22. ImranPayment, though. Plenty of listeners can't just tap a card on an American website.
  23. NadiaTrue. Most registrars bill international cards in US dollars. In Bangladesh, for example, a dual-currency card enabled for international online payments usually works, so ask your bank. And choose your registrar carefully, because a new domain is locked from moving to another registrar for sixty days.
  24. ImranRight. Now the cloud icon.
  25. NadiaIn Vercel you add both the bare domain and www, and choose which one redirects to the other. Vercel then shows you the records to add. For years those were the same values for everyone, but newer projects may show different ones. So the rule is simple. Copy exactly what your Vercel screen shows.
  26. NadiaNow, every record in Cloudflare has a proxy status. The second diagram shows two lanes. On the left, a grey cloud, called DNS only. The browser goes straight to Vercel. On the right, an orange cloud, proxied. Every request passes through Cloudflare's network first, then Vercel.
  27. ImranThe orange one sounds better. More protection?
  28. NadiaThat's the reasonable guess, and it's the trap. Vercel already runs its own global network and issues the HTTPS certificate itself. Putting Cloudflare's proxy in front can block that certificate or make the two bounce visitors back and forth in a loop. Vercel recommends DNS only for records that point at it.
  29. ImranWhich is exactly what happened to us, isn't it?
  30. NadiaIt is. We bought mangrove kitchen dot example. The course uses the reserved ending dot example, so the name can't belong to anyone. Cloudflare showed Active about forty minutes after the nameserver change. We copied Vercel's two records, and Cloudflare had set both to proxied.
  31. ImranAnd the site said too many redirects.
  32. NadiaRight. We switched both to DNS only, and ten minutes later Vercel showed Valid Configuration with a certificate.
  33. ImranThen we were done?
  34. NadiaAlmost. Sign-in links still opened the old vercel address. The site's address variable in Vercel and Supabase's Site URL and redirect URLs all needed the new name. Change the variable, redeploy, update Supabase.
  35. ImranHow long do these changes take to show up?
  36. NadiaEach record has a TTL, time to live, which is how long other servers may keep an old answer. With Cloudflare's automatic setting, record changes show within minutes. A nameserver change is slower. Often under an hour, sometimes up to a day.
  37. ImranSo if my phone shows the new site and a friend's laptop doesn't, that's just caching.
  38. NadiaYes. Different networks switch at different times. Give it a little while.
  39. ImranWalk me through the Do it section in order.
  40. NadiaBuy the domain with the safety checklist and write the renewal date in your cost sheet. Add the domain to Cloudflare on the free plan and delete leftover records like the registrar's parking page. Change the two nameservers at the registrar.
  41. NadiaCheck that Cloudflare answers with a lookup command in your terminal. Add the bare domain and www in Vercel's domain settings. Copy the A record and the CNAME into Cloudflare, both grey cloud. Wait for the certificate, and test both addresses in a private window.
  42. ImranAnd last, move every address to the new name.
  43. NadiaYes, and ask your agent to search the whole project for the old vercel address and list every place it appears, without changing anything yet. Then you decide.
  44. ImranQuestions I'd ask before we announce the new address. Who owns the registrar account, and is auto-renew on with a card that won't expire? Is two-factor on for the registrar and Cloudflare? Do both addresses open over HTTPS, with one redirecting to the other?
  45. NadiaAnd do sign-in e-mails now open the new address? That's the one people forget.
  46. NadiaHere's one to think about. Vercel says www has an invalid configuration, but the bare domain works fine. Where do you look first? Take a second.
  47. ImranThe www record in Cloudflare?
  48. NadiaYes. www needs its own CNAME, with exactly Vercel's value, set to DNS only. A missing, mistyped or proxied CNAME is the usual cause.
  49. ImranLet me sum up. One, the domain is the name, the registrar rents it to you, and the nameservers decide who answers for it. Two, move DNS to Cloudflare by changing two nameservers, then edit records only there. Three, copy Vercel's records exactly and keep them on the grey cloud.
  50. NadiaAnd one more. After the switch, update the site address everywhere: the variable in Vercel, Supabase's URLs, and anything in the code.
  51. ImranNext time, e-mail. Sign-in links that land in spam, and three odd acronyms that fix it.
  52. NadiaSPF, DKIM and DMARC. See you there.
Finished reading?Mark it complete to fill in its stop on your course line.

Use it at work

Release checklist

Before, during and after a deploy: owners, go/no-go checks and the rollback trigger, as a checklist.

Open in the DevOps & TechOps Lab
Next stopE-mail that arrives: Resend, SPF, DKIM and DMARC
Was this lesson helpful?
Questions and discussion

Loading the discussion…