12 Reasons I Made My Website and Blog In Notion

Category
💻Tech
Date published
Apr 24, 2021
Last updated
Apr 28, 2021 5:41 AM
image

Table of Contents

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:

  1. Performance — the website must be fast for desktop and mobile.
  2. SEO compatibility — website pages can be appropriately indexed by search engines.
  3. Flexibility — I can easily adjust the website's structure, layout and add extra components when needed.
  4. 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.

Demonstration of Notion CRM system in action: Desktop
Demonstration of Notion CRM system in action: Desktop

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

image

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.

Screenshot of Super app interface
Screenshot of Super app interface
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.)

See image
Desktop score for a blog home page (Super Static) from
Desktop score for a blog home page (Super Static) from PageSpeed Insights

The page takes just 1.0s to fully load on a desktop browser compared to 2.7s of regular Notion page.

See image
Desktop data for a blog home page (Super Static) from
Desktop data for a blog home page (Super Static) from PageSpeed Insights

What about the article page?

Blog article page showed whopping 100/100 points on PageSpeed Insights.

See image
Desktop score for an article page (Super Static) from
Desktop score for an article page (Super Static) from 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.)

See image
Desktop data for an article page (Super Static) from
Desktop data for an article page (Super Static) from PageSpeed Insights

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.

See image
Mobile score for an article page (Super Static) from
Mobile score for an article page (Super Static) from PageSpeed Insights
Mobile data for an article page (Super Static)
Mobile data for an article page (Super Static)

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.

See image
Improvement opportunities from
Improvement opportunities from PageSpeed Insights

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

Screenshot of Super app interface
Screenshot of Super app interface

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.

Sitemap Example
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://yampolskymax.com/blog</loc>
</url>
<url>
<loc>https://yampolskymax.com/apple-watch-habit-tracker-with-shortcuts-automations</loc>
</url>
<url>
<loc>https://yampolskymax.com/3-things-i-learned-from-atomic-habits-by-james-clear</loc>
</url>
<url>
<loc>https://yampolskymax.com/all-posts</loc>
</url>
<url>
<loc>https://yampolskymax.com/no-meetings-no-deadlines-no-fulltime-employees-gumroad-analysis</loc>
</url>
<url>
<loc>https://yampolskymax.com/career</loc>
</url>
<url>
<loc>https://yampolskymax.com/3-reasons-why-i-listen-to-audiobooks-every-day</loc>
</url>
<url>
<loc>https://yampolskymax.com/contact</loc>
</url>
</urlset>

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:

Screenshot of the inspected page using Google Chrome developer tools
Screenshot of the inspected page using Google Chrome developer tools

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.

See image
Screenshot of Google Search using article snippet
Screenshot of Google Search using article snippet

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.

Screenshot of Super app interface
Screenshot of Super app interface
Screenshot of Super app interface
Screenshot of Super app interface

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:

Create a Notion page you want to host
Purchase your own domain
Have access to your DNS settings

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.

Weather widget
Signup Form
Video
Maps

You can also inject custom scripts to support pop-ups, ads, checkouts, and other integrations through the Super app.

Screenshot of Super app interface
Screenshot of Super app interface

5. It's easy to change styling (dynamic CSS)

In Super, you can update the font of the website with one click.

Screenshot of Super app interface
Screenshot of Super app interface

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:

Screenshot of custom-CSS buttons from
Screenshot of custom-CSS buttons from Super guide

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:

📌

Callouts

🚀

(of different styles)

Toggle Lists

Hidden content

Inline Tables

NameTagsCost
Item 1
Tag 1
$4.00
Item 2
Tag 2Tag 1
$10.00
Item 3
Tag 3
$17.00

Color the text and background with multiple colors.

Code blocks

Formulas:

Structuring text and images into columns:

Column 1

Image of a hedgehog
Image of a hedgehog

Column 2

Image of a squirrel
Image of a squirrel

Column 3

Image of a doggo
Image of a doggo

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.

Demo of Notion data management capability
Demo of Notion data management capability

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.

Demo of my content workspace
Demo of my content workspace

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.

Screenshot of Notion interface
Screenshot of Notion interface

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.

See image
Mobile data for a blog home page (Super Static)
Mobile data for a blog home page (Super Static)
Mobile data for a blog home page (Super Static)
Mobile data for a blog home page (Super Static)

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.

Diagnostics
Screenshot of diagnostics of a blog home page (Super Static)
Screenshot of diagnostics of a blog home page (Super Static)

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.

Screenshot of Super app interface
Screenshot of Super app interface

In the end, all search results for your domain will have the same description snippet.

Screenshot of Google Search
Screenshot of Google Search

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.

Screenshot of a broken page (Super)
Screenshot of a broken page (Super)

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

Mobile score for a blog home page (Notion)
Mobile score for a blog home page (Notion)
Mobile data for a blog home page (Notion)
Mobile data for a blog home page (Notion)

Super Static

Mobile score for a blog home page (Super Static)
Mobile score for a blog home page (Super Static)
Mobile data for a blog home page (Super Static)
Mobile data for a blog home page (Super Static)

Main Page (Desktop)

Original Notion Page

Desktop score for a blog home page (Notion)
Desktop score for a blog home page (Notion)
Desktop data for a blog home page (Notion)
Desktop data for a blog home page (Notion)

Super Static

Desktop score for a blog home page (Super Static)
Desktop score for a blog home page (Super Static)
Desktop data for a blog home page (Super Static)
Desktop data for a blog home page (Super Static)

Article Page (Mobile)

Original Notion Page

Mobile score for an article page (Notion)
Mobile score for an article page (Notion)
Mobile data for an article page (Notion)
Mobile data for an article page (Notion)

Super Static

Mobile score for an article page (Super Static)
Mobile score for an article page (Super Static)
Mobile data for an article page (Super Static)
Mobile data for an article page (Super Static)

Article Page (Desktop)

Original Notion Page

Desktop score for an article page (Notion)
Desktop score for an article page (Notion)
Desktop data for an article page (Notion)
Desktop data for an article page (Notion)

Super Static

Desktop score for an article page (Super Static)
Desktop score for an article page (Super Static)
Desktop data for an article page (Super Static)
Desktop data for an article page (Super Static)