How do I turn a Notion page into a “real” website?
💡 TL;DR Why would you even want to transform a Notion page into a website, instead of sharing public Notion links?
The answers are: SEO restrictions, limitations in how your Notion site looks like, lack of blocks equivalent to standard web components, such as a navbar or a button, and the inability to use a custom domain.
In this piece, I discuss some solutions. I’ve tried all of them:
- commercial ones, such as Super.so or Potion — it will cost you $10–12 per month per site, but you’ll get most features and peace of mind;
- Fruition.com — which offers less features, but lets you host on a custom domain and you can use Cloudflare free tier to support it;
- open-source nextjs-notion-starter-kit which is an option for people who can code a little. If you can type script, or are at least familiar with git, npm and vercel, give it a try.
Hearing about Notion everywhere, what’s it about?
Notion is a tool which is a bit excessively referred to as a “second brain”. I wouldn’t go that far, but it is a cool tool for knowledge bases, lists, notes, budgets, directories, collections of links, and so on. If you’re the kind of person who keeps budgets in Google Sheets, a list of things to read in Evernote, or keeps a docs with favorite recipes in a doc, chances are you’re going to like Notion. It has a very friendly interface which earned it lots of fans, users and enthusiasts worldwide. Notion’s free plan is also quite generous for personal use, so it’s easy to get hooked (trust me, I know).
Once you do get hooked, you may think it’s a good idea to use Notion to host a simple web page. On the surface, the only thing that prevents a Notion page from becoming a web page is a little gray toggle in Notion’s share settings. Once toggled, it makes your Notion page available to the whole world. Unfortunately, the resulting “webpage” will have a few quirks:
- SEO won’t be great. If you use Notion’s free plan, all meta tags of your page (such as title, an url or description) will point to Notion’s main page and describe Notion itself. I don’t really know if that changes on a higher plan — Notion’s docs are not clear about SEO implications.
- You will have limited control over the appearance of your site — no reasonable choice of fonts or colors.
- While Notion has a lot of cool components, it doesn’t have blocks similar to standard web components, such as navbars or buttons.
- You won’t be able to link a custom domain to your page. Of course, you can redirect, but I’m told it’s bad for SEO.
- I am also told you will see a performance degradation as Notion page grows, which I can’t confirm at the moment — my public Notion pages seem to be quite performant.
Given the large base of Notion’s fans and users really wanting to use it for everything (guilty as charged!), it’s no surprise a few solutions popped out to address the mentioned issues.
Here are some of the options you should consider if you love Notion and want to use it to manage your public content, but at the same time don’t want to give up on SEO and live with the default Notion page appearance. I grade all the options based on time (more is worse), complexity (more is worse), costs (more is worse) and effects (more is better). I assume you already have your content on Notion and you’re just looking for an attractive package addressing the abovementioned shortcomings.
1. super.so — once again proving nothing can be cheap, quick and good at the same time
Time: ⏳⬜ ⬜⬜⬜ (super quick!)
Money: 💰💰💰💰💰(most expensive on the list)
Complexity:🧠🧠⬜⬜⬜(delightful to use)
Results:⭐⭐⭐⭐ ⬜ (I’m from Europe; not giving 5 stars to something that doesn’t support GDPR/cookie notice out of the box!)
Super.so is a tool which lets you transform your Notion materials into a web page easily and quickly through a delightful interface. Unfortunately, it’s not that cheap (disclaimer: I’m writing this from a Eastern European perspective). Still, even $12 is less than a family Netflix subscription so if you’re serious about creating internet content…
Super’s killer feature is a distilled, beautiful interface, which will let you modify only just enough:
You get to set some SEO metadata — the title, the description and search keywords, and you can do this per each page. You can use your custom domain, add a navigation bar in the top, including a “Call to Action” button. You can change fonts and background colors… and that would be it.
Thanks to that minimalistic approach, changing a Notion page into a pretty nice website takes literally a few minutes. If you want to have a site focused on content and you care about seamless content editing and creation above all, and — at the same time — you can live without non-standard layouts, animations, visual effects, plugins and fireworks, you should be pretty content with Super.
I consider the minimalistic approach of Super both an advantage and a weak spot. Given its price and the fact that it’s a really specialized tool for a single use-case, I would at least expect some support around cookie notice and privacy settings (I live in the EU, so I need to be GDPR compliant). Having an option to set up a footer would be nice too. Not to be unfair, I need to mention that Super lets you inject html, js, and css into your site. That’s a hack that allows for adding analytics, cookie notice, and many other things. It’s just I would expect a nocode tool to provide a set of options rich enough for me not to need to hack around.
It seems that Super generates pretty decent performing static sites. The landing page for my personal webpage bezkodzie.pl (it’s a website for my blog and podcast for Polish speaking audience) gets a 98/100 from PageSpeed Insights while being hosted on Super. The results for its mobile version are not that great, but it seems it’s my fault as I’m using unoptimized images.
If you’re considering Super, it’s important that you know that it takes a noticeable amount of time for the changes from Notion to propagate to your Super site. I saw that delay go as high as 15 minutes, although most times it’s much faster. Definitely not immediate.
To sum up: if you’re ready to pay for a delightful interface and for a tool that just gets the job done, Super will be a good fit, even if it’s the most expensive one on the list. Super will get you a reasonable, good looking default which frees your mind and allows you to spend your creative energy on your content. This will matter especially if you’re an overthinker who focuses on minor details which don’t matter that much in the end.
The caveats: you need to be ready for a little bit of hacking if you need popups or analytics. It takes some time for your Notion edits to propagate to your Super-hosted site. For me, however, the biggest downside of working with Super is editing existing pages. Sometimes half baked edits make their way into production. It’s best to work on content that is not shared yet, and only publish when it’s polished. Unfortunately, it’s not always possible, especially if you’re playing with the structure of your Notion materials (which I do often, as I consider Notion’s ability to display and highlight relations between pieces of content one of its greatest strengths).
2. potion.so — Super’s younger sibling
Time: ⏳⬜ ⬜⬜⬜ (super quick!)
Money: 💰💰💰💰⬜
Complexity:🧠🧠⬜⬜⬜
Results:⭐⭐⭐ ⬜ ⬜
Potion is a twin solution to Super… or it’s younger sibling. Both solutions are so similar it’s impossible not to wonder who was first and who is trying to beat the other solution (quick research seems to point to Super being the first of these two). In the same way as Super, Potion enables you to add a navbar with a Call to Action button at the top to your webpage. Similarly to Super, you can inject custom styles and code into your page. It looks to me like it’s also hosted on Vercel, though in both cases that’s not really visible for the end user, unless there are errors and you get redirected to Vercel’s error page.
Below you can compare the screenshots of my personal site (the site itself is in Polish, but it’s a small blog + a list of podcast episodes) — the same material in Notion was converted to a webpage using both Super and Potion. They offer a bit different selection of fonts, so that’s probably the most visible difference between them. Other details include a bit different way of displaying the logo (and how much you can change that) and a bit different style of the “call to action” button. However, given that you can use custom css in both cases, you probably could make both these sites look identical.
Any differences not related to appearance of the page? Given that Super has a longer history, and Potion is it’s contender, Super does have some advantages. One of them is the ability to control SEO related tags, page title and description per each page. With Super you can also have password protected pages (which may or may not make sense, given that the source page in Notion still needs to be public).
Even though the resulting pages in Super and Potion look really similar, Super’s page scores a bit better in the PageSpeed Insight test. For my main page, the score on Desktop is 95 for Potion and 98/99 for Super. For mobile it degrades in both cases, to 64 for Potion and 81 for Super. In both cases it seems to be mostly my fault with badly sized images.
When it comes to the workflow, the biggest difference between both tools seems to be how the live editor works and how long it takes for your Notion changes to be reflected in the generated static page. In the first aspect, the winner is Super — Potion’s editor seems to have a bug (?) and I was able to view only the first page linked in the header and couldn’t really make the editor show me some other page. On the other hand, when it comes to the speed of generating static pages and seeing my changes reflected on the webpage, Potion clearly wins. For Super it can take a few minutes, and I’ve even waited up to 15–20 minutes. In most cases it wasn’t that long, but definitely the delay was noticeable. For Potion, it’s much quicker — maybe not immediate, but seems to be seconds and not minutes.
Are these differences reflected in the price? Single site on Potion costs $10. Super charges $12 so it’s a bit more expensive. The difference will get bigger, if you plan on hosting more sites. Super charges $12 for each of them, and Potion lets you have 3 sites for $25, so it’s only a little more than $8 per site.
Still, personally, I decided on Super. Given that Potion is a bit cheaper, why did I do that? I must confess I am in love with Super’s user interface. It’s really delightful. Plus, SEO settings per page and a little bit better performance scores were an argument too.
Nonetheless, Potion has a superior name and it’s created by a fellow nocoder. Yes! Potion was created and is supported by a single person! Since he’s been building and growing Potion in public, you can follow along the journey on twitter or listen to a podcast describing it. I’m still trying to decide if this works in favor of Potion, due to my respect for the creator, or against it, because I am worried what happens if he decides he’s had enough ;) … anyway, I may switch to Potion some day in the future if I can’t really get SEO benefits I assumed I will get from Super.
Both Super and Potion offer free test domains.
3. Hostnotion — I gave up
Time:-
Money: -
Complexity:-
Results:-
Hostnotion looked like an interesting alternative to Potion or Super due to a very attractive price of $5 per month. Unfortunately, when I tried to use it, I wasn’t able to pay for it… maybe due to my location or something. Truth be told, payment issues left a really bad impression so I gave up quickly. If they can’t handle payments in a solid way, what’s going to happen later on?
4. Fruition + Cloudflare — it just works
Time: ⏳⏳⏳⬜⬜
Money: ⬜⬜⬜⬜⬜
Complexity:🧠🧠🧠⬜⬜
Results:⭐⭐⬜ ⬜ ⬜
fruitionsite.com will generate a script for you. The script will be capable of rewriting your Notion page — the rewrite will fix tags important from a SEO perspective and give you friendly urls. You can later run the code using the free tier of Cloudflare workers and also use Cloudflare to set up your custom domain. The result is a site rendered based on the content on Notion, but modified on the flight. If you don’t plan on huge traffic (so it can be handled by Cloudflare’s free tier) it’s a free and easy solution, mostly due to a nice user interface hiding the script behind it. You don’t even have to setup any constants in the script; you just fill fields in the UI and get the script handed to you on a silver platter. You need some minimal familiarity with Cloudflare’s DNS to set this up, but it’s free and it works. Depending on if you’re touching Cloudflare for the first time ever, it may take you 10–30 minutes to set it up. In this setup, you need to have your own domain.
If it works and isn’t really difficult to set up, what’s the problem? Given the rewrite, the biggest problem is the site’s performance. Among other things, Fruition performs a mapping of Notion’s generated urls to more friendly ones. I am not entirely sure why, but maybe it’s due to that mapping that PageInsights refuses to score my testing site. Even without the score, I can tell that the delay is significant enough to be noticeable by the user, which makes sense — especially in the case of a Notion database, while Super or Potion will just generate static assets for you, Fruition will make a rewrite on demand.
Fruition is open source. Consequently, while it’s super useful and it already allowed people to create a few nice sites, its creator may not have time to fix it, should Notion change things in an incompatible way.
Performance, the risk of depending on a small open source project, and the usage of Cloudflare’s free tier make it an OK solution for hobby projects and small sites. It’s not a solution you could live with in production or if you want to score highly in Google (since performance is an important factor there).
5. nextjs-notion-starter-kit — it works on my machine!
Time: ⏳⏳⏳⏳⬜
Money: ⬜⬜⬜⬜⬜
Complexity:🧠🧠🧠🧠⬜
Results:⭐⭐⬜ ⬜ ⬜ (really depend on your time and technical abilities)
It’s an interesting, potentially free option for programmers. Specifically, for people capable of using tools such as git, npm and vercel.
The author of the blog https://transitivebullsh.it/ himself does what Super and Potion packed into a paid product. Thanks to the repo being open source on Github, anyone can use it, if they’re willing to learn a bit about the tooling. Assuming this doesn’t scare you… as it’s normal with open-source pieces like this, the author supports mostly the functionalities he needs (which is totally understandable; kudos for making it open source!). So the page you’ll get by default when using the starter kit will be similar in layout and look to his page. If you want to see that using my example page, see: https://nextjs-notion-starter-kit-nine-brown.vercel.app/.
While the two-column layout works well (which was expected based on the creator’s page) the solution didn’t work well with one other layout I had. Here you can see the screenshot of my other test page (which is again in Polish and is called czysapromocje.pl which would be roughly equivalent to aretherediscounts.com; the idea was to collect historical information on discounts and coupons offered by brands and shops so that users would know if it make sense to wait for a future discount before purchasing a more expensive item).
Below you can see the the screenshot of the page deployed with the starter kit, and then, the screenshot of the same Notion source material served with Fruition.
Good news? It’s open source, so you can take control and add/fix support for layouts you need. You can also do whatever you want with css and fonts, though it will require a little bit of coding. Bad news? There seems to be a few known issues, and you have to decide if they’re impactful to your page or if you can fix them for yourself.
Still, if you’re focusing on a single Notion based page or project and are not scared of modifying some typescript or css yourself, this may be a nice free choice, provided that you qualify for Vercel’s hobby plan (non-commercial use).
Time to decide?
First of all, please consider if you really need something other than Notion. The deciding factor seems to be SEO — are you going to be sending and posting links to your Notion materials directly, or do you want towards your site being easily discoverable in search engines and ranking high? If so, it seems you’re gonna be better off with an additional tool. You also need it if you want to change the appearance of your Notion pages.
Secondly, while I love Notion and I enjoyed how easy it was to convert Notion notes into something resembling a web page or even a blog, even running my page this way for few weeks only, I can see that I need some features that would let me interact with my readers (and them with me). If you think you may need comments or some additional plugins (ads, e-commerce…) , you may be better off with a more traditional solution for blogging, such as good old Wordpress. I was able to easily add analytics with js injection, but that’s one more thing you have to add manually.
Still in love with Notion + * ?
If you want a free solution, you can use Fruition, but your SEO score may be impacted by a poorer performance. If you’re a coder, eager to spend some of your time tweaking things and contributing to an open source project, consider nexjs-notion-starter-kit. You’ll get full control as a programmer, you can host it for free (for non-commercial use).
If you’re ready to pay for time savings and peace of mind, Super and Potion are your choices. Super seems to have better performance and handles a little bit better SEO. Potion is a bit cheaper and definitely has a cooler name.
My personal choice for now is Super, but as I discover its restrictions I may want to separate the “knowledge base” part of my site and the blog, leaving the “knowledge base” running on Notion + Potion. It’s a bit cheaper than Super and if I decide to separate, I’ll focus my SEO efforts on the blog anyway and move my blog to something that allows comments and can better support me in building a community.
