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

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:

no longer available

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