Host in Subdirectory

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

Why do I need this?

This setup fully benefits from your domain's backlinks, which is good for SEO.

How to enable subdirectory on Cloudflare

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

Have a domain on Cloudflare

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

Enable Cloudflare proxy

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

1. Log in to the Cloudflare dashboard

Cloudflare worker

3. Write worker code

Edit worker

Replace the default worker code with the following: 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 making changes.

4. Add worker routes

We need following routes to make proxy work:

/blog/* (your subdirectory)
/_next/* (for hosting Next.js static assets like JS/CSS)
/.quotion/* (for hosting images and APIs)

For instance, if your domain is www.awesomeapplenotes.com and you want to host your Quotion site at www.awesomeapplenotes.com/blog, you need to add the blog route like this:

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

After completing these steps, navigate to your subdirectory to verify that your blog's homepage is working.

5. Setup URL prefix in Quotion dashboard

To make post and tag pages work correctly, go to your Quotion dashboard > Your Site > Domain page, then set up the URL prefix. This prefix should match the subdirectory you created (e.g., https://www.awesomeapplenotes.com/blog).

URL prefix

You must input the complete URL, including the domain, so our analytics system can correctly match your domain (e.g., https://www.awesomeapplenotes.com/blog).

🎉 Congratulations! All pages should work as expected.

Having issues?

Feel free to contact support.

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