webroad.online
  1. 1Web
  2. 2HTML
  3. 3CSS
  4. 4JavaScript
  5. 5TypeScript
  6. 6Git
  7. 7Tooling
  8. 8React
  9. 9State management
  10. 10Next.js
  11. 11Forms
  12. 12Data and backend
  13. 13SEO
  14. 14Tailwind CSS
  15. 15Animations
  16. 16Testing
  17. 17Architecture
Web · Lesson 2 of 9

Domains and DNS

What a domain is, how DNS finds the IP, and how to point a Namecheap domain to Vercel, directly or through Cloudflare.

Updated

The domain: your site's name

A server has an IP address (216.198.79.1) that nobody wants to memorize. The domain (webroad.online) is the human-friendly name on top of it, and DNS is the system that connects the name to the IP.

blog.webroad.online
  • blogsubdomain
  • webroadsecond-level domain
  • .onlineTLD
Part What it is Examples
TLD (top-level domain) the ending, run by a registry .com, .ro, .online, .dev
second-level domain the part you buy webroad, example
subdomain anything in front; free to create with a DNS record www, blog, api

The apex (or "root", written @) is the bare domain: webroad.online. www.webroad.online is technically a subdomain with its own record. You usually pick one as the main address and redirect the other to it.

Three roles, sometimes three companies

Role What it does Examples
Registrar sells you the domain and renews it every year Namecheap, Porkbun, GoDaddy, ROTLD (for .ro)
DNS provider stores the records and answers questions about them Cloudflare, the registrar's own DNS, Vercel DNS
Host the server that actually sends the site Vercel, Netlify, a VPS

The registrar tells the world who the DNS provider is through nameservers. Once you set Cloudflare's nameservers at Namecheap (agustin.ns.cloudflare.com, martha.ns.cloudflare.com), only the records in Cloudflare count. The ones in the Namecheap panel are ignored.

How the IP is found

the browserchecks its own cache and the OS cachenot found→the resolveryour ISP's, or 1.1.1.1 / 8.8.8.8asks→root servers"for .online, ask the TLD servers"refers→.online TLD servers"this domain uses Cloudflare's nameservers"refers→authoritative nameserveranswers: 216.198.79.1

The resolver keeps the answer in its cache for as long as the TTL says, so it doesn't repeat the whole trip on every visit.

Record types

Type What it does Example
A name → IPv4 address @ → 216.198.79.1
AAAA name → IPv6 address @ → 2001:db8::1
CNAME name → another name (an alias) www → 74f2f97474b26c57.vercel-dns-017.com
MX the servers that receive email @ → aspmx.l.google.com
TXT free text: verifications, email rules google-site-verification=...
NS the domain's nameservers agustin.ns.cloudflare.com
CAA which authorities may issue HTTPS certificates 0 issue "letsencrypt.org"

CNAME isn't allowed at the apex. The DNS standard forbids a name that already has NS and SOA records (the apex always does) from also being a CNAME. So at the apex you either add an A record with the IP your host gives you, or use CNAME flattening / ALIAS: the provider (Cloudflare, for example) resolves the alias itself and answers with IPs.

TTL and "propagation"

The TTL (time to live), in seconds, says how long resolvers may cache an answer. With a TTL of 3600, after you change an IP some visitors still reach the old server for up to an hour. Nothing is actively "propagating": you're just waiting for caches to expire.

  • Before a migration, lower the TTL (to 300) a day in advance.
  • Changing nameservers takes longer (hours, sometimes up to 48 h), because the TLD servers cache too.

A real example: webroad.online on Vercel

The domain was bought at Namecheap and the site runs on Vercel. The first step is always at the host: Vercel → project → Settings → Domains → Add, type webroad.online and tick the redirect from www. Vercel shows you exactly which records to add. Copy them from there, because the values can differ between projects (older projects used 76.76.21.21 and cname.vercel-dns.com).

Option 1: DNS at the registrar. Namecheap → Domain List → Manage → Advanced DNS:

Type Host Value
A @ 216.198.79.1
CNAME www 74f2f97474b26c57.vercel-dns-017.com

Option 2: through Cloudflare DNS (this is how this very site is set up):

  1. Cloudflare → Add a domain → webroad.online. Cloudflare gives you two nameservers.
  2. Namecheap → Manage → Nameservers → Custom DNS → paste both.
  3. Wait until Cloudflare shows the domain as Active.
  4. In Cloudflare → DNS → Records, add the same A and CNAME with Proxy status: DNS only (grey cloud).

DNS only vs proxied. With the orange cloud (proxied), Cloudflare stops handing out the real IP and sits in front of your site instead: CDN, cache, firewall. But Vercel is already a CDN that issues its own HTTPS certificate. Two CDNs stacked on each other lead to certificates that fail to renew, redirect loops, double caching, and logs where every visitor seems to come from Cloudflare. Vercel recommends DNS only, meaning Cloudflare just answers DNS questions.

Verifying the domain

Services like Google Search Console ask you to prove the domain is yours: you add a TXT record at @ with the value google-site-verification=.... A domain can have any number of TXT records. Don't delete this one after verifying, because Google re-checks it periodically.

Email: SPF, DKIM, DMARC

If you send email from contact@webroad.online, three TXT records keep you out of spam:

Record Where What it says
SPF @ which servers may send email for the domain (v=spf1 include:_spf.google.com ~all); only one per domain
DKIM selector._domainkey the public key used to verify the emails' signature
DMARC _dmarc what receivers should do with email that fails SPF/DKIM (v=DMARC1; p=none)

How to check

dig webroad.online A +short           # the apex IPs
dig www.webroad.online CNAME +short   # where www points
dig webroad.online NS +short          # who the DNS provider is
dig @1.1.1.1 webroad.online TXT       # ask one specific resolver
nslookup -type=TXT webroad.online     # same thing, works on Windows too

No terminal? Use Google Admin Toolbox Dig or dnschecker.org, which shows what resolvers around the world see.

Common mistakes

  • Editing records at the registrar after moving the nameservers somewhere else.
  • Adding a CNAME at the apex with a provider that has no flattening.
  • Leaving old, conflicting records around: two A records pointing at different servers, a forgotten AAAA.
  • Leaving the orange cloud on in front of Vercel.
  • Having a CAA record that doesn't allow letsencrypt.org, so the host can't issue the certificate.
  • Typing webroad.online in the Host field. Most panels append the domain themselves, so you end up with webroad.online.webroad.online. For the apex, use @.

Summary

  • The registrar sells the domain, the nameservers pick the DNS provider, and the records point to the host.
  • A/AAAA for IPs, CNAME for aliases (not at the apex), TXT for verifications and email.
  • With Vercel behind it, Cloudflare stays on DNS only; check with dig.

Official sources

Exercises

Was this page helpful?

One tap — no account needed.