How to deploy cloudflare pages to a subdirectory

Subdomain Vs Subdirectory

You can setup a subpage on your site (ex. a blog) from subdomain (like blog.incognitomail.co) or from a subdirectory (like incognitomail.co/blog).

Google says using a subdomain doesn't impact SEO, however it is generally believed that serving from subdirectory is better from SEO.

When you launch a subdomain, it's treated with impartiality compared to the root domain if both are starting from scratch. Essentially, both subdomains and root domains are initially on equal footing regarding SEO potential.

However, the situation changes with established domains. If you introduce a new subdomain to a well-established root domain, they do not start on equal ground. The root domain already has a history of credibility and traffic, which the new subdomain lacks.

What we want to achieve?

Currently I use cloudflare pages to deploy my temp mail service on incognitomail.co. I also wanted to have a blog for my service. However I wanted to use some existing nextjs template applications available instead of starting from scratch. So had to create a different cloudflare page for the blog. Currently cloudflare doesn't support serving a subpath to a domain from a different cloudflare page. So serving all paths except /blog from the main cloudflare page and serving /blog from a different cloudflare page is not natively supported. To support something like this, we would need to use cloudflare workers which gets triggered on certain paths. So here is how we can support that.

Updating nextjs project to support subpath

Note: I am using nextjs static export so this is all based on that. I haven't tested on nextjs deployed application but most likely should work.

In your next.config.js file, you will need to add following config to tell nextjs to generate the correct paths for client side links (Read more about the config here ).

module.exports = {
  basePath: '/blog',
}

Once that is done, for local testing you will need to test by appending /blog to url. However once deployed to cloudflare, this will all fill natural.

Deploying the blog

Deploying is same as deploying any other cloudflare page. Once deployed, you can test if it is working correctly by visitng the webpage (by appending /blog to main domain).

Configuring cloud flare workers

This is where main magic comes in. We will write code which gets triggered for certain path. The code will basically fetch requested page from our configured blog page and return response as if it is being served from the reqested path.

Start by creating a new cloudflare worker.

This is example code you can use.

export default {
  async fetch(request) {
    async function MethodNotAllowed(request) {
      return new Response(`Method ${request.method} not allowed.`, {
        status: 405,
        headers: {
          Allow: "GET",
        },
      });
    }
    // Only GET requests work with this proxy.
    if (request.method !== "GET") return MethodNotAllowed(request);

    // Get the URL that was just requested.
    const url = new URL(request.url);

    // Swap out the subdirectory with the subdomain to request the actual URL.
    const originUrl = url.toString().replace(
      'https://incognitomail.co/blog',
      'https://myblog.pages.dev'
    ).replace(
      'https://www.incognitomail.co/blog',
      'https://myblog.pages.dev'
    );

    // Fetch the origin.
    const originPage = await fetch(originUrl);

    // Return the subdomain, as the subdirectory.
    const newResponse = new Response(originPage.body, originPage);
    return newResponse;
  },
};

Now go to settings under cloudflare worker dashboard and select triggers.

Add a new route and have it setup as following

Once this is setup, any request for /blog/* on your main domain should be served from your blog page.

Conclusion

So using cloudflare workers and pages you can setup a subpath to be served from a different page than your main application. If it doesn't work or have questions email me at [email protected]. Try out our free temp mail service incognitomail.co and let me know how it goes. I will be bringing more tech blogs about how I built it in future.