Notion + Super = Website Project!

Notion + Super = Website Project!


I went deep down the rabbit hole with Notion. I think I woke up at one point, bleary eyed, covered in Cheeto dust and Snickers wrappers.

My project: create a personal website with Notion at the core.

I should've tracked my time on this. I worked on it a little bit every day over the last week. I'm guessing I put 20 hours in (considering there was a lot of trial and error stuff).

Not interested in the nerdy details of the build below, but want to see the end result? Here you go!

— — — — — —

The whole thing started with a database to manage all of my writing. Then I started to realize how many different ways you can display - and use - database content in Notion.

If I was going to do all of my writing here, I should publish it here too, right? That would streamline things.

The plan hatched. I was going to try throw together a personal website using Notion.

Below, you can see all of the writing I've created in Notion since I started using it a month or so ago. This would be the main database.

Notion Website Writing DB.png

The homepage

Next, a homepage. I wanted something simple, so I started with an introduction and some links.

When adding subpages, I noticed that the only built-in way to navigate around these Notion pages was through Breadcrumbs in the upper left corner of the page. I wanted visitors to be able to hop around a bit more, so I used a Callout Block at the top. This would help visitors navigate the main website pages.

My writing

Since the main goal of this was to make it easy to create and publish my articles and weekly emails, this was the first page I attempted to "design" in Notion as a website page.

I repeated the same Callout Block navigation on this page (and every page). I split the section below that into two halves:

  1. Intro copy about Chirps.
  2. Links to the latest editions of the weekly email, Callout Blocks that includes links to the Chirps Archive page, and the Subscribe CTA.

The link to the latest editions will be updated automatically, since simply a linked version of My Writing Database that I showed you above. For this page, I created a List View called Chirps Latest Edition Sidebar.

At the bottom of My Writing page, I linked to the Writing Database again. This time, I created a Gallery view and filtered it to show only my longform articles.

My favorite things database.

After I got the hang of working with my main database, I expanded into a second. I'm using this one to store all of my favorite things that I write about, recommend, and use every day. I'm curious to see how this evolves as the list grows.

Here's a preview of the Good Media page, which will be list of all of my favorite podcasts, TV series, and documentaries.

And finally, I tied it all together with a custom domain from Super.so, which lets you turn your Notion pages into fast, functional websites with custom domains, fonts, analytics, and more.

I'm considering making the templates public for duplication. if anyone is interested in building a site similar to this, but doesn't want to start from scratch, let me know!

Would love to hear your thoughts and feedback. This is obviously a work in progress - I still have a bunch of old content to add - but I figured I'd share a little bit about what I learned while building it.