SEO

1 min read

Host a Quotion site in a subdirectory of your domain

Written By

QI

Qing

Creator, Quotion

Published on

6/4/2024

subdirectory_3c6297

You can host <your-site>.quotion.co in a subdirectory of your domain now.

Real-world examples:
https://quotion.co/blog (This blog)
https://www.awesomeapplenotes.com/blog

Before I dig into the details, you may wonder why do I need this?

Well, according to semrush, subdirectories have fully benefits from the backlinks, which is good for SEO.

Sounds wonderful? Let's get started!

0. Cloudflare domain

You need a Cloudflare domain first, go buy a domain if you don't have one.

1. Create a worker

Login to the Cloudflare dashboard

image_f2df31

Create a worker

image_f6d133

2. Write worker code

image_5e6cf3

image_ced94f

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.

3. 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:

image_b7d952

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.

4. 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.

CleanShot 2024-06-17 at 10.07.41@2x_dd98dc

🎉 Congratulations! All pages should work as expected.

Have issues?

Feel free to contact support.

SEO

Create your blogs directly from Apple Notes.

Say goodbye to complex CMS updates and management issues!

You focus on creating quality content while Quotion takes care of the rest.

Latest

More from the blog