NextJS Notion Blog
typescriptnotionpersonal
type
Post
summary
Finished my blog setup, excited to write more! Here’s how it works
status
Published
tags
typescript
notion
personal
edited
Jul 10, 2023 01:49 AM
slug
blog-2023
date
Jul 9, 2023
GoalProblems with old siteFixes to those problemsOther new featuresHow notion rendering worksFuturePerformanceLessons
Goal
Make writing online as seamless as possible, as an inspiration to create more. This way I can focus on writing, and never on posting my writing. Source from Notion, including media inside posts, on a highly performant website with minimal JS.
Problems with old site
- Have to upload media into cloudinary CDN, then link in markup.
- Have to git commit draft posts in order to work across devices.
- Configuring the theme was difficult. Vanilla JS inside an older blogging framework.
Fixes to those problems
- Notion is wonderful to write / brainstorm ideas in, and react-notion-x reflects the files / tweets / videos well in the web.
- All posts are pulled in from Notion, so no more committing drafts, or committing at all!
- Here’s this post you’re reading, as the notion link I wrote it in.
- All posts, as organized in notion
- Extending the blogging theme I forked from is much easier than the last.
Other new features
- https://mitchinson.dev, a concise home to show what I’m working on + share music / photos
- mitchinson.dev functions as my own url shortener
- Github Readme is also auto updated
How notion rendering works
- CI/CD around my writing infra lives here: bmitchinsonbmitchinson • Updated May 2, 2023
- My blog is statically rendered from pulling in all the notion posts. Takes 40 seconds to rebuild so, I rebuild the site entirely on an hourly check for post changes
- My homepage displaying my current work post has it’s cache revalidated and supplied as react props, with nextjs Incremental Static Regeneration
- One of my favorite nextjs features so far. If my blog was a thousand pages, I could utilize that there as well to selectively rebuild pages.
Future
- Notion is a big part of my daily life at this point, but they have outages semi often 😢
- I might need to move away from being reliant on their uptime / potential API billing changes / lack of offline editing
- Server Sync’d Obsidian?
Performance
Really happy with these numbers 😄 - https://web.dev/measure (formally “lighthouse”)
Lessons
- If you find yourself building a svelte component library, you may be overcomplicating your task. notion-publish-toolbmitchinson • Updated Jun 8, 2023
- Learning Svelte was cool though! Doing more with it here
- Also learning storybook was fun
- Also figma practice!
Thanks for reading about it !
- Ben