How to Serve a Subdomain as a Subdirectory Using Cloudflare

After you implement this solution, you can send me your domain and I'll provide a free comprehensive review of your subdirectory ensuring it was setup properly. Email me.

You're probably an SEO-conscious person who wants the best of both worlds. That is to use two different websites/CMSs/applications on the same domain without using a subdomain.

But, wait! Google says using a subdomain doesn't impact SEO!?

That is true, but anything that Google says has to be analyzed.

Watch this tutorial in my video or read ahead below.

Subdomain vs. Subdirectory

I believe the correct interpretation of Google's statement is as follows. When considering a brand new domain, creating a subdomain will be given the same fair shot at achieving rankings as the root domain. So it is true that subdomains and root domains have equal treatment. 

But here's where this unravels. 

If we are considering creating a brand new subdomain on a domain that has built up credibility and traffic over time, they will not be treated equally. The root domain has established its dominance, but the subdomain has not. I'm not sure if the subdomain is treated as a fresh domain or if you're given some sort of boost because it's piggybacking off the root domain. I do know that it won't perform as well as the primary domain.

Using Cloudflare to Serve a Subdomain as a Subdirectory

Okay, we've established you want to use two different websites but not use a subdomain. Lucky for you, it's pretty easy to serve your subdomain (e.g., blog.example.com) as a subdirectory (e.g., example.com/blog). This trick I'm going to share with you is very cool and effective.

First, you need your DNS routed through Cloudflare and for the traffic to be proxied (i.e. the clouds must be orange).

Next, go to Workers and create one.

Next, paste the following code in:

Note: I've updated the code in this snippet and the images are showing the older version. They'll both work, but this version allows for more customization and it rejects post requests which this proxy can't handle.

addEventListener('fetch', function(event) {
  event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
  // Only GET requests work with this proxy.
  if (request.method !== 'GET') return MethodNotAllowed(request);

  const url = new URL(request.url);
  const originUrl = url.toString().replace(
    'https://example.com',
    'https://blog.example.com'
  );
  const originPage = await fetch(originUrl);
  const newResponse = new Response(originPage.body, originPage);

  return newResponse;
}
function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers: {
      'Allow': 'GET'
    }
  })
}

Here's what it looks like in the dashboard:

Be sure to change out the URLs to yours. The first is your root domain, and the second is the subdomain/other website. In summary, the code looks at the URL being requested and swaps it out with another URL (while still making it appear to come from the URL requested).

Next, we are going to tell Cloudflare on which URLs the code should be executed.

Go back to Workers and Add Route. Here is where we tell Cloudflare our subdirectory path(s) to run this code. Add the path *example.com/blog*. The asterisks are wild cards, so the URL will match additional subdirectories. Add the Worker we created and save it.

Add one more route. This route will be for the assets such as images, CSS, and JavaScript. While your blog is available at /blog, your assets are not. Find your asset URL. I recommend watching the video in the intro to help out with this. Once you have the asset URL add this as a route and save it.

After about 1 minute, you should be able to visit your website subdirectory and see your subdomain. Pretty cool!