Skip to content

A serverless Notion-powered blog in React I'm trying to build for fun. If I had to pick a name for this, it'd be COKE.

Notifications You must be signed in to change notification settings

arthtyagi/serverless-notion-blog

Repository files navigation

☁️⚡ Serverless Notion Blog

Live at https://serverless-blog.arthtyagi.xyz subdomain of my website. The data is from my Notion.

Why

I have been using Notion for a while now to host my blog, however, I don't like the design of the blog. I wanted to make it more "me" (read: broken but sexy).

I'm not big on open-source anymore but this still seemed cool to make open-source since it's just a stupid blog.

Features

  • Performant ⚡ . Does not re-fetch blogs unless there's a change.
  • Rendering list of all blogs.
  • Rendering titles.
  • Rendering content (essentially, title arrays w text property).
  • Rendering images (sort of. dimensions are icky).
  • Rendering Lists.

image

--

image2

How

Okay, so, to use Notion API and render content, you need to have a server. Since this is just a front-end, I chose to deploy my own serverless function on Cloudflare workers and consume it instead.

  1. I used Splitbee's open-source Notion API worker to consume the Notion API.
  2. I used Cloudflare Workers to deploy the worker.
  3. Dig into the source code to see how I made it work.

This was the easy part. The shitty part was how Notion's API works in the first place. The content is A MESS. I had to use a lot of hacks to get it to work.

From Notion's standpoint though, this is pretty neat. The way they have everything in blocks. I mean, that's how the whole thing functions.

To-do

Look at issues.

Config

  • NOTION_URL: The url of your worker.
  • NOTION_BASE: where your blog is hosted.

About

A serverless Notion-powered blog in React I'm trying to build for fun. If I had to pick a name for this, it'd be COKE.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published