FeaturesHost in Subdirectory

Host a Quotion site in a subdirectory of your domain

Host <your-site>.quotion.co in a subdirectory of your domain. e.g. https://acme.com/blog.

Why do I need this?

It has fully benefits from the backlinks, which is good for SEO.

Subdomain vs. Subdirectory

How to enable subdirectory on Cloudflare

Follow these steps to proxy subdirectory requests to a Quotion site.

You must have a domain on Cloudflare first. You can buy a domain on Cloudflare, then back to this doc to continue.

⚠️

You must have Cloudflare proxy enabled, or it won’t work. Check the status here: Proxied

1. Login to the Cloudflare dashboard

Cloudflare worker

2. Create a new worker

Create worker

3. Write worker code

Edit worker

Replace it with this code: Code

export default {
  async fetch(request, env, ctx) {
    return proxyRequest(request);
  },
};
 
async function proxyRequest(request) {
  console.log(request.url);
  const originalUrl = new URL(request.url);
 
  // Redirect /blog/ to /blog
  if (originalUrl.pathname.endsWith('/') && originalUrl.pathname !== '/') {
    originalUrl.pathname = originalUrl.pathname.slice(0, -1);
    return Response.redirect(originalUrl.href, 301);
  }
 
  const host = originalUrl.host;
  try {
    // Use your quotion domain instead
    const blogHost = 'awesomeapplenotes.quotion.co';
    // Replace "blog" with your subdirectory name if needed
    const subdirectory = 'blog';
    const proxiedPaths = [subdirectory, '_next', '.quotion'];
    const url = new URL(request.url);
 
    if (
      proxiedPaths.some((path) => originalUrl.pathname.startsWith(`/${path}`))
    ) {
      // Rewrite host
      url.hostname = blogHost;
    }
    if (originalUrl.pathname.startsWith(`/${subdirectory}`)) {
      url.pathname = url.pathname.replace(`/${subdirectory}`, '');
    }
 
    const proxyRequest = new Request(url.href, request);
    proxyRequest.headers.set('X-Forwarded-Host', host);
    console.log(proxyRequest.url);
    return fetch(proxyRequest);
  } catch (e) {
    console.error('Proxy request failed', e);
    return fetch(request);
  }
}

Don’t forget to deploy the code after changing.

4. Add worker routes

We need following routes to make proxy work:

  • /blog* (your subdirectory)
  • /_next* (for hosting Next.js static js/css)
  • /.quotion* (for hosting images/APIs)

For instance, you have a domain named www.awesomeapplenotes.com, you want to host Quotion site on www.awesomeapplenotes.com/blog, you need to add blog route like this: Blog route

Repeat until you have added all /_next*, /.quotion* routes.

After you have done all these steps, you can go to your subdirectory to check if the blog home is working.

5. Setup URL prefix in Quotion dashboard

To make post/tag pages work, you need to go to Quotion dashboard > your site > Domain page, then setup the URL prefix. It should match the subdirectory you just made.

URL prefix

💡

You must input the whole URL including the domain, thus our analytics system can match your domain correctly.

🎉 Congratulations! All pages should work as expected.

Have issues?

Feel free to contact support.

💡

Build your blog with Apple Notes in less than 5 minutes! Try Quotion for free!