I've finally got this blog(ish) website setup in a way I'm happy with. Most of the site is just a static export from sapper but the learning pieces are all entries in a Notion table. Each page in the table has a slug property which sets the url you navigate to e.g. this piece is building-a-blog-with-svelte-and-notion.

Setting up

To begin you'll need to create a new sapper project:

npx degit "sveltejs/sapper-template#rollup" my-svelte-notion-blog
cd my-svelte-notion-blog
npm install

This will scaffold the general structure for a sapper site. There's lots of template pages that you'll want to change (index.svelte, about.svelte, etc) but we're going to focus on the blog folder.

Go ahead and delete everything inside the blog folder and create an empty index.svelte file.

Creating the Notion Table

First we'll need a Notion table where we are going to pull the posts from.

  1. Create a new page containing Table - Full Page
  2. Add a table item called My first post or whatever you like
  3. Give My first post a new property slug with value my-first-post – we'll use this for the url
  4. Click on Share and copy the id after the page's title in the url somewhere

Listing all posts

Now, we can get all the items from this table and display them in our website. Notion doesn't have a public API yet but fortunately Splitbee have created a wrapper for their private API, which we'll interact with using sotion

npm install -D sotion

Sotion has built in support for building a blog based on our Notion table. First we'll scope our posts to that table. In _layout.svelte

<script>
	import { sotion } from "sotion";
	const tableId = 'xxxxxxxx' // Whatever you copied before
	sotion.setScope(tableId)
</script>