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.
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.comNote 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?