Table of Contents
- Table of Contents
- Introduction
- Criteria for a website
- First of all - what is Notion?
- Basics
- Notion as a Database
- Use Cases
- Notion Community
- Mobile App
- Co-Create
- Notion as a website?
- ⚡Superhero of the day — Super.so
- 1. It's fast lightning-fast
- What about the article page?
- What about the mobile?
- 2. It's SEO-friendly
- URLs
- Sitemap
- Indexing speed & search ranking
- On-page SEO
- 3. It's easy to set up
- 4. It's customizable
- 5. It's easy to change styling (dynamic CSS)
- 6. Great text content formatting
- 7. Superior CMS capabilities — it's easy to manage content
- 8. It's easy to maintain — changes are applied immediately
- 9. It fits into your Notion ecosystem
- 10. Notion is constantly improving
- 11. It's not expensive
- 12. It's easy to migrate
- Cons
- Some pages can be slow on mobile
- Per Page SEO Settings
- Risk of changes in Notion core
- Super doesn't work with siblings pages
- Conclusion
- Appendix: Notion Static vs Notion Default loading speed
- Main Page (Mobile)
- Main Page (Desktop)
- Article Page (Mobile)
- Article Page (Desktop)
Introduction
In early 2021 I started thinking about a personal blog website to grow my digital presence.
Considering all the latest tech industry changes, I was hesitant to immediately stick to conventional options like WordPress and Webflow. Rather, I wanted to make a proper analysis of the currently available platforms on the market and substantiate my choice.
I wanted to make sure the solution not only covers my basic criteria for a website but also is the most technologically advanced.
I researched many viable options on the market, including Webflow, Notion, static site generators (e.g., Hugo, Jekyll), and WordPress.
Ultimately, I ended up choosing Notion based on a variety of factors.
Criteria for a website
Before jumping into analyzing Notion as a website, it's useful to define what we expect from a website in general.
I outlined the main aspects that were important for me in the future website:
- Performance — the website must be fast for desktop and mobile.
- SEO compatibility — website pages can be appropriately indexed by search engines.
- Flexibility — I can easily adjust the website's structure, layout and add extra components when needed.
- Maintainability — I can conveniently upload new content and make changes to the existing content.
Among other aspects, there are price, content formatting capabilities, and visual aesthetics (styling).
Now, using these criteria, we'll go through the Notion solution and see how it fits together.
First of all - what is Notion?
Basics
Notion is an application that provides components such as notes, databases, Kanban boards, wikis, calendars, and reminders. Users can connect these components to create their own systems for knowledge management, note-taking, data management, project management, among others. These components and systems can be used individually, or in collaboration with others. (c) Wikipedia
Notion, in its essence, is more than just a tool for a website or blog. It is a multifunctional platform that lets to create complex online systems and workflows. With Notion blocks, templates, and relations, you can build advanced systems, such as CRM and ERP, with minimum technical knowledge. You can also use it for more direct purposes like note-taking, task checklists, or documentation.
Notion as a Database
Notion at its core uses a relational model. This makes it an excellent tool for data management. You can create complex interconnected databases that are cloud-based with a few clicks of a button. It is also very dynamic — you can customize it to your needs, and the changes will reflect in real-time.
Use Cases
Notion has the functionality and flexibility to create complex and diverse systems using their existing blocks.
For example, you can create a basic operating system for a clothing manufacturer in about 1-2 hours in Notion. It will contain entities and databases for Products, Manufacturing Parts, Suppliers, Customers, and Orders that are interconnected. You can easily use this system in day-to-day company operations and scale it on the go.
Notion is great for dashboards, too. With its Kanban and Timeline views, you can create dynamic workflows and production pipelines.
Here are the other examples of things you can do in Notion:
- Startups & Companies: System docs, fundraising database, roadmaps, pitch deck, product wiki, content calendar, meeting notes, job board, CRM
- Recruitment: Employee onboarding and offboarding, campaign management, interview notes
- Personal: Travel planning, habit tracker, reading lists, resume, task lists, notes
- Students & Teachers: Class directory, lesson plans, class notes, syllabus, course schedule
See the bigger range of things you can build in Notion on their official templates gallery page.
Notion Community
Notion has an active and involved community of talented creators. Many of them use Notion's flexibility to create their own systems and templates. Some people build really sophisticated stuff, like August Bradley's complete life OS or Red Gregory's advanced formulas for interval progression.
With new ideas emerging every day, it proves yet undiscovered potential lying behind Notion functionality.
Mobile App
Despite the sophisticated nature of Notion systems, views, and tables, their mobile app serves decently for both reading and adding information.
Co-Create
The cherry on the top is that in Notion, you can create a shared workspace to collaborate with your peers.
It takes seconds to set up a KanBan board and start assigning people to tasks.
Notion as a website?
In Notion, each page has its unique URL and can be made public. Hence, you can already make a simple prototype of the website using Notion itself.
However, to make Notion pages available on your custom domain (e.g., www.yourwebsite.com
instead of www.notion.so
), you need to go through extra steps.
Not speaking of, default performance and SEO compatibility of Notion pages are relatively poor.
Therefore, it is worth mentioning a special tool that made the whole Notion website thing possible.
⚡Superhero of the day — Super.so
I'm using a specific framework for hosting Notion websites called Super — super.so.
Notion by itself is a poor candidate for a standalone website. It is known for its slow loading speed, lagginess, and somewhat unattractive URLs that look like this /c35fadf249794a2d9e6521359b783aef
. It also lacks SEO tools which are essential for the type of website we are building.
Note that it's possible to host Notion pages on your own domain and remove "ugly" URLs using integration such as Fruition, which involves setting up services like Cloudflare. But the process may seem tedious, and the result is far from perfect — website performance and SEO settings are the same as default Notion pages.
Super, in contrast, allows rendering Notion pages as static websites that are both fast and SEO-friendly.
By using the Super Static rendering mechanism, Super acts as a glue between Notion and the browser. On one side is your regular Notion page; on another, a saved static copy of this page which website visitors see.
Super Static is like Notion on steroids.
So, what's exactly inside this Super box?
1. It's fast lightning-fast
When hosted on Super Static, my blog home page scored 99/100 on PageSpeed Insights. In contrast, the default Notion page has a rank of 63/100 (see Appendix 1.)
The page takes just 1.0s to fully load on a desktop browser compared to 2.7s of regular Notion page.
What about the article page?
Blog article page showed whopping 100/100 points on PageSpeed Insights.
On a desktop browser, it takes just 0.5s to become fully interactive. It is 960% faster than a regular Notion page (see Appendix 1.)
Looks impressive? Well, it doesn't end here.
What about the mobile?
The mobile version of an article page has a score of 92/100 compared to 21/100 of Notion default.
Although mobile loading speed is not as fascinating as on the desktop browser, it can be improved with minimum effort. For example, if I used proper image compression, I could have saved around 1.05s of loading speed.
2. It's SEO-friendly
Super Static's quick loading speed is crucial for SEO. The faster your website loads, the more preferred it gets by search engines.
There are also other SEO premiums Super Static brings.
URLs
Using Super's interface, you can customize the URLs of your website pages. Simply copy the original Notion URL and define an alternative "pretty" URL.
And URL like yampolskymax.com/18cccb1661d34f139249c149b0fe1d25
will turn into yampolskymax.com/blog
It has to be done manually, but I wonder if Super can make the process automatic, using a page title or one of the properties, for instance.
Sitemap
When you host the website on Super, it automatically generates a sitemap.xml
file for your website. You can then upload it to Google Search Console to speed up the indexing.
Indexing speed & search ranking
I compared the indexing speed and search ranking between two platforms — Notion and Webflow using a sample article. You can see the full experiment here.
TL;DR: Notion > Webflow.
On-page SEO
Notion at its core uses JavaScript and all its pages consist of blocks.
So both for static and regular Notion pages, inspected code looks like this:
This tree-view blocky structure made me wonder: does it make it difficult for search crawlers to scan the page?
It appears that it does not.
All the page contents are easily indexed despite being buried inside blocks, which can be seen if we copy an article snippet into a Google search.
3. It's easy to set up
It took me around 15 minutes to set the first Notion page live using Super.
Assuming that you purchased a domain beforehand, there are no other prerequisites.
Super offers a smooth onboarding experience on setting up DNS records tailored for your domain service.
After mapping all the DNS, you may have to wait for 2-12 hours before the website goes live due to delays at some domain providers.
You don't have to worry about manual deployments, servers, or any other infrastructure. It is taken care of by Notion and Super.
Here is the complete checklist of things needed to host a Notion website on Super:
4. It's customizable
Many think that using Notion as a website will not give them enough flexibility to tailor it to their needs. They are 20% right and 80% wrong.
Notion applies some restrictions on how far you can go with page customization. For example, each page must have a title, a cover image (or empty space) at the top, and navigation in the top left.
Also, the contents of a page are limited to what Notion blocks can offer.
However, we can add to pages pretty much anything using the Embed Notion block.
Signup forms, weather widgets, calendars, maps — any 3rd party content is easily compatible with Notion and is displayed inline with other page contents. See examples below.
You can also inject custom scripts to support pop-ups, ads, checkouts, and other integrations through the Super app.
5. It's easy to change styling (dynamic CSS)
In Super, you can update the font of the website with one click.
Additionally, you can inject custom JS and CSS code through Super to add the next level of customization to your Notion sites. For example, you can make buttons like this:
If you are not a fan of Notion's document-type looks, it gives freedom to change it.
Here is another example of a website built on Notion and Super.
6. Great text content formatting
In addition to flexible Embed blocks and adjustable CSS, Notion delivers ultimate content formatting features.
As a writer, I want to have freedom in how I can shape and format article contents.
In Notion, I can do intricate things like:
Color the text and background with multiple colors.
Code blocks
Formulas:
Structuring text and images into columns:
Column 1
Column 2
Column 3
These are the features not fully supported by standard content editors like WordPress, Webflow, or Medium.
Apart from formatting, managing content is what really makes Notion cutting edge.
7. Superior CMS capabilities — it's easy to manage content
Notion uses a relational-based model for structuring the data. So any table you create serves as a CMS.
The beauty of Notion is that you can perform the same operations as with a regular database, such as adding parameters, sorting, filtering, and dynamic views — all with a few mouse clicks.
That gives a major extent of flexibility in how you can organize and manage content in Notion.
- Want to add a new parameter to your articles like Rating or Last Edited Date? Just press "+" in the corner of a data table.
- Want to reorder your articles? Simply drag them around as you like.
- Want to split your categories into different pages? Create and embed views filtered by category.
No coding skills required whatsoever.
What's incredible is that all changes are applied to your website in real-time.
8. It's easy to maintain — changes are applied immediately
By taking advantage of inherent Notion superpowers, you can make changes to static websites in seconds.
- Noticed a typo? — Go to your Notion page, fix it, and it's live.
- Wanted to add a new page? — Press "+," and it's there.
- Want to upload a new image? — Just drag it to your Notion page.
It is one of the most significant advantages of the Notion website, especially when I keep my personal notes and drafts in Notion.
9. It fits into your Notion ecosystem
I keep all my personal stuff in Notion.
That's why having a public website in Notion fits perfectly into the picture.
For example, I have a separate Notion database where I keep all my post drafts and ideas.
When the post is ready to be published, it takes me 10 seconds to set it live. I can just drag it from my Drafts database to the Public Posts database, and it will be updated automatically.
No extra compatibility formatting required — all the markup is kept as it was in a draft post.
As I am trying to keep up with my Medium blog, it is sometimes a real burden to migrate draft posts from Notion to Medium due to numerous formatting changes I need to apply.
Blog content is not the only example of such private-public synergy of Notion systems. There are examples of other creators distributing their goods, such as online courses and Notion templates, in a similar fashion.
10. Notion is constantly improving
Notion is a product in ongoing development, with updates arriving every month.
There are great features on Notion's timeline that could further boost performance and user experience. For instance, soon, Notion will be releasing their public API that will allow externally manage data inside Notion pages.
Besides, there is a highly active Notion community of creative and talented individuals. 3rd party Notion products like Super are emerging every day. Who knows, maybe the Notion community will have a greater influence on the product evolution than the Notion team itself.
11. It's not expensive
Notion by itself is free for individual use.
Hosting a static website on Super costs $12/month.
Webflow CMS website starts at $20/month.
WordPress starts at $11/month.
For both Webflow and WordPress, you have to pay extra for a website theme (template).
Therefore, having Notion website on Super Static costs lower than average on the market.
12. It's easy to migrate
If something goes wrong, or for some reason, I want to move from the Notion website — it's pretty easy to do.
You can export the whole website as HTML in a single click, including all subpages.
Cons
There are a few downsides of the Notion-Super setup worth noting.
Some pages can be slow on mobile
Compared to the desktop version, it took a long time to load the blog home page on mobile — 6.1s to become interactive.
It might be caused by the JS rendering of the Notion database, which is located on the page. It takes 4.0s to load, as we can see from the diagnostics.
Therefore, the performance of complex Notion pages is far from perfect on mobile devices.
Per Page SEO Settings
Currently, the main SEO downside of Super is that you cannot set metadata of individual pages.
You can only apply the global description to all the pages in the sitemap.
In the end, all search results for your domain will have the same description snippet.
However, the solution is achievable. Based on Super's roadmap, per page SEO settings are currently in progress and should be released in the nearest future.
Risk of changes in Notion core
Since Super is a tool built on top of the original Notion, there is always an integration risk.
For example, Notion may decide to refactor their system in a certain way that would make static websites no longer supportive.
This is unlikely to happen now, but all great systems go through the evolution of changes at some point.
Super doesn't work with siblings pages
Super's engine has a requirement: your Notion pages must be included as child pages of the main page you made public. Otherwise, they will not be accessible on a static website.
For example, if I have pages A, B, and C, where A - is my main website page, B is a part of A, and C is an independent page, I cannot reference C from B. It will be shown as a broken link.
Due to that, it's also not possible to reference pages from other workspaces, even the official Notion. (clicking this link won't work)
Sometimes that can be limiting. For instance, when I want to reference content located in my internal databases without moving it to the public website page.
Conclusion
- Notion is a relatively new platform on the market, and all its potential is not yet fully explored.
- Notion in combination with Super can serve as a great choice for a website.
- Notion Static websites had proven superior in performance, SEO, flexibility, maintainability, and CMS compared to similar platforms.
Appendix: Notion Static vs Notion Default loading speed
Main Page (Mobile)
Original Notion Page
Super Static
Main Page (Desktop)
Original Notion Page
Super Static
Article Page (Mobile)
Original Notion Page
Super Static
Article Page (Desktop)
Original Notion Page
Super Static