Create your web page with Notion and Super.so

6 min readMay 19, 2022

If you’ve been using Notion for more than a month, you’ll have noticed that its system of pages and subpages gives the feeling that you’re browsing a website. And, if you’re a creative and ambitious user, you’ve even managed to make your “own website” with Notion… although, admittedly, with some UX limitations.

But, if I told you that it was possible to create a website with Notion and with a UX as if you had written the code yourself in CSS, would you believe me?

The answer is Super.so, a tool that allows you to make any of your Notion pages into a Web page; plus, you can add your own domain and SSL certificate (better known as “the little green padlock for secure page”) to it.

Here’s how:

First things first.

You must have your page in Notion already created, with the information and multimedia files that you want to appear on your website.

Remember my golden tip: before creating your Notion page, layout it on a sheet of paper, whiteboard or tablet. Thank me later.

This is my #GestioNotion page that we will use as an example for this article.

Once you’ve laid out your page on a sheet, slate or tablet, the idea is to create that base structure in Notion. Later we will see how to generate a more visual or UX experience for our website.

Hands to work

With our page ready in Notion, it’s time to “play for real”.

Super.so gives us many options that, although they can be dizzying at first, it is important to know what they are because it depends on how robust our website will be.

List your basic elements

Do you want your website to have dark/light mode? Are you going to have sub pages or is it going to be a landing page? What kind of NavBar would you like to have?

Remember my golden tip for creating in Notion? I recommend you apply it again for this part of the process, but now include more “creative” or UX elements.

Test, test and test

Now that you have your Notion page design and plugins listed, it’s time to start “creating with Notion in mind”.

What does this mean? Let’s take the following image as an example:

We can see that this page is distributed in three sections: NavBar, images and text. But, if we “think Notion”, we will see that it is constructed as follows:

NavBar: 4 sub pages divided in 4 columns. Including Call to Action.

Very similar to what we had seen in the #GestioNotion page that we used example at the beginning of this article.

Images:These are 3 simple images arranged in 3 columns in Notion.

If we continue browsing the #GestioNotion page we will find a similar structure but with videos.

Text:This does not mean more complication: they are two blocks of text divided into two columns where the left block can be a Header 3 or a bold text that was later resized.

If you got to this point, CONGRATULATIONS! You can now “create with Notion in mind”. Now for sure you are starting to learn how to get more out of databases and have a better structure for your web.

And the answer is “yes”: you can make any Notion element a visual experience for your users. The only asterisk to achieve that kind of view is to include code in Super.so.

But don’t worry, there are open source libraries with many options that you can use 100% free for your page. All you need to do is copy and paste where appropriate.

Upload your page to Super.so

Now that you have everything, it’s time to upload your Notion page to Super.so. And it’s as simple as clicking on the “New site” button on the top right.

Name your site and paste the link of your Notion page you have already worked on.

WARNING: the name you decide to give to your site will be the one that will appear in the search engines. Don’t worry if you decide to change it later.

Remember that your Notion page must have the “Share to web” option enabled before copying.

Make the magic happen

Once inside, this will be your main panel: you will have a left sidebar where you will configure your future website, and on the right side you will have a preview of what you are creating.

The important part here is the “Theme” section where you will make the magic happen.

Here you will be able to edit the background color of your page (there are some default options, but you can add more options with code), create your NavBar, create a Footer and modify the typography.

Also, on the top right you can see your website in mobile version to make sure that the responsive design is 100% functional.

Let’s not forget that, natively, Notion is one of the No Code tools with the best responsive design.

Background color:I chose one of Super.so’s default options so as not to keep my page with Notion’s white background.

Footer:I chose one of Super.so’s default options. I found it very functional and with a super minimalist design. I added basic information, social networks and copyright.

And that’s how “simple” you can make a website out of any Notion page!

Do I need the Pro version?

The answer is “it depends”: if you want to have a public website with your custom domain or add code for more features, design or a better UX, the answer is yes.

If you just want to make a website to validate an idea or make an MVP, and you don’t mind the “super.site” subdomain, I don’t recommend you to buy the Pro version.

As of this writing, the cost of Super.so is $12/site/month.