How to Build a Simple Website with Notion and Super?

Notion (notion.so) is a great tool for writing content, documenting, sharing, organizing, etc. Super (super.so) lets you can convert your Notion pages into a website and add custom domains and themes without any code. Let’s see how to build a simple website with Notion and Super!

Sign up to Notion

If you haven’t signed up for Notion, take some time to do it at Notion.so. Notion is a tool with a lot of tools and options for creating written content using an easy-to-use rich text editor. Therefore, take some time to play with Notion’s options.

This is a good tutorial on getting familiar with Notion’s interface.

Before building our simple website, create a page in your Notion workspace. Here I created a page called My Super Site.

"My Super Site" Notion Page created in the Notion Workspace
Notion Page

Then, make sure to share the Notion page publicly. Click the Share button in the top right and turn on Share to Web. Copy the link to use in the next step.

Share Notion page to the public
Share your Notion Page to the public

Sign up for Super

Now create your Super account at app.super.so/signup

Super.so signup
Super Signup

Next, create a Super site and link your Notion page to Super.

Notion Page URL is the public URL you copied in the last step.

Super will generate a website for you hosted at a super.site domain. You can preview the website in the Super dashboard.

Super dashboard
Super Dashboard

Adding New Pages

If you go to the Pages section, you can see that the page you added is the homepage and other nested pages in Notion are automatically added as subpages.

Super pages section
Super Pages

To create a new page, click “Add new page”. You have to select a URL for your page and add the Notion public URL of that page.

create new page on Super

To learn more about Super Pages, visit this article.

Custom Code

Adding custom code is pretty simple on Super. Go to the Code section.

adding custom Code

You can add code between

  • <head> tags (analytics, tracking, etc.)
  • <body> tags (this code is added to the start so useful for something like a site-wide banner)
  • Or, you can add custom CSS seperately.

Related Reading