Connect your blog to your Carrd page

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 or 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 vercel.json and 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.

The solution

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
  • rainbows!

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.

In theory, this is what they are. In reality, they are a piece of code that executes closely before your request. The code remains cached on the network and every time a user does a request to your page, the request will be intercepted and additional JavaScript code will be executed.

My use case is just part of what Workers can do. Have a look at this detailed explanation here.

The Worker

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):

Snap (1).png

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!