Deploy your notion site on a custom domain 😎👌🔥🚀🔥👨‍🚀

Notion is a great tool for keeping track of stuff and organising your life. It’s marketed as a productivity tool which it sort of is. I’ve been using it as of late for journaling. The functionality, aesthetics and extensibility have been very impressive. I especially like the emoji integration 🙆. I talk about how you can extend Notion and use it with a custom domain in this article.

TLDR

Get notion site and custom domain, use cloudflare worker to redirect traffic to said domain. Enjoy

What is Notion?

Notion is a workspace/spreadsheet/database thing. I basically as a replacement to a physical journal, both for work and personal stuff. Given my bad memory it helps me keep track of things and stay accountable. I also built a side project on notion and deployed it. Notion actually works as a pretty handy CMS. The video above should give you an idea. I’ve been loving it but a major drawback I’ve found is the lack of an officially supported way to deploy your site onto a custom domain. The closest available feature deploys your site with a .notionsite prefix which is not very pretty. There are paid services out there that’ll do this for you but I’ll be showing you how to do it yourself and for free. Read on to find out more

Getting a Domain

There are many ways to do this. I would suggest going with a reputable domain provider, my preference and what I would recommend is to go through namecheap. They have decent customer service and a pretty simple UI. Just hop on, search for a domain you would like and purchase it

Domain names can range from a few cents to thousands of dollars depending on popularity. It doesn’t really matter where you get your domain from as long as you have access to the DNS settings so go with what you are familiar with

Getting, deploying a Notion Site

Hop onto notion and create an account. There are plenty of resources online on how to get set up with notion which i won’t go through here. All that matters is your notion site is deployed or “shared to web” as notion terms it. Below is an example of how your’s might look. Make sure the share to web toggle button is selected

Link Notion site to Custom Domain

Now you have a notion site deployed at a domain generated by notion. This might look something like this

https://surfskate.notion.site/SurfSkate-Things-SG-0ac1b2287a6a486da5ad7cfaf34d17ba

Not the prettiest huh, let’s get that fixed. We’ll do that by letting cloudflare handle DNS and with a cloudflare worker.

1) Add your domain to Cloudflare

Add your previously purchased domain to cloudflare and choose a free plan.

2) Point your domain registrar’s DNS to cloudflare

Cloudflare should detect your registrar provide the necessary instructions. These are the steps if you use namecheap. It might take a while for the changes to propogate so don’t worry if the changes don’t immediately reflect

4) Set up worker

Go to the workers page and create a service. Proceed with the HTTP handler option

Now a worker has been created. Select quick edit and paste the script below

This script is the meat of the solution. It will redirect the traffic through your custom domain. I have it setup for my notion site surfskate.io like this. Below is the script, be sure to add your own variables (domain name, notion id, etc). The comments should be quite self explanatory, credit to Vic Shóstak.

• Click Save and Deploy.
• Go to the Workers page and select Add Route.
• Place your-domain.com/* (or subdomain.your-domain.com/*, if you would like to use a subdomain) as the Route and select the Worker you just created.
• Click Save button. *

That’ all folks

Your notion site url should now be using your custom domain and look pretty. No difference to the content of the notion site. Might not look like a big deal but it’s the little things that make a difference 😎. Here’s a side by side

Feel free to drop me a line if you have any questions.