This tutorial will show how I've used Super to easily build my website in Notion. This will be an ever-evolving document as I play with Super for my other side-projects and include more features on my personal website. Enjoy!
Why Super?
As a full-time founder, I have a full schedule and handle many different responsibilities at once. I wanted a personal blog that was lightweight and had great site speed in order to rank well on Google.
My friend, James Mckinven of Indie Bites and Striqo, referred me to Super as a way to build my personal website in Notion.
I was hooked. This Indie Hackers blog post does a great job summarizing why Super was a great choice. To summarize:
- Fast page speed is an important ranking factor for SEO. I am not technical, so I wanted an online builder that did not bloat my website with junk code. As you can see here, JIC94 is pretty damn fast.
- In addition to being a unique workspace solution, Notion doubles as an amazing website builder. Notion is one of my favorite apps for organizing every aspect of my professional life, and I have a strong belief that even a preschooler can learn how to use the app with basic guidance. Because it caters to the everyday employee, it's much simpler to use than most website builders, including Webflow and Unstack (respectively my second and third choices).
- Notion is a pretty powerful content editor for building in public. As a workspace solution, Notion benefits from a wide array of project management tools that can be extra cool for building in public. I can make my kanban boards public to everyone, easily show databases, and have a public roadmap of what I want to achieve in the next month.
- Managing and updating content is very easy and fast. As someone who's spent most of his career trying to publish blog posts through Wordpress and failing approximately half the time, the Notion editor is a godsend. I can easily add images and include a table of contents! It may seem insignificant, but most website builders don't have a quick way of creating TOCs without plugins, which is maddening.
- Integrations. Enough said. Super had the best integrations compared to its competitors. As I have said, I wanted something that is easy to use off the shelf. I can easily integrate Google Analytics and include a form for email subscriptions using Chilipepper (tutorial below).
- Security and SSL. Super's security measures are what gives it an edge against proxy sites that can be prone to phishing and other URL hijacking measures. Plus, having the SSL certificate included means one less hassle I have to deal with :D.
Where can you find inspiration to build your website in Notion with Super?
- The Notion Template Gallery includes a wide range of pages that you can easily copy-paste for your own use. As you'll see later on, your website automatically gets updated whenever you push changes. It's as simple as I make it seem, regardless of how incredulous that may be.
- Super has a Showcase page that shows Notion websites it is hosting.
- Super also has a community forum where people showcase their websites.
- /r/Notion is a lively community where users promote their Notion spaces.
How to build your website using Notion and Super
Super has a handy tutorial that you can follow. Makerpad has a great one too, that involves building the Notion workspace from scratch.
If you prefer a text tutorial, follow the one below.
1) Build your homepage
Notion's Template Gallery has excellent options to use as your homepage. As for my needs, I didn't want to spend too much time on my homepage, so I simply started with a blank page, included layout columns, and added photos to make it presentable. I also included an email form using Chilipepper to get started.
Expand the sections below for a quick tutorial on how I added certain features to my homepage:
Using Notion, you can create columns by moving one block next to another, like in this GIF:
Type '/image' and upload your image. It's really as simple as that. Super will then automatically optimize your images to keep your website fast.
With most web editors, adding something as simple as a TOC can cause endless headaches and affect your site speed. With Notion, just type in '/table of contents'.
#1. Click Create Form
#2. Fill out your Form and hit Next
#3. Connect your Notion account to Chilipepper. Here you need to enter your Notion token, which you can quickly find with this tutorial.
#4. Once you've added your Notion account to Chilipepper, it's time to create a table page in Notion. Enter the fields from your form as columns in the table.
#5. Get the URL of the table. In the top-right corner of the page, click Share>Copy link. The page does not need to be public, don't worry.
#6. Enter the link in Chilipepper, and click on the check mark symbol.
#7. Map the fields correctly between your Notion table and your form.
#8. Create form and copy the link
#9. On the page you want to add the form to, simply type '/embed' and paste the form's URL. You're done! You can change the position and crop it as you want.
How it looks!
2) Connect Notion to Super
After creating an account with Super, go to Sites and click New Site in the top-right corner of the page.
#1. Under Site Method, you'll have two options for setting up your website: Super Static or Super Default.
Super Static is the best option if you want a really fast domain, but it's not compatible with calendars and timelines in Notion. Super Default is less fast, but it is compatible with many more of Notion's functionalities. Either way, you can change your method even after your site has been published.
#2. After choosing your method, enter your site name, domain address and public Notion URL
Note: The Notion page you want to use must be public. To do this, click Share in the top-right corner of the page and activate Share to web.
#3. Under DNS Records, choose your domain registrar to connect your domain to Super.
Basically, this step involves adding Super's 'A' and 'CNAME' record into your domain's DNS settings. Super simple and standard.
I won't get into this, but here are some tutorials that you can follow, depending on your website host.
Note: You can't have multiple A or CNAME records, as they will conflict with one another.
With Google Domains:
With Bluehost
#4. Final touches
You're mostly done! Just enter your site image, favicon, and site description, and you're good to go!
