wustep.me: now powered by Notion
wustep.me: now powered by Notion

wustep.me: now powered by Notion

Published
November 21, 2022
Tags
Projects
Author
Stephen Wu
🌐
In Nov 2022, I redid my website! It’s now powered by Notion and the nextjs-notion-starter-kit repo.

Design Goals

In my 4th or so rewrite of my personal website, I wanted to:
  • Make it more post-focused and visual, with a better information architecture.
  • Make it faster.
  • Make it Notion-powered.
New website on the left; old website on the right!
New website on the left; old website on the right!

Using nextjs-notion-starter-kit

This website is a fork of the nextjs-notion-starter-kit repository by Travis Fischer.
  • next.js is a React framework for modern, fast web applications.
  • Notion is a workspaces & docs application, and where I work! Notion is where all these articles are stored and edited.
    • react-notion-x: This library helps with rendering Notion pages in React.
  • Vercel provides various tools to help deploying and web dev easier. It lets me deploy directly to their cloud service from GitHub without having to maintain my own web server.
Travis’s starter kit was a pretty awesome place to start. I made about a dozen small design and functionality improvements, including the buttons below:
I also added comments, using Giscus, and a like button via Applause.
❤️ Thanks so much to the contributors to all the libraries used!

Why Notion powered?

Previously, I built my own website on top of Ghost, a content management system (CMS). Notion is, in a way, also its own CMS.
I like powering my website via Notion for a few reasons:
  • Notion has a world-class documents editor and organization schema, and it’s very easy to edit and manage articles in Notion!
    • I was already writing my content in Notion and just porting it over to my old website using Ghost, which added extra friction.
  • This gives me more opportunities to use Notion as a regular user and a public API consumer and figure out how to improve the product.
    • This is a positive feedback loop — as I improve Notion, I’m also improving my own personal projects and productivity! 🙂
Some caveats:
  • Because there’s no “Draft” mode in Notion yet, all edits happen live with some caching delay. If you have a high readership, you’ll probably want to duplicate pages for edits, and then copy paste those edits inside.
  • Notion is a separate cloud hosted service, so I’m putting lotsa eggs in this basket…
    • If the Notion API is down or has issues, then my website may also go down or inherit a subset of those issues. The uptime has been quite good though at >99.97% cumulative over the last 6 months, with no other notable API issues.
    • But I do work for Notion. So I could probably just work on fixing issues that come up.
notion image