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.
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.
<aside> 💯 What a great time to be a developer.
</aside>