zfsjlll

zfsjlll

趁着年轻,好好犯病

Notion Website Publishing and Domain Customization

image

My girlfriend wants to spend money in the game but is hesitant. After negotiation, we decided to establish a foundation with the money saved in daily life as the source of funds to meet her spending needs and related electronic entertainment needs.

Idea#

  1. Find a suitable accounting software. After understanding Alipay's couple's wallet and various accounting software on the market, I found that the functions are too complex and will cause unnecessary management expenses. Finally, I decided to use Notion's Database block, which allows for custom attributes and various layouts such as tables, lists, calendars, albums, etc., to meet the needs of customization while being lightweight.
  2. Share the real-time financial flow with my girlfriend, publish the Notion page as a website, and bind a custom domain name. This way, she can view it anytime on her mobile device by entering the domain name.

Steps#

  1. Use the Database block to record financial information.

Create a new page and type "/" to bring up the prompt list.

image

  1. Publish the Notion page as a website.

[Share] -> [Publish]

notion-publish

After successful publishing, configure the viewer's permissions for the website and click the 🔗 icon to copy the website link.

image

  1. Bind the Notion domain to a custom domain.

Use Cloudflare Worker to reverse proxy the custom domain to the Notion domain.

Configure Workers#

Log in to Cloudflare, click on the website domain to be bound, for example, 002724.xyz in the figure below.

image

Click on "Workers Routes" in the left navigation bar and then click "Manage Workers".

worker-route

"Set up a free custom Cloudflare Workers subdomain" and modify it as desired.

After completion, this interface will appear, continue to select the "Free" plan.

image

Click "Create Service".

image

The service name can be the same as mine, "notion-worker", for easy recognition when selecting the service later. Click "Create Service" to complete.

image

Generate Workers code using the website.

Open this website (requires VPN)https://fruition-stephenou.vercel.app/

First line: Your own domain (e.g. funds.002724.xyz)
Second line: Notion shared page link
The generated code is already available, click "COPIED!"

Here, my domain is the top-level domain 002724.xyz. If it is a subdomain, the "copy" condition will not be triggered. I guess this website is mainly used for Notion website building scripts, using the top-level domain directly as the website domain.
If the button is not triggered, you can directly copy the code below and fill in the information according to the comments.

image

Edit Workers Code#

Go back to Cloudflare, click on Workers, and click on Edit Code.

worker-edit

In the left code block, select all the code and delete it. Then, paste the code that was copied just now by pressing Ctrl+V. Finally, click "Save and Deploy".

image

Add a Route#

Click on "Workers Routes" and then click "Add Route".

image

[Subdomain].[Top-level domain]/*

* is a wildcard that matches any character.
For example, url.com/* matches all URLs starting with url.com/, such as url.com/abab, url.com/abab/cdcd, etc.

Select the Workers service name created earlier (the "notion" mentioned above).

image

Summary#

With this, we have achieved the use of Notion to record the source of funds and daily activities, and also published a website using a custom domain name for access. ヽ (✿゚▽゚) ノ

References#

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.