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 at Langbase.com · Ex VP DevRel Rapid · Google Developers Advisory Board (gDAB) founding member. 🧑💻 AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member 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 3x 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 (100 videos · 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K 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.
🙌 Leading developers and publishing technical content for over a decade 💜 Loves his wife (Maedah) ❯ Read more about Ahmad Awais.
👋… Awais is mostly active on Twitter @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!