Last updated: 2022-01-27: adding link to Cory Etzkorn’s blog post.

I'm familiar with three ways to use Notion for your personal website.

1. Next.js + Notion (what I'm using here)

This is what I use for this website (markmoriarty.com)

<aside> ✅ This is free

</aside>

<aside> ✅ Optional: Pretty layout out of the box (social links along bottom, sensible defaults for title/image, automatic table of contents for longer posts, toggle light/dark mode).

</aside>

<aside> 🔻 It takes just moments if you're comfortable following technical directions, but might be intimidating if you don't want to have to see/touch code

</aside>

I'm using Travis Fischer's free (open-source) "starter kit" to turn a Notion document into a website.

transitive-bullshit/nextjs-notion-starter-kit

Hence my site looks a lot like https://transitivebullsh.it/

Out of the box, it comes with nice features like links to my social media profiles, and a toggle light/dark mode button.

In addition, I tweaked it a little

• I added nprogress to show slim "progress bar" at the very top while a page is loading

• I added Google Analytics (sorry!)

• I changed the bullet points:

  

• I styled the links and headings

List for demonstration purposes

• Bullet level 1
  • Bullet level 2
  • Bullet level 2 which is a long one spanning multiple lines, just like the quick brown fox that jumped over the lazy dog
    • Bullet level 3
    • Bullet level 3 again, another long one spanning multiple lines, just like the quick brown fox that jumped over the lazy dog
  • Bullet level 2