Preparation 1: Notion Page#
After setting up the page → Publish the page
Get the Notion link: https://www.notion.so/reddychen/d2550fd68abb4b05badc99e406f2c738
After publishing the Notion website, you can click on Site settings to make simple settings, such as uploading the website's logo, website theme colors, displaying function button switches, and SEO.
Actually, if you don't have any requirements for the domain name, you can just click on website publishing. Share the link and others will be able to access the website normally.
If you feel that the domain name assigned by Notion is not cool enough, and coincidentally you have a domain name and manage it with Cloudflare, and you want to tinker with it a bit more, then continue reading below👇
Preparation 2: Domain Name#
Create a subdomain under the main domain in Cloudflare.
Type: CNAME; Name, for example: gallery; Content: notion.so; Proxy status: Proxied.
Create Workers#
Create a Workers, enter a name (can be random, as long as it can be recognized), and click Deploy
Find "Edit code" on the right side and click to enter. It will become a screen like this, don't panic!
Open this website: https://fruition-stephenou.vercel.app/
Fruition is a free and open-source project that customizes the domain name for Notion pages using Cloudflare Workers.
Note, after copying, go back to Cloudflare, clear and delete the original code in the right editing box, and then paste the Fruition code into the right editing box, and click Deploy.
The Workers section is completed!
Set Workers Routes#
Click on Cloudflare to return to the domain name page and enter the interface when creating the subdomain in the first step.
I almost got lost here. The domain name Workers route and Workers are two different workspaces. The side navigation functions are obviously different, so don't get confused.
Select the Workers route that needs to be bound to the domain name → Add route. If you have two or more domain names, don't enter the wrong domain name.
Enter the domain name, pay attention to adding /* at the end of the URL. I didn't add it at first, and the webpage reported an error and couldn't display, so please add it! The worker is the Workers project that you deployed after pasting the code.
🎉 Workers route settings are completed. If nothing unexpected happens, you can access the Notion website normally through the custom link.
Summary of Custom Domain Deployment Process#
Notion design website publishing → Apply for a subdomain → Create Workers → Paste Fruition code into Workers and deploy → Go back to the domain name and add Workers routes
The principle is to deploy a Workers and then point the domain name to it.
The places where mistakes are more likely to occur are that beginners are prone to confusion between Workers and Workers routes, and when adding routes, they forget to add /* after the URL, which causes the webpage to not display properly.
Next preview: How to connect Obsidian and Notion, edit articles in Obsidian, and then publish articles to the website built with Notion in one click.
References#
https://fruition-stephenou.vercel.app/
https://dash.Cloudflare.com/3eb515cae1c2eee9d639d654a859e3d2/lenband.com/workers