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
Create a worker
2. Write worker 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.
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:
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.
🎉 Congratulations! All pages should work as expected.
Have issues?
Feel free to contact support.
ProductUpdate
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
Qing
Launch your blog from Apple Notes in 4 simple steps
Do you know that you can turn Apple Notes into web pages? With Quotion, it's not only possible, but also surprisingly simple! In this tutorial, I'll walk you through the process of transforming your notes into blog posts using Quotion. TLDR 1. Sign up with Quotion First of all, you'll need a Quotion account.
Read post
Qing
ProductUpdate
Password protection
We're so excited to introduce a highly request feature: password protection! You can protect your whole site with a single password. Your site visitors must enter the password, then they can access all pages until they refresh the page, which will ask them to enter the password again. Demo Check out this live demo: How
Read post
Qing
ProductUpdate
Custom CSS is available in the Lite plan
Previously, custom CSS was only available in the Pro+ plan. Since many of our customers are coming from WordPress, which includes custom CSS in the entry-level plan, they expect Quotion to have a similar feature. Therefore, we have included this feature in the Lite plan to help them migrate to Quotion more smoothly. If
Read post