svelte-notion-kit

Svelte Notion Kit

Brings your Notion pages to SvelteKit

Svelte Notion Kit

Boilerplate to quckly get up and running with Svelte and Notion, with

  • Typescript as the language choice
  • Tailwind CSS for quick styling without getting out of your HTML
  • ESLint for static code analysis
  • Prettier for code formatting
  • SEO pre-configured
  • Icons support out of the box

How to configure Notion?

  • Retrieve a NOTION_TOKEN by following their Getting Started guide
  • Create a table as the database of your content, and copy its id. Maintain it as NOTION_DATABASE_ID
  • Add following columns as a post attribute
    • title (title) - For post title
    • summary (text) - For post summary
    • tags (multi-select) - For post tags
    • author (person) - For post's Author
    • published (checkbox) - Published? (un-used currently)
This will setup your Notion table, as the table for your SvelteKit + Notion blog. Congrats!

How to configure the SvelteKit App?

  • The NOTION_TOKEN and NOTION_DATABASE_ID is expected to be available in your Vercel/Netlify account as environment variables. Add them, fork the project and deploy on Vercel.
  • The project uses the @sveltejs/adapter-vercel by default. If you want to deploy on Netlify, install @sveltejs/adapter-netlify and change the adpater key in svelte.config.js to `netlify()
  • Your local instance expects VITE_ prefixed with the aforementioned environment variables to run. Refer .env.example for help.

Top categories

Loading Svelte Themes