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.
Setup a Domain with Vercel & Cloudflare#
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:
- Make sure to replace
example.tld references below with your actual domain name, e.g. ahmadawais.com would be my
- Cloudflare: Click [Add Record] button. Select type
TXT, name is your
example.tld, and in the content area paste
- Cloudflare: Again select type
CNAME, the name is your
example.tld, and in the target paste
- If it’s not already done, then toggle CNAME from → Now go to the SSL/TLS tab and select enable Full (Strict) SSL option
- Set up a Page Rule with a match pattern of
*example.tld/.well-known/* and then select a setting SSL and turn it Off
- Go to your Vercel.com dashboard, you must already have a project there, go to
Settings and then
Domains and add your domain to Vercel as
- And finally, go add the
<domain> in your Vercel’s project settings
curl 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 configured
- If you still get an error, make sure in the Page Rules — You have disabled SSL for the path
- If still not working, then some times a Cloudflare option called Always use HTTPS could be the issue. This config is present under
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 Vercel
That’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. 🥁
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!