Wrap-up

In Part 1, the merits and tradeoffs of subdirectories and subdomains were discussed. The subdirectory technique is normally exceptional to subdomains since subdomains struggle with keyword and backlink dilution The subdirectory technique more efficiently boosts a site’s search rankings by guaranteeing that every keyword is credited to the root domain rather of watering down throughout subdomains.

Subdirectory Strategy without the NGINX

In the very first part, our good friend Bob established a hosted Ghost blog at bobtopia.coolghosthost.com that he connected to blog.bobtopia.com utilizing a CNAME DNS record. But what if he wanted his blog to live at bobtopia.com/blog to acquire the SEO advantages of subdirectories?

A reverse proxy like NGINX is normally required to route traffic from subdirectories to remotely hosted services. We’ll show how to execute the subdirectory method with Cloudflare Workers and eliminate our reliance on NGINX. (Cloudflare Workers are serverless functions that worked on the Cloudflare international network.)

Back to Bobtopia

Let’s compose an Employee that proxies traffic from a subdirectory– bobtopia.com/blog– to a remotely hosted platform– bobtopia.coolghosthost.com This means that if I go to bobtopia.com/blog, I ought to see the material of bobtopia.coolghosthost.com, however my web browser ought to still think it’s on bobtopia.com

Setup Options

In the Workers editor, we’ll start a brand-new script with some standard configuration alternatives.

// keep an eye on all our blog endpoints here.
const myBlog = 
hostname: "bobtopia.coolghosthost.com",.
targetSubdirectory: " 

The script will proxy traffic from myBlog.targetSubdirectory to Bob’s hosted Ghost endpoint, myBlog.hostname We’ll speak about myBlog.assetsPathnames a little later.

Request Handlers

Next, we’ll include a demand handler:

 async function handleRequest( demand) 

addEventListener(" bring", occasion => 
event.respondWith( handleRequest( event.request)).
).

So far we’re just passing demands through handleRequest unmodified. Let’s make it do something:

async function handleRequest( demand) 

addEventListener(" bring", occasion => ).

In the above code, we included a conditional statement to deal with traffic to myBlog.targetSubdirectory Note that we’ve omitted our assistant functions here. The pertinent code lives inside the if block near the top of the function. The requestMatches helper checks if the incoming demand contains targetSubdirectory If it does, a request is made to myBlog.hostname to bring the HTML document which is gone back to the web browser.

When the web browser parses the HTML, it makes extra property demands needed by the file (believe images, stylesheets, and scripts). We’ll require another conditional statement to handle these sort of requests.

// if its blog possessions, get them.
if ([myBlog.assetsPathnames] some( requestMatches)) 
console.log(" this is an ask for blog site possessions", parsedUrl.pathname).
const assetUrl = request.url.replace( parsedUrl.hostname, myBlog.hostname);.

return fetch( assetUrl).

This similarly shaped block checks if the request matches any pathnames enumerated in myBlog.assetPathnames and brings the assets required to totally render the page. Properties occur to reside in / public and / possessions on a Ghost blog site. You’ll be able to identify your properties directories when you bring the HTML and see logs for scripts, images, and stylesheets.

The complete script with helper functions included is:

// keep an eye on all our blog endpoints here.
const myBlog = 
hostname: "bobtopia.coolghosthost.com",.
targetSubdirectory: "

async function handleRequest( request) 

addEventListener(" fetch", event => 
event.respondWith( handleRequest( event.request)).
).

Caveat

There is one essential caution about the existing implementation that bears discussing. This script will not work if your hosted service properties are stored in a folder that shares a name with a route on your root domain. For instance, if you’re serving possessions from the root directory site of your hosted service, any demand made to the bobtopia.com house page will be masked by these property requests, and the home page won’t fill.

The service here includes modifying the blog site possessions block to deal with property requests without utilizing courses. I’ll leave it to the reader to solve this, however a more general solution might involve changing myBlog.assetPathnames to myBlog.assetFileExtensions, which is a list of all possession file extensions (like.png and.css). Then, the assets obstruct would deal with requests which contain assetFileExtensions rather of assetPathnames

Conclusion

Bob is now delighting in the same SEO advantages as Alice after transforming his subdomains to subdirectories utilizing Cloudflare Employees. Bobs of the world, rejoice!

Intrigued in deploying a Cloudflare Worker without setting up a domain on Cloudflare? We’re making it much easier to get begun building serverless applications with custom-made subdomains on workers.dev If you’re already a Cloudflare customer, you can include Employees to your existing website here

Reserve a workers.dev subdomain