ProductUpdate

3 min read

Host a Quotion site in a subdirectory of your domain

Written by

QI

Qing

Creator, Quotion

Published on

6/4/2024

#ProductUpdate #SEO

The image showcases a website's blog page titled 'Explore Our Creative Universe: Insights & Inspirations' under the Acme Blog section. The webpage features a clean, modern design with a gradient background and a focus on industry news and resources. The URL bar displays 'www.awesomeapp.com/blog,' indicating the blog's address.

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

This image showcases the Cloudflare Workers dashboard, where users can create and manage serverless applications. The interface offers options to build applications from scratch or start with templates, including examples like 'Common Worker examples' and 'Text to Image.' The 'Create Worker' button is highlighted, inviting users to begin building their applications.

Create a worker

The image showcases the Cloudflare Workers interface, specifically the 'Deploy 'Hello World' script' section. It displays the code preview for a simple text response, allowing users to deploy a basic worker. The interface has a clean, modern design with a focus on functionality and ease of use.

2. Write worker code

The image showcases the Cloudflare Workers & Pages dashboard, specifically the 'Metrics' section for 'awesomeapplenotes.' It displays request data, including the total requests, errors, and subrequests, along with a graph visualizing requests per second. The 'Edit Code' button is prominently displayed, indicating the ability to modify the worker's code.

The image showcases a Cloudflare worker script within the workers.dev interface, specifically the 'worker.js' file. The code is designed to proxy requests, with a focus on rewriting the host and handling specific paths like '/blog.' The script includes a comment prompting the user to replace the domain and subdirectory for proper functionality.

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:

This image showcases the Cloudflare Workers & Pages settings interface, specifically the 'Routes' configuration. The user is in the process of adding a new route, defining the URL pattern and zone for their worker. The interface highlights the immediate effect of route changes and the need for a fetch event listener.

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.

This screenshot showcases the 'Domain' settings within the Quotion platform, focusing on custom domain configuration. It provides instructions for setting up an A Record and URL prefix, guiding users through the process of connecting their domain. The interface is clean and user-friendly, with clear instructions and a helpful 'Save' button.

🎉 Congratulations! All pages should work as expected.

Have issues?

Feel free to contact support.

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.

Subscribe to Quotion

Get the latest posts delivered to your inbox. No spam, unsubscribe anytime.

We care about your data in our privacy policy.

Latest

More from the site