Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notion.so > Personal Blog | custom domain + disqus comment
const MY_DOMAIN = "agodrich.com"
const START_PAGE = "https://www.notion.so/gatsby-starter-notion-2c5e3d685aa341088d4cd8daca52fcc2"
const DISQUS_SHORTNAME = "agodrich"
addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request))
})
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
}
function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
"Allow": "GET, HEAD, POST, PUT, OPTIONS",
}
})
}
}
async function fetchAndApply(request) {
if (request.method === "OPTIONS") {
return handleOptions(request)
}
let url = new URL(request.url)
let response
if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
// skip validation in app.js
response = await fetch(`https://www.notion.so${url.pathname}`)
let body = await response.text()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}
} else if ((url.pathname.startsWith("/api"))) {
// Forward API
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
// 301 redrict
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length - 1]}`
return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
if (DISQUS_SHORTNAME) {
// Delete CSP to load disqus content
response.headers.delete("Content-Security-Policy")
// add disqus comment component for every notion page
return new HTMLRewriter().on('body', new ElementHandler()).transform(response)
}
}
return response
}
class ElementHandler {
element(element) {
// An incoming element, such as `div`
element.append(`
<script>
let disqus = document.createElement("div")
disqus.id = "disqus_thread"
disqus.style.width = "100%"
var disqus_config = function () {
let pathList = window.location.pathname.split("-")
let pageID = pathList[pathList.length - 1]
this.page.url = window.location.href;
if (/^[\w]{32}$/.test(pageID)) {
this.page.identifier = pageID;
}else{
this.page.identifier = undefined;
}
};
(function () {
var d = document, s = d.createElement('script');
s.src = 'https://${DISQUS_SHORTNAME}.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
// if you want to hide some element, add the selector to hideEle Array
const hideEle = [
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar > div > div:nth-child(6)",
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar > div > div:nth-child(5)",
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar > div > div:nth-child(4)",
]
// if you want to replace some element, add the selector and innerHTML to replaceEle Object
const replaceEle = {
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar > div > div:nth-child(6)": "<span>agodrich<span>"
}
function hideElement(qs) {
let eles = document.querySelectorAll(qs)
eles && eles.forEach(ele => ele.style.display = "none")
}
function replaceElement(qs, _html) {
let ele = document.querySelector(qs)
if (ele) {
ele.innerHTML = _html
}
}
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let body = document.querySelector('body');
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
let pageContent = document.querySelector("#notion-app div.notion-page-content")
if (pageContent) {
if (pageContent.lastChild && pageContent.lastChild.id !== "disqus_thread") {
pageContent.append(disqus)
DISQUS.reset({ reload: true })
console.log(+new Date())
}
}
hideEle.forEach( hideE => hideElement(hideE) )
Object.entries(replaceEle).forEach( item => {
let [qs,_html] = item;
replaceEle(qs,_html)
})
});
});
observer.observe(body, { subtree: true, childList: true });
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
`, { html: Boolean })
console.log(`Incoming element: ${element.tagName}`)
}
comments(comment) {
// An incoming comment
}
text(text) {
// An incoming piece of text
}
}
@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Aug 16, 2019

Step

  1. changing your domain nameservers to Cloudflare
  2. add cloudflare worker script
  3. copy and paste this code, change line 1-3 for yourself
  4. map <yourdomain.com/*> to worker script
  5. done
    https://www.youtube.com/watch?v=id73Ordoh7o

FAQ

I get this msg "Mismatch between origin and baseUrl (dev).”

Enable https for your domain
image

Update

2020-1-11

Hi all guys ! Now this worker script supports disqus 🎉🎉🎉, and people can comment on your page. If you don't care about SEO, this is a good solution for personal blog with Notion.so
Here is a demo site, checkout it out 🎈🎈🎈
https://agodrich.com

@wohfab

This comment has been minimized.

Copy link

@wohfab wohfab commented Sep 19, 2019

What IP do I have to use for the DNS A record?

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Sep 19, 2019

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

@wohfab

This comment has been minimized.

Copy link

@wohfab wohfab commented Sep 19, 2019

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

Awesome! Thank you! Is this working with subdomains as well? Because I followed your instructions and do not get it to work.

@m-schmale

This comment has been minimized.

Copy link

@m-schmale m-schmale commented Sep 19, 2019

Unfortunately, the log in does not work. (HttpRequestError: "There was a problem logging in.")

@hankchizljaw

This comment has been minimized.

Copy link

@hankchizljaw hankchizljaw commented Sep 22, 2019

This is dope—thanks so much @mayneyao. Let it be known that you’ve empowered me to start a little Notion powered blog about cool stuff you can do with Notion and an article explaining how to do this is the first post on there: https://notion-tricks.com/Use-a-custom-domain-for-a-public-Notion-page-c65c2475c520432e8bd87195edf7c464

Again, thank you!

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Sep 22, 2019

This is dope—thanks so much @mayneyao. Let it be known that you’ve empowered me to start a little Notion powered blog about cool stuff you can do with Notion and an article explaining how to do this is the first post on there: https://notion-tricks.com/Use-a-custom-domain-for-a-public-Notion-page-c65c2475c520432e8bd87195edf7c464

Again, thank you!

My English is not well, so I can't explain clearly how to use it. Thanks for your work, your article is great and will help more people

@hankchizljaw

This comment has been minimized.

Copy link

@hankchizljaw hankchizljaw commented Sep 22, 2019

That would be great if it helps even one person out 🙂

@wohfab

This comment has been minimized.

Copy link

@wohfab wohfab commented Sep 23, 2019

This is dope—thanks so much @mayneyao. Let it be known that you’ve empowered me to start a little Notion powered blog about cool stuff you can do with Notion and an article explaining how to do this is the first post on there: https://notion-tricks.com/Use-a-custom-domain-for-a-public-Notion-page-c65c2475c520432e8bd87195edf7c464

Again, thank you!

Maybe you can help me out a little. So I follow all the steps to a point, but it won't work for me. The domain always redirects to the A Record I set in the DNS in Cloudflare. So my domain: https://wiki.fabianwohlgemuth.de won't lead to my notion page.

@cr-sh

This comment has been minimized.

Copy link

@cr-sh cr-sh commented Sep 23, 2019

brilliant

@hankchizljaw

This comment has been minimized.

Copy link

@hankchizljaw hankchizljaw commented Sep 23, 2019

This is dope—thanks so much @mayneyao. Let it be known that you’ve empowered me to start a little Notion powered blog about cool stuff you can do with Notion and an article explaining how to do this is the first post on there: https://notion-tricks.com/Use-a-custom-domain-for-a-public-Notion-page-c65c2475c520432e8bd87195edf7c464
Again, thank you!

Maybe you can help me out a little. So I follow all the steps to a point, but it won't work for me. The domain always redirects to the A Record I set in the DNS in Cloudflare. So my domain: https://wiki.fabianwohlgemuth.de won't lead to my notion page.

Ah I'm really not sure I'm araid, mate. Have you set a route up for your worker? And is it a wildcard one?

Other than that, I'm not really sure what'll be going on.

@m-schmale

This comment has been minimized.

Copy link

@m-schmale m-schmale commented Sep 24, 2019

That would be great if it helps even one person out slightly_smiling_face

Does the login work with your custom domain? Thanks

@hankchizljaw

This comment has been minimized.

Copy link

@hankchizljaw hankchizljaw commented Sep 24, 2019

It doesn't, unfortunately. It sends me the code to email, but errors at the point where I enter it.

@davidtsong

This comment has been minimized.

Copy link

@davidtsong davidtsong commented Oct 7, 2019

Notion errors out with "Mismatch between origin and baseUrl (dev)." during the worker preview. Any thoughts?

@davidtsong

This comment has been minimized.

Copy link

@davidtsong davidtsong commented Oct 7, 2019

Ah nvm, I think dns name servers are just taking a really long time to propagate

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Oct 7, 2019

Notion errors out with "Mismatch between origin and baseUrl (dev)." during the worker preview. Any thoughts?

Just open it in the browser

Ah nvm, I think dns name servers are just taking a really long time to propagate

Yes, it is. But it is acceptable.

@dalmo3

This comment has been minimized.

Copy link

@dalmo3 dalmo3 commented Oct 25, 2019

This is a really cool trick but be aware that anyone can publish any public page as if it were from your website:

For example I've just "hacked" @hankchizljaw's site: https://notion-tricks.com/A-public-page-5120bed05334404e8e23fa6ae4f71263

Maybe some sort of hash is needed to translate "mask" urls into notion endpoints, but I can't think of a solution at the moment.

@shuivin

This comment has been minimized.

Copy link

@shuivin shuivin commented Oct 27, 2019

您好,请问cloudflare 改版后,add a route 界面如下,该如何配置呢?
截图如下:
Snipaste_2019-10-27_18-26-07

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Oct 27, 2019

您好,请问cloudflare 改版后,add a route 界面如下,该如何配置呢?
截图如下:
Snipaste_2019-10-27_18-26-07

image

@hankchizljaw

This comment has been minimized.

Copy link

@hankchizljaw hankchizljaw commented Oct 28, 2019

Thanks for finding this @dalmo3. I'm not really sure what to do about this now. I'm not sure I understand what the server-side excludes rule does either, @shuivin?

@lucaberta

This comment has been minimized.

Copy link

@lucaberta lucaberta commented Nov 28, 2019

Great hack which I have just implemented as a test, with the idea of possibly rolling out a public website using this trick.

Two points I would like to make:

  1. I have created other rules to trap both the HTTP and the HTTPS URLs, and also the www and the non-www URLs, as follows:

Cloudflare rules

  1. I have noticed that the Cloudflare has a notice on the workers script editor page:

Cloudflare Workers Editor

The issue I have is that in the new workers editor, I am not sure that a normal domain can be used, as it seems that only the workers.dev domain can be used, except if you use the wrangler CLI utility to manage the process, read here:

https://developers.cloudflare.com/workers/quickstart/#publish-to-your-domain

I could be wrong, as I am not at all familiar with Cloudflare (I have just created my free account for this project!).

I'd love any comments on this.

谢谢

@lucaberta

This comment has been minimized.

Copy link

@lucaberta lucaberta commented Nov 28, 2019

As an update to what I wrote above, the route rules can be simplified by creating only one single line like so:

Cloudflare Workers #2

Basically the first asterisk catches the HTTP and HTTPS calls AND also any instances of having the URL start with www or only with the domain name without www.

Works perfectly in my test setup!

More documentation can be found here:
https://developers.cloudflare.com/workers/about/routes/

@sanchittechnogeek

This comment has been minimized.

Copy link

@sanchittechnogeek sanchittechnogeek commented Jan 4, 2020

This is awesome! @mayneyao

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Jan 11, 2020

2020-1-11 Update

Hi all guys ! Now this worker script supports disqus 🎉🎉🎉, and people can comment on your page. If you don't care about SEO, this is a good solution for personal blog with Notion.so

Here is a demo site, checkout it out 🎈🎈🎈
https://agodrich.com

@devshawn

This comment has been minimized.

Copy link

@devshawn devshawn commented Jan 17, 2020

I'm trying to get this to work outside of Cloudflare, using a Java application working as a proxy. I have everything mostly working but I can't seem to get past the following error:

Mismatch between origin and baseUrl (dev).

Do you have info on how you bypassed this?

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Jan 17, 2020

I'm trying to get this to work outside of Cloudflare, using a Java application working as a proxy. I have everything mostly working but I can't seem to get past the following error:

Mismatch between origin and baseUrl (dev).

Do you have info on how you bypassed this?

https://gist.github.com/mayneyao/b9fefc9625b76f70488e5d8c2a99315d#file-notion2blog-js-L39-L45 replace notion's domain with your own domian in app.[hash].js.

PS: HTTPS Required

@drewbrolik

This comment has been minimized.

Copy link

@drewbrolik drewbrolik commented Jan 24, 2020

Awesome! Thank you! Is this working with subdomains as well? Because I followed your instructions and do not get it to work.

@wohfab, this worked for me on a subdomain, using an arbitrary A record for the subdomain. Not sure if you got yours up, but wanted to rule that out for other people.

@SafEight

This comment has been minimized.

Copy link

@SafEight SafEight commented Jan 29, 2020

Thanks for this guide, it works perfectly!
I tried to figure out how to remove the notion logo in the top-right using the HTMLRewriter, but I couldn't figure it out. Would you have any idea how that could be done?

@dalmo3

This comment has been minimized.

Copy link

@dalmo3 dalmo3 commented Jan 29, 2020

Thanks for this guide, it works perfectly!
I tried to figure out how to remove the notion logo in the top-right using the HTMLRewriter, but I couldn't figure it out. Would you have any idea how that could be done?

Maybe block the request for the logo file?

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Jan 30, 2020

Thanks for this guide, it works perfectly!
I tried to figure out how to remove the notion logo in the top-right using the HTMLRewriter, but I couldn't figure it out. Would you have any idea how that could be done?

Notion web is a single-page application. it's difficult to inject code into React. So we just make some change after React render. I update the gist check it out.
https://gist.github.com/mayneyao/b9fefc9625b76f70488e5d8c2a99315d/revisions#diff-2261531acebf89aff92d172ca23d586c

@SafEight

This comment has been minimized.

Copy link

@SafEight SafEight commented Jan 30, 2020

Notion web is a single-page application. it's difficult to inject code into React. So we just make some change after React render. I update the gist check it out.
https://gist.github.com/mayneyao/b9fefc9625b76f70488e5d8c2a99315d/revisions#diff-2261531acebf89aff92d172ca23d586c

🥳 It works exactly how I wanted. xièxiè ni!

@cr-sh

This comment has been minimized.

Copy link

@cr-sh cr-sh commented Jan 31, 2020

This is a really cool trick but be aware that anyone can publish any public page as if it were from your website:
For example I've just "hacked" @hankchizljaw's site: https://notion-tricks.com/A-public-page-5120bed05334404e8e23fa6ae4f71263
Maybe some sort of hash is needed to translate "mask" urls into notion endpoints, but I can't think of a solution at the moment.

have you found any solution to this?

@dalmo3

This comment has been minimized.

Copy link

@dalmo3 dalmo3 commented Feb 1, 2020

This is a really cool trick but be aware that anyone can publish any public page as if it were from your website:
For example I've just "hacked" @hankchizljaw's site: https://notion-tricks.com/A-public-page-5120bed05334404e8e23fa6ae4f71263
Maybe some sort of hash is needed to translate "mask" urls into notion endpoints, but I can't think of a solution at the moment.

have you found any solution to this?

Haven't tried, and have no intention to do so anymore. Notion public pages don't hold the /<workspace>/ part of the url, nor there's any other identifier on the DOM, so the only way I see is to manually create a list of all your public pages' uuid and only allow access to those.

@evgeny-kh

This comment has been minimized.

Copy link

@evgeny-kh evgeny-kh commented Feb 5, 2020

Hey, thank you for the script. Worked just fine for me. The only thing that bothers me is Disqus error message in the end of the page
Disqus 无法加载。如果您是管理员,请参阅故障排除指南。
How do I get rid of it? I'm not even into Using Disqus.

@SafEight

This comment has been minimized.

Copy link

@SafEight SafEight commented Feb 5, 2020

Hey, thank you for the script. Worked just fine for me. The only thing that bothers me is Disqus error message in the end of the page
Disqus 无法加载。如果您是管理员,请参阅故障排除指南。
How do I get rid of it? I'm not even into Using Disqus.

Take a look at my fork, it has the Notion logo removed and no Disqus functionality.

@persvensson1337

This comment has been minimized.

Copy link

@persvensson1337 persvensson1337 commented Feb 7, 2020

Hey, thank you for the script. Worked just fine for me. The only thing that bothers me is Disqus error message in the end of the page
Disqus 无法加载。如果您是管理员,请参阅故障排除指南。
How do I get rid of it? I'm not even into Using Disqus.

Take a look at my fork, it has the Notion logo removed and no Disqus functionality.

Love this. Something that would make this complete is the possibility to show a custom favicon.

@StrongMentalCarp

This comment has been minimized.

Copy link

@StrongMentalCarp StrongMentalCarp commented Feb 16, 2020

Thank you for the code. Domain connects well.

But there's a problem with me.
When I apply this code and use custom domain, the number of "Requests today" goes up very quickly.
("Requests today" is on Worker's Dashboard)

About 1,000 requests have been filled by me looking my domain 1 hour.
How I can solve this?

@JayHoltslander

This comment has been minimized.

Copy link

@JayHoltslander JayHoltslander commented Feb 17, 2020

When I apply this code and use custom domain, the number of "Requests today" goes up very quickly.
("Requests today" is on Worker's Dashboard)

About 1,000 requests have been filled by me looking my domain 1 hour.
How I can solve this?

This might help?

@SafEight

This comment has been minimized.

Copy link

@SafEight SafEight commented Feb 22, 2020

When trying to download files stored in fileblocks from a custom notion demain, the downloads are routed through cloudflare, resulting in the download finishing too soon and the file being corrupted.

Is it possible to make it so that clicking files will download from notion.so/signed/, instead of customdomain.com/signed/ ?

@vasubhatia

This comment has been minimized.

Copy link

@vasubhatia vasubhatia commented Mar 5, 2020

Can anyone share a screenshot of their DNS records on cloudflare? Are you guys creating some redirect to www in page rules? I can't get this to work properly for some reason.

@vasubhatia

This comment has been minimized.

Copy link

@vasubhatia vasubhatia commented Mar 5, 2020

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

Also, I realised that your website has a similar issue to mine. https://agodrich.com works but not https://www.agodrich.com
I have been scratching my head over trying to fix this but there always seems to be some or the other error.
My worker redirect is .[sitename].com/

@pabliqe

This comment has been minimized.

Copy link

@pabliqe pabliqe commented Mar 6, 2020

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

Also, I realised that your website has a similar issue to mine. https://agodrich.com works but not https://www.agodrich.com
I have been scratching my head over trying to fix this but there always seems to be some or the other error.
My worker redirect is .[sitename].com/

I'm not currently using www but make sure that your DNS are receiving both @ (A) and www. (CNAME)

@pabliqe

This comment has been minimized.

Copy link

@pabliqe pabliqe commented Mar 6, 2020

Hey, thank you for the script. Worked just fine for me. The only thing that bothers me is Disqus error message in the end of the page
Disqus 无法加载。如果您是管理员,请参阅故障排除指南。
How do I get rid of it? I'm not even into Using Disqus.

Take a look at my fork, it has the Notion logo removed and no Disqus functionality.

Love this. Something that would make this complete is the possibility to show a custom favicon.

I almost sure that setting Page Icon with emojis and or custom images are printed as favicon on the other side.

@mayneyao

This comment has been minimized.

Copy link
Owner Author

@mayneyao mayneyao commented Mar 14, 2020

Added multiple custom domains mapping to multiple notion public pages in single worker in above fork.

good job 👍

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented Mar 27, 2020

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

Also, I realised that your website has a similar issue to mine. https://agodrich.com works but not https://www.agodrich.com
I have been scratching my head over trying to fix this but there always seems to be some or the other error.
My worker redirect is .[sitename].com/

Just add another route e.g. "www.yourdomain.com/*" pointing to the same worker. It worked for me.

@phongtran0715

This comment has been minimized.

Copy link

@phongtran0715 phongtran0715 commented Apr 12, 2020

What IP do I have to use for the DNS A record?

No matter what IP is , it only needs to be proxied by Cloudflare. When a user accesses your domain, it will render the content from the worker and will not access IP.

Also, I realised that your website has a similar issue to mine. https://agodrich.com works but not https://www.agodrich.com
I have been scratching my head over trying to fix this but there always seems to be some or the other error.
My worker redirect is .[sitename].com/

Just add another route e.g. "www.yourdomain.com/*" pointing to the same worker. It worked for me.

It worked for me. Thank you so much @edgarascom!

@HunterHeston

This comment has been minimized.

Copy link

@HunterHeston HunterHeston commented May 3, 2020

First off thank you, this is awesome.

Followed the instructions and it's all working. The only issue I'm having is that it doesn't seem to work on firefox desktop.
Screen Shot 2020-05-03 at 1 40 17 PM

Works on every other browser I've tried: safari, chrome(desktop/mobile), Vivaldi, and firefox(mobile).

It should be noted that I'm using Firefox developer edition.

@stephenou

This comment has been minimized.

Copy link

@stephenou stephenou commented May 7, 2020

Hey Mayne, thank you for making this script public.

I made an improvement to allow pretty URL slugs so you can have clean URLs (i.e. no annoying long IDs in the URL) as well as custom slugs like example.org/about for subpages.

If anyone's interested: https://github.com/stephenou/fruitionsite & http://fruitionsite.com

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented May 7, 2020

@stepenou this is amazing! That's the main thing I was missing, custom slugs, so if I want to change my system at some point, no links would ever brake!

One thing, if I go 2 levels deep into sub-pages, I still get the ugly slug:
https://fruitionsite.com/Fruition-3d694da045a745b0a36708fb5e6d09d8

Every slug must be registered somewhere right?

@olamoller

This comment has been minimized.

Copy link

@olamoller olamoller commented May 7, 2020

Thanks a lot, love this script! Think one optimal thing would be if it also hides the occasional "What's new" banner that Notion puts up.

@quicklywilliam

This comment has been minimized.

Copy link

@quicklywilliam quicklywilliam commented May 8, 2020

Not sure if this is part of the new custom slugs feature, but I noticed that this doesn't play nicely with the share function on iOS. For example, @stephenou's website redirects to https://fruitionsite.com/fruitionsite.com 🤔

@lucaberta

This comment has been minimized.

Copy link

@lucaberta lucaberta commented May 8, 2020

Great job @stephenou!

I have copy-pasted the latest 3 comments by @edgarascom @olamoller @quicklywilliam in this gist as issues on your repo so they can be addressed there as part of the fruition repo at https://github.com/stephenou/fruitionsite, and not together with the original gist by @mayneyao.

I have just implemented your worker in a test scenario, replacing the previous one, and it worked immediately. Very happy for what you have achieved and shared, thanks!

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented May 12, 2020

Thanks @lucaberta!

@jdmaresco

This comment has been minimized.

Copy link

@jdmaresco jdmaresco commented May 24, 2020

When I apply this code and use custom domain, the number of "Requests today" goes up very quickly.
("Requests today" is on Worker's Dashboard)

About 1,000 requests have been filled by me looking my domain 1 hour.
How I can solve this?

@StrongMentalCarp – how did you end up resolving this?

I'm having the same issue after setting up based on the instructions at https://fruitionsite.com/ (which is basically an interactive tool with source code forked from this gist). I'm getting about 1-2 RPS steady state. It feels like there's an infinite loop somewhere.

  • I have 3 DNS A records set up: (*, www, and a 3rd subdomain)
  • I have 2 routes (*.<domain>/* and <domain>/*)
@vasubhatia

This comment has been minimized.

Copy link

@vasubhatia vasubhatia commented May 24, 2020

When I apply this code and use custom domain, the number of "Requests today" goes up very quickly.
("Requests today" is on Worker's Dashboard)
About 1,000 requests have been filled by me looking my domain 1 hour.
How I can solve this?

@StrongMentalCarp – how did you end up resolving this?

I'm having the same issue after setting up based on the instructions at https://fruitionsite.com/ (which is basically an interactive tool with source code forked from this gist). I'm getting about 1-2 RPS steady state. It feels like there's an infinite loop somewhere.

  • I have 3 DNS A records set up: (*, www, and a 3rd subdomain)
  • I have 2 routes (*.<domain>/* and <domain>/*)

You need to create the proper DNS records and set the script and rules accordingly. Here are the steps to follow:

  1. Delete all the existing DNS records
  2. Create this A record: Name: @ Content: 1.1.1.1 Click on the proxy status and select it as DNS ONLY (IMPORTANT)
  3. 2nd A record: Name: www Content: 1.1.1.1 The proxy status for this is supposed to be Proxied(enabled by default)
  4. Go to Page Rules and create a new page rule:
    (Assuming the site's name is example.com)
    a) Set the site name as example.com
    b) Select the rule type as Forwarding URL
    c) Select the status code as 301 Permanent redirect
    d) Enter the destination URL as https://www.example.com
  5. Use fruition to create the script, when it asks you for the domain, enter the domain as www.example.com (Follow the fruition instructions on how to create a worker and all if you haven't done that already)
  6. When you create the route, make sure you create the route for www.example.com/*

Now, when you type in example.com in the address bar, you site would be redirecting to http://www.example.com

@jdmaresco

This comment has been minimized.

Copy link

@jdmaresco jdmaresco commented May 24, 2020

@vasubhatia thank you for chiming in. A few questions:

  • What's the logic for proxying some A records and not others?
  • I want a custom subdomain to be the canonical URL for the site (not www.), so www and root domains should redirect there
    • I previously changed MY_DOMAIN in the generated script to sub.domain.com because the Fruition generator doesn't support subdomains
  • What's the difference between using a page rule to forward to the site vs just creating multiple routes and pointing them all the worker?
  • Do you know what might be causing the looping I'm seeing?
@jamalx31

This comment has been minimized.

Copy link

@jamalx31 jamalx31 commented Jun 15, 2020

Thanks for this.
i'm trying to follow the instractions from Fruition with sub domain but when but I keep getting DNS_PROBE_FINISHED_NXDOMAIN when try to access sub.domain.io

@alexfur

This comment has been minimized.

Copy link

@alexfur alexfur commented Jun 22, 2020

This is awesome! Can this method be used to get custom domains on other React-based platforms?

@fpenguin

This comment has been minimized.

Copy link

@fpenguin fpenguin commented Jun 24, 2020

I'm getting "ERR_TOO_MANY_REDIRECTS" error. :-(

I did notice that for me, the URL changes from domain.com -> domain.com/NotionPageID when I try with www.domain.com
where as, if I try without www, then I see from the browser tab, the URL does not show the Notion Page ID.

Any tips?

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented Jun 24, 2020

Make sure to set both routes "www.yourdomain.com/" and "yourdomain.com/".

Also, if you redirected domain recently, it might jus take some days to update your domain properly. There can be cache problems for few days with your internet provider. Try with mobile internet.

@fpenguin

This comment has been minimized.

Copy link

@fpenguin fpenguin commented Jun 24, 2020

I'm curious if I have my DNS settings incorrect.

From my registrar, I have 2 cloudflare nameservers : x.ns.cloudflare.com, y.ns.cloudflare.com

Do I need to have CNAME setup from cloudflare?
I originally had A and MX setup under the cloudflash DNS menu

A - mydomain.com - 1.1.1.1
MX - Google Apps for my emails

With 1.1.1.1 as the IP for A entry -> gave me error saying forbidden IP -> changed it to 220.181.38.148 which I saw from other Youtube video on custom notion domain -> but this time I get "Web server is returning an unknown error"

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented Jun 24, 2020

Nameservers sound right, if x and y is a correct word (I have different ones).

Regarding the DNS you don't need to set anything. If anything is set or empty it does not matter. The Workers ignore that.

@fpenguin

This comment has been minimized.

Copy link

@fpenguin fpenguin commented Jun 25, 2020

Thanks for help!

I was able to get rid of "Error 520 - Web server is returning an unknown error" by changing the Route setting.

BEFORE (single entry)
*.mydomain.com/*

AFTER (two entries)

mydomain.com/*
www.mydomain.com/*
@lucaberta

This comment has been minimized.

Copy link

@lucaberta lucaberta commented Jun 25, 2020

Make sure to set both routes "www.yourdomain.com/" and "yourdomain.com/".

you can achieve the same result by having one single rule using an asterisk, like I mentioned in this past comment:

https://gist.github.com/mayneyao/b9fefc9625b76f70488e5d8c2a99315d#gistcomment-3095515

@fpenguin

This comment has been minimized.

Copy link

@fpenguin fpenguin commented Jun 25, 2020

Make sure to set both routes "www.yourdomain.com/" and "yourdomain.com/".

you can achieve the same result by having one single rule using an asterisk, like I mentioned in this past comment:

https://gist.github.com/mayneyao/b9fefc9625b76f70488e5d8c2a99315d#gistcomment-3095515

In my case, it didn't work out.
Only after I have separated into two routes, I could get rid of 520 Error. I'm not too sure why.

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented Jun 25, 2020

Yeah with one, did not work for me either, that's why I put two. I never have any other *.mycomain.com case anyways.

@edgarasben

This comment has been minimized.

Copy link

@edgarasben edgarasben commented Jul 14, 2020

Hey, guys! I just moved my 2 domains to Porkbun and my site stopped working! Any ideas why? www.edgaras.com

@douglarek

This comment has been minimized.

Copy link

@douglarek douglarek commented Jul 23, 2020

VM42 0d54f02a6f8941648c9bf2a6c5fd8ba0:64 Uncaught TypeError: replaceEle is not a function
    at VM42 0d54f02a6f8941648c9bf2a6c5fd8ba0:64
    at Array.forEach (<anonymous>)
    at VM42 0d54f02a6f8941648c9bf2a6c5fd8ba0:62
    at Array.forEach (<anonymous>)
    at MutationObserver.<anonymous> (VM42 0d54f02a6f8941648c9bf2a6c5fd8ba0:52)
@douglarek

This comment has been minimized.

Copy link

@douglarek douglarek commented Jul 23, 2020

Please support disqus loading on demand, thanks

@naman1-gupta

This comment has been minimized.

Copy link

@naman1-gupta naman1-gupta commented Sep 5, 2020

In case someone is facing 4xx errors on their images, you can try appending the query search params on the url on Line 69

Example:
Old

response = await fetch(`https://www.notion.so${url.pathname}`, {
      body: request.body, // must match 'Content-Type' header
      headers: request.headers,
      method: request.method, // *GET, POST, PUT, DELETE, etc.
    })

New

response = await fetch(`https://www.notion.so${url.pathname}${url.search}`, {
      body: request.body, // must match 'Content-Type' header
      headers: request.headers,
      method: request.method, // *GET, POST, PUT, DELETE, etc.
    })
@nathankg

This comment has been minimized.

Copy link

@nathankg nathankg commented Sep 7, 2020

This was helpful, thanks @naman1-gupta

@stephenou

This comment has been minimized.

Copy link

@stephenou stephenou commented Sep 7, 2020

An alternative is to set url.host = 'www.notion.so and use url.toString() for all the URLs. This guarantees not only search params but also fragments are included: https://github.com/stephenou/fruitionsite/blob/master/worker.js#L87

@Issac-v

This comment has been minimized.

Copy link

@Issac-v Issac-v commented Sep 15, 2020

In case someone is facing 4xx errors on their images, you can try appending the query search params on the url on Line 69

Example:
Old

response = await fetch(`https://www.notion.so${url.pathname}`, {
      body: request.body, // must match 'Content-Type' header
      headers: request.headers,
      method: request.method, // *GET, POST, PUT, DELETE, etc.
    })

New

response = await fetch(`https://www.notion.so${url.pathname}${url.search}`, {
      body: request.body, // must match 'Content-Type' header
      headers: request.headers,
      method: request.method, // *GET, POST, PUT, DELETE, etc.
    })

This really solves the problem that pictures uploaded in notion cannot be opened, thx a lot!

@softmarshmallow

This comment has been minimized.

Copy link

@softmarshmallow softmarshmallow commented Nov 3, 2020

Need working example for subdomain! getting DNS_PROBE_FINISHED_NXDOMAIN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.