Or how Carrd and Cloudflare fell in love. ❤️
You finally built your beautiful landing page in Carrd, but your blog lives in a different location. How can you make links like
yourlandingpage.com/blog/title-of-your-article still work?
I had this problem recently when I switched to Carrd. Before, as a landing page I was using a static webpage hosted on Vercel. I was using "rewrites" so that anything going to the
/blog URL would be rewritten (not redirected), to the corresponding blog URL. Worked like a charm.
When I migrated the landing page to Carrd and published it on the main domain, the blog stopped working. Expected, but I didn't see it coming, because I forgot about it. 🤦♀️
The Vercel attempt
The first thing I did (after panicking) was to create a new project on Vercel only with
index.html in it. My idea was to direct all the DNS to this new project and do the rewrites in vercel.json for both the root route (/) and the blog route (/blog). But that didn't work, as Vercel would first load the page and then apply the rules from vercel.json. By the time I told it to treat the root page as the Carrd page, was too late.
The rewrite never worked.
Meanwhile, I reached out to my good friend Dmytro not just to rant about my problem, but also to ask for advice on how to solve this. As approachable as he is, he proposed to try Cloudflare Workers. Something completely new for me, that I consciously avoided as I don't want to increase my maintenance cost. Eventually, I decided to try it out.
Funnily enough, things worked quite well. So what did I do:
- I published my Carrd page to a Carrd subdomain (again: not a custom domain, but Carrd subdomain)
- added a domain to Cloudflare and
- directed the nameservers to it
- installed the Workers CLI (called Wrangler)
- created the Worker from a sample code Dmytro provided
- waited for changes to propagate
Directing the nameservers to Cloudflare can be a bit messy. Especially if you already have a complex DNS structure. You have to be careful not to break anything that is working at the moment. The idea is that once done, the main domain management will be done on the Cloudflare side.
What is a Cloudflare Worker
Cloudflare Workers are a platform for enabling serverless functions to run as close as possible to the end user.
My use case is just part of what Workers can do. Have a look at this detailed explanation here.
What the worker in my case does is that it makes it look as if the user is browsing the same page. While they are two.
The Worker I created looks like this (added comments for clarity):
It takes the request URL, parses its structure, and decided if it needs to fetch the content from Carrd or from the Blog. Remember, we are not talking about redirecting, but about showing the content from the other page.
Remember to connect your main domain to the worker itself:
Let things settle and DNS changes propagate, then enjoy your new setup!