Ahmad Awais
I like to host my domains on Cloudflare. It gives me the ability to changes my servers swiftly in addition to the free CDN, SSL, and security benefits. And before I forget, I love the new Analytics offering they have. Much better than client-side solutions.
Vercel (formerly ZEIT) and Cloudflare don’t necessarily go hands and hands on the topic of setting up domains since both of these offer some features that become redundant. Like the CDN, SSL, etc.
So, for future reference, if I forget, writing this post on how to set up the Vercel (formerly ZEIT) and Cloudflare domain using the following steps:
example.tld references below with your actual domain name, e.g. ahmadawais.com would be my example.tld.TXT, name is your example.tld, and in the content area paste cname.vercel-dns.comCNAME, the name is your example.tld, and in the target paste cname.vercel-dns.com
β 
Now go to the SSL/TLS tab and select enable Full (Strict) SSL option*example.tld/.well-known/* and then select a setting SSL and turn it OffSettings and then Domains and add your domain to Vercel as example.tld<domain> in your Vercel’s project settingscurl http://example.tld/.well-known/acme-challenge -I ( Notice that itβs http and not https) in your terminal. It should return HTTP/1.1 404 Not Found β¦ which is the configuration that works best for Vercel. If you run the curl command and get a 3XX redirect instead, then Cloudflare is preventing this route from being accessed. Vercel will mark the domain as not configuredexample.tld/.well-known/*SSL/TLS and then Edge Certificates tab and it may affect your page rules. Go ahead and disable this one. I had to do it when I moved from A settings of Netlify to CNAME settings on VercelThat’s about it. Vercel (formerly ZEIT) will start processing the SSL certificate for you. For this setup, you’ll keep using your nameservers for Cloudflare and don’t even have to worry about setting up ANAME or whatever.
Use your code for good. π₯
Founder & CEO of Langbase.com β The most powerful serverless AI developer platform for building AI products Β· Ship agentic AI pipes, tools, and memory with BaseAI β The first Web AI Framework (free, open-source, local-first, deploys serverless, agentic pipes, tools, and memory)
Ex VP DevTools & DevRel Eng. Rapid Β· Google Developers Advisory Board (gDAB) founding member. π§βπ» AI/ML/DevTools Angel Investor β― AI/ML Advisory Board San Francisco, DevNetwork
π© Award-winning Open Source Engineer & Dev Advocate π¦ Google Developers Expert Web DevRel π NASA Mars Ingenuity Helicopter mission code contributor π 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).
π³ Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. π Teaching thousands of developers Node.js CLI Automation and VSCode.pro course. Over 142 million views, 24 yrs Blogging, 108K developers learning, 200+ FOSS.
βοΈ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide β¦ WordPress Core Developer π£ TEDx Speaker with 100+ international talks.
β¨ As quoted by: Satya Nadella Β· CEO of Microsoft β Awais is an awesome example for developers.
π Loves his wife (Maedah) β― Read more about Ahmad Awais.
πβ¦ Awais is mostly active on π @MrAhmadAwais
Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!
What is the main benefit using Clouflare over Vercel?
Lots of them. I use my domains to do a lot of things. Not all are offered by Vercel. E.g. redirections, security stuff, and free analytics that I get with Cloudflare.
Thanks a lot! Your steps are very clear and it’s perfect! One related question pls: the last step, add the in your Vercelβs project settings, there’s a option “redirect to”. It’s weird – the purpose of this whole thing is to redirect to *.now.sh, so isn’t this option redundant?
Thanks a lot! Your steps are very clear and it’s perfect! One related question pls: the last step, add the ‘mydomain’ in your Vercelβs project settings, there’s a option “redirect to”. It’s weird – the purpose of this whole thing is to redirect ‘mydomain’ to *.now.sh, so isn’t this option redundant?
I mean, if I check this option and make it redirect to *.now.sh, all links will be like “*.now.sh/*”, so ‘mydomain’ is not linked any more? And more importantly, cloudflare does not interfere any more,.e.g.CDN?
I don’t understand what you’re trying to ask here. The purpose is to have your own custom domain setup not a redirect.
This would break any other CNAME not processed by Vercel and can’t provide Cloudflare CA SSL on that server. Do you know how to overcome Full (Strict) setting?
As an example, I’m hosting on Heroku and Cloudflare made my site secured, but with your setting the subdomain pointing to Heroku no longer works.
…Wow your post made this infinitely times easier. The problem was with the “Always Use HTTPS” setting for me. Thank you so much for the clear and concise post!