DEV Community

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

🌐 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...
Collapse
 
mysterydigital profile image
MysteryDigital

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?

Collapse
 
koddr profile image
Vic Shóstak

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.

Collapse
 
krishkanabar profile image
Krishna kanabar • 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
Image description

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

Collapse
 
ianpalomaress profile image
ian?

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.

Collapse
 
koddr profile image
Vic Shóstak

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

Collapse
 
jair profile image
jair

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

Collapse
 
koddr profile image
Vic Shóstak • 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.

Collapse
 
jair profile image
jair

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

Collapse
 
connorforsyth profile image
Connor Forsyth

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:

Image description

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?

Collapse
 
connorforsyth profile image
Connor Forsyth

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

github.com/stephenou/fruitionsite/...

Collapse
 
persistventure profile image
Persist Venture

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.

Collapse
 
drmzio profile image
Danny ✪

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

Collapse
 
koddr profile image
Vic Shóstak

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.

Collapse
 
motorleague profile image
motorleague • 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.

  1. I've been able to enable Flexible SSL/TLS from the SSL/TLS section.
  2. 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.

Collapse
 
motorleague profile image
motorleague

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.

Collapse
 
truongoi profile image
Truong Nguyen

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

Collapse
 
koddr profile image
Vic Shóstak

Hi,

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

dns

Collapse
 
akshaybhasin profile image
Akshay Bhasin

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

Collapse
 
koddr profile image
Vic Shóstak

You're welcome 🤗

Collapse
 
huksley profile image
Ruslan Gainutdinov • Edited

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

Collapse
 
rutik_k_jadhav profile image
Rutik K. Jadhav

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

Collapse
 
koddr profile image
Vic Shóstak

Hi,

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

Collapse
 
pavelkatz profile image
Pavel Katz

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?