DEV Community

🌐 Using the Notion page as a personal website with your domain on Cloudflare

Vic Shóstak on March 17, 2021

Introduction Hi, DEV people! 🙂 Today, I give you a handy step-by-step guide to help you set up a Notion page on your domain with free se...

Read full post

MysteryDigital • Aug 22 '21

hiya, I created an account specifically to record an issue recently popping up which is the infamous "Mismatch between origin and baseUrl (dev)."

I tried following the instructions described when I googled the error here and the problem is persisting.

Could you provide any additional insight?

Vic Shóstak • Aug 23 '21

Hi,

Did you try to follow this instruction on Reddit?

You need to go in to Cloudflare workers and edit your script. Put your domain on line 4 and enter as "sitedomain.com"

Replacing sitedomain with your own domain. Click save and deploy.

Then go back and edit route. Change to ".sitedomain.com/" save it.

Then make sure your SSL is set to Flexible.

Krishna kanabar • Jul 24 '22 • Edited

I am getting the same error
My notion page link is: notion.so/test-fc3e5efb96dc46d182d...

Inside worker script:
const MY_DOMAIN = "wew.perpetualbeta.io";
const SLUG_TO_PAGE = {
"": "test-fc3e5efb96dc46d182d4dd7cc9028ec1", // main page
"about": "test-fc3e5efb96dc46d182d4dd7cc9028ec1", // page with about info
"blog": "test-fc3e5efb96dc46d182d4dd7cc9028ec1", // your blog page
"contact": "test-fc3e5efb96dc46d182d4dd7cc9028ec1", // feedback form
};

and so on...(all other code is same)

Inside Triggers/Add route
.perpetualbeta.io/

It's showing me error

when I open wew.perpetualbeta.io/fc3e5efb96dc4... It shows me this site can't be reached

ian? • Jul 2 '21

Hi Great content! Can you help me with something I'm trying hard to do? Do you know how can I style only the landing page? for example, I was trying to style the notion-page-content of the landing page, I turned the background into an image, but all the other pages inside the site was also affected.

I would be happy with your help.

Vic Shóstak • Aug 17 '21

Hi there!

Unfortunately, Notion doesn't allow for that much customization of its default pages. It can be done with additional JS code, as far as I know, but it will increase the time of opening your site and will not always look adequate before rendering.

It's better to use other tools for UI customization, and use Notion "as is" (IMHO).

jair • Sep 11 '21

excellent guide, when entering your website you have a common error these days called: dev

Vic Shóstak • Sep 12 '21 • Edited

Thanks for this reply! This happened because some changes applied and now you have to write the base URL of your site in the BodyRewriter class (as described here).

I added fix for this error to my article.

jair • Sep 12 '21

Yes that's right, thank you (Vic) very much for the information.

Connor Forsyth • Apr 13

Hey there,

I've created a starter website with this, but it seems to be having issues when opening on a mobile browser, I've noticed a few other sites using the same method who are experiencing similar issues.
Here's what I see when opening on mobile:

The error reads:

Hello, we've noticed an issue with your iOS app. Please delete this app and re-install it from the App Store.

Any ideas?

Connor Forsyth • Apr 16

Just in case anyone is poking around for the answer, here is the solution... add the following to your code:

github.com/stephenou/fruitionsite/...

Persist Venture • Nov 9 '22

I have domain and hosting plan on namecheap.

I want to host main domain files on namecheap and want to subdomain on cloudflrare. Is it possible?

like,
maindomain.com - hosted on namecheap
sub.maindomain.com - on cloudflare.

Thanks.

Danny ✪ • Dec 9 '21

Doesn't work anymore 🙁 Shows a message "Continue to external site by following the link below" when I go to the custom domain.

Vic Shóstak • Dec 9 '21

Hi,

Describe in more detail what you are doing. I checked the whole process described in my article and it works the same as it did before your post.

That is, the information in the article is up to date at the moment.

motorleague • Sep 3 '21 • Edited

Hey, thanks very much for writing this guide.

I'm not sure if maybe Cloudflare have changed their user interface recently, but I'm really struggling to find where some of these settings live. I added a domain a couple of weeks ago, and have now got my Name Server repointed.

I've been able to enable Flexible SSL/TLS from the SSL/TLS section.
In the Page Rules tab, I can set up Always Use HTTPS OR Auto Minify (but not both - the use of HTTPS prevents aplying any other rules), and Brotli seems to be missing completely).
1. On the Workers tab I can create a Route to the subdomain I'm planning to redirect first (I'm not sure if I would be setting up an A or CNAME Record first before I do this - maybe I should be setting up a URI record?), but it says "Workers are disabled on this route" and I can't see where I'm supposed to add the script?

Apologies for the stream of questions, have I missed something or have Cloudflare changed things around since this was written?

Edit: I've since been able to switch on both Always Use HTTPS AND Auto Minify, for the domain as a whole at least, from the Recommendation setting on domain Overview page.

motorleague • Sep 3 '21

Edit 2: Apologies, I misunderstood more than I thought - I thought the worked process had to be created against a sub-domain on my own domain, rather than just any random domain on **.workers.dev, so I chose a random one and was able to proceed further to adding the script.

I've added the worker process and I think assigned it to my own sub-domain - I'm not sure if it's redirecting correctly yet, but I may need to wait for DNS to propagate a bit more before I can fully troubleshoot it further as Cloudflare's NS don't seem to be responding for any DNS queries against it..

Please disregard the above and thanks once more for the guide.

Truong Nguyen • Jun 16 '21

how do you put in A-record for DNS Management page in Cloudflare?

Vic Shóstak • Jun 17 '21

Hi,

As always, go to DNS page and click button "Add record":

Akshay Bhasin • May 27 '21

Worked like a charm! Thanks, you saved me a lot of time!

Vic Shóstak • May 28 '21

You're welcome 🤗

Ruslan Gainutdinov • Jul 25 '22 • Edited

Here is a fix for "Continue to external site" github.com/stephenou/fruitionsite/...

Rutik K. Jadhav • Aug 6 '21

hey!

i tried, its sort of working. but it is showing my notion page as an external website. what do i do?

it says: Continue to external site by following the link below

Vic Shóstak • Aug 17 '21

Hi,

Can you tell me more about what you're getting and what you expect to get?

Pavel Katz • Apr 11 '22

Hi, is this solution working? For some reason I did everything as written, but my login window opens in Notion. Not the landing page. Do you know what could be the problem?