Rock beats scissors, paper beats rock, and Notion beats markdown.

Drew Bredvick, • next.jsnotion
Back

Update: this is all wrong

I'm back to markdown thanks to this great project, Nextra.

Leaving this old blog post up as a reminder that sometimes I'm wrong. Best to take all advice from this site with a grain of salt :)


For the longest time, I’ve wanted to write my blog posts inside Evernote & have them automatically available on my personal site.

I looked into ways to do this in Evernote back in the day and it was tricky. With an intense if this then that (IFTTT) flow, you could kinda get there.

I gave up on that idea.

Gatsby came out and made static sites cool again, so I moved my blog to a Gatsby theme called Novela (still a great theme, btw).

My site was fast, beautiful, and simple. Yet, I still wanted my dream of typing a blog post in the gym on my phone while having complete control of the code.

I could figure out a complex setup that let me code and commit to a GitHub repo on the go, but to me that seemed overly complex for a personal site.

Then I saw a tweet from Paul Shen showing how he got his blog running with Notion.

Following this guide from Splitbee, I got an initial version working.

Build a blazing fast blog using Notion & Next.js - Splitbee Blog

The magic lies in getStaticPaths and getStaticProps data fetching methods in Next.js.

// generates the paths that need to be statically rendered
export async function getStaticPaths() {
const posts = await getAllPosts()
return {
paths: posts.map((row) => `/${row.slug}`),
fallback: true
}
}
// renders an individual post
export async function getStaticProps({ params: { slug } }) {
// Get all posts again
const posts = await getAllPosts()
// Find the current blogpost by slug
const post = posts.find((t) => t.slug === slug)
if (!post) {
return {
props: {}
}
}
const blocks = await fetch(
`https://notion.drewtech.workers.dev/v1/page/${post.id}`
).then((res) => res.json())
// I'm hosting my own instance of https://github.com/splitbee/notion-api-worker on Cloudflare
return {
props: {
blocks,
post
},
revalidate: 60
}
}

The other magic piece is React-Notion, a library for rendering Notion elements in React.

splitbee/react-notion

Note: this is all running off of Notion's internal API. Hopefully nothing breaks when they launch their public API in 2021 🤞

I manually moved my back-catalog into Notion, deployed to Vercel, and made some DNS changes.

Now, less than 24 hours later, I have a dynamic blog backed by my favorite note taking app deployed to a fast network powered by a great framework.

Here's a link to the Notion doc powering this post:

https://www.notion.so/dbredvick/Rock-beats-scissors-paper-beats-rock-and-Notion-beats-markdown-6fdf9bb4a7c64b228a6a6ca4154ebcb2

Super meta.

What a great time to be a developer.

I’m excited to start writing more on this new setup.


See you on the other side,

Drew

© Drew Bredvick.RSS