How to create a custom website with Notion for free
At Reboot we are huge fans of Notion and we use it internally for many things as we have already showed in other articles. Today we are going to explain how we have created a website with Notion for our Playbook using a custom domain, multi-language content and, the best of all, completely free.
When creating our Playbook we wanted to be able to update the content quickly and easily since it is not written in stone and it evolves as the company does. We also needed something that did not take us too long to develop in order to focus our efforts on other parts of the webpage.
Notion is perfect for this since it allows us to create public pages where we can update content from an environment that we like and access on a daily basis. In fact, if this is the only thing you need, you can just share publicly your Notion directory and you will be done.
But since we didn't like having the Notion domain with unfriendly urls, we decided to go one step further and enable access through a custom domain. This requires a couple of extra steps, but in this post we will show you how to do it simply.
In order to create our website in Notion and access from our own domain we need the following tools:
Once we have the accounts created we can start configuring them.
The first thing we have to do is creating a public Notion page. To do this we just have to click on the Share option and enable the "Share to web" option. This will give us a url that, if we have a PRO account, we can also enable the search engine indexing option.
From here on, the design and content you create on the page is up to you. However, a small recommendation is to use the table structure for content organization since it scales much better on screens of different sizes.
In our particular case we not only have the Playbook in Spanish but also in English, so we have a duplicated version on a separate public page. Both are within a page called Public simply to be clear about what content is publicly accessible within our workspace.
Once we have our page in Notion, it is time to configure the Cloudflare account since this is where the magic happens. In this article we are not going to cover how to create a Cloudflare account and link it to our domain provider, but in the Fruitionsite guide they explain it in a simple way through screenshots.
If you prefer, you also have it on video starting at minute 3:36 https://www.youtube.com/watch?v=aw0x54PzCaI.
To create the worker we have to access the Workers menu accessible from the top icon bar in our account. Inside the Workers page we will click on "Manage Workers".
To create the new worker, click on "Create a Worker".
We simply have to copy and paste the upper script and modify it with our data and preferences.
There are 5 main modifications that we can apply to the script to adapt it to what we need, these are quoted in the code as "Step X", but we are going to see them one by one.
You can modify the script according to the needs you have. In fact, the script that we use in our webpage is exactly the one that we have added in the article.
Finally, in order to have our worker active we have to link it to a route, we can do this from the main Workers screen by clicking on "Add Route" where the following menu will appear.
Here we have to select the worker that we just created, and write the path where we want it to run. In most cases the path is the same as the one we have included in the MY_DOMAIN const but with an asterisk at the end such that playbook.reboot.studio/* to indicate that it is executed on all paths that domain contains and not only in the root path.
Once we save we can access our website.
As we can see, thanks to Cloudflare and Notion we can create websites easily and quickly. We love this stack for pages such as FAQs, documentation or directories but with imagination and creativity we are sure that many other types of pages can be created.
If we want to skip the configuration of Clouflare, there are different services such as Super.so or hostnotion.co that allow us to do so out-of-the-box. In the case of Super, it adds some extra customization features that may be interesting.