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.

Why Notion

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.

Used tools

In order to create our website in Notion and access from our own domain we need the following tools:

  • Have a domain purchased with whatever provider you prefer.
  • A free account at Cloudflare.
  • A free account at Notion.

    • Once we have the accounts created we can start configuring them.

    Notion configuration

    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.

    Cloudflare configuration

    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.

    When we have our Cloudflare account we need a worker to point our domain to the url generated by Notion, so we can modify HTTP requests and responses by using JavaScript.

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

    Now that we have our worker created we have to replace the default Javascript code with our own one, which is the one that will allow us to manage the display logic of our Notion page.

    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.

  • Modify the domain name that we refer in the constant MY_DOMAIN. In our case we use the subdomain playbook.reboot.studio since the main domain points to our website.
  • We add the slugs of the Notion pages that we want to display in each route. In our case, in the root path we have mapped the slug of the Notion page with the Playbook in English and in the path /es we find the Playbook in Spanish. Depending on what you prefer, you can map more or fewer pages, in our case we only map the first level navigation and the rest use the default's Notion slug.
  • We add the title and description that we want for each page, these will be added to the meta tags so that they appear in the SERPS when our page is indexed.
  • Add the name of a font available in Google Fonts if we want to replace Notion's default font. This step is optional but highly recommended if we want to achieve a more custom touch.
  • Finally we can add custom scripts to our page to add additional tools such as Google Tag Manager or Intercom.

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

    Conclusions

    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.