Accessing blog under a subdirectory of custom domain

Learn how you can access your blog under a subdirectory of a custom domain you own

Updated: October 24, 2024

5 mins read

To access a blog created on Stomod under your domain subdirectory, for e.g. thinkingtypes.com/blog, you need to set up a reverse proxy of some sort.

Depending on how your app is hosted, there are several options:

nginx reverse proxy

Apache reverse proxy

vercel.json or next.config.js rewrites

Cloudflare Worker rewrites

Nuxt 3 Rewrites

Configuring Stomod for Custom Domain with Subdirectory

Once you have created a blog and linked your Notion database to the blog, go to Settings → Domain Setup for the blog.

Access the Domain Setup page of your Stomod blog

From there, you will see the built-in .stomod.com subdomain your blog is configured to be accessible via. In our case for this tutorial, we can see that the blog is accessible via https://testcloudflare.stomod.com.

In the setting, to allow for the blog to be accessible via a subdirectory, choose the option Custom Domain with Subdirectory from the Custom Domain Type and then in the subsequent fields, provide your domain and the folder under the domain where the blog will be accessible.

In our case, the custom domain is thinkingtypes.com and the custom domain subdirectory is blog.

Once that is done, click on Save Settings to save your changes.

Cloudflare Worker Rewrites

With the first part of the setup done on Stomod, we move to the second part of the configuration which needs to be done on Cloudflare.

For this to work, your domain under which you want to host your blog needs to be proxied via Cloudflare, i.e. Cloudflare is your domain DNS manager. If you have not done that yet, see this Cloudflare tutorial on adding a domain/site to Cloudflare.

Step 1: Create a Cloudflare Worker

From your Cloudflare top-level dashboard, navigate to Workers & Pages → Overview and click on Create to create your new worker.

On the subsequent page, click on “Create Worker” to get started.

Step 2: Setup the Worker

Give your worker a name in the next screen and click on Deploy. In this instance, we are calling the worker blog-rewriter.

Wait for the worker to deploy and then click on Edit Code on the next page.

Paste the following code in the worker.js file in the code editor. Ensure the targetHost variable is changed to the HTTPS url of your Stomod blog subdomain address.

In our case for this tutorial, the targetHost is set to https://testcloudflare.stomod.com

Note that the https:// is required so that the worker resolved using the right protocol.

JavaScript

export default {
  async fetch(request, env, ctx) {
    // Parse the incoming request URL
    const url = new URL(request.url);

    // Replace this by your Stomod blog subdomain URL
    const targetHost = 'https://testcloudflare.stomod.com';

    // Create a new URL object with the target host and the original path and query
    const targetUrl = new URL(url.pathname + url.search, targetHost);

    // Forward the request to the target URL.
    // You might want to clone the request to modify its headers for the target endpoint.
    const init = {
      method: request.method,
      headers: request.headers,
      // If the request method is not GET or HEAD, forward the body as well.
      body: request.method === 'GET' || request.method === 'HEAD' ? undefined : request.body
    };

    // Make the fetch request to the target URL
    const response = await fetch(targetUrl, init);

    // Return the response from the target URL to the original requester
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: response.headers
    });
  },
};

Once you have made the changes, click on Deploy to update the worker.

Step 3: Add Route to Trigger the Worker

For the worker you just created, access it’s Settings page and under Domains & Routes, click on Add to add a new route which will trigger the worker.

Select Route to map a URL pattern to your worker as shown below:

Choose the Zone as the domain under which you want to host your Stomod blog within a subdirectory. In the route, enter the domain with the subdirectory path under which you want to host your blog (without https://).

For our e.g. we want to host our blog under thinkingtypes.com/blog - the route will be thinkingtypes.com/blog* - take note of the * present at the end.

This is how it should look on the configuration page:

Once your have entered the value, click on Add Route to add this config. The newly added route should show up under Domains & Routes as shown below:

If all went well, you should be able to now access your blog at the configured custom domain and subdirectory - in our case here thinkingtypes.com/blog:

Nuxt 3 Rewrites

Nuxt 3 uses Nitro under the hood, which provides the routeRules config that can be used to proxy requests from one route to another.

To do this, add the following routeRules to your nuxt.config.ts file:

JavaScript

// nuxt.config.ts
export default defineNuxtConfig({
    routeRules: {
        '/blog/**': { proxy: 'https://testcloudflare.stomod.com/**' },
    },
});

Deploy your changes and test the rewrite by accessing the domain address your configured.

Was this resource helpful?

Using a custom domain

Adding custom CSS to your blog