AgencyKit-11ty-Starter

Leverage the combined efficiency and power of 11ty as your SSG and Notion-as-a-CMS, powered by NotionCMS.

Define all of your website routes in your Notion database structure as you add content.

So this structure:

generates these routes:

[
  '/about',
  '/team',
  '/team/jacob',
  '/team/mordecai',
  '/pricing',
  '/posts',
  '/posts/how-to-use-notion-cms',
  '/posts/how-to-build-a-blog-with-notion'
]

Each of these paths automatically generate a page with the content on it in 11ty.

If the path has children, e.g. team and posts here, that path automatically generates a collection with the child pages in it. So the team collection will have jacob and mordecai pages and the post collection will have the posts.

This holds for any number of levels and is extremely powerful when it comes to building large website hierarchies and using the data in your collection however you need. Oh, did I mention that this happens automatically with no config?

No configuration besides setting 2 variables in .env is required to get started, but this is also a great jumping off point for more advanced workflows using NotionCMS plugins and custom 11ty templating and pagination.

Usage

1. Install the packages. npm install (or equivalent).

2. Set up your Notion database ID and API key in .env.

   NOTION_API=your_secret_here
   NOTION_DB_ID=your_db_id_here
   

   If you've never used Notion API before, you have to set up an integration and get an API key (steps here).

   Then you have to set up a NotionCMS-compatible database to hold your content (you can copy this one to start) and get to writing.

   Don't forget to set draftMode true if you haven't published anything. See full list of NotionCMS options here.

3. Run 11ty. npm run serve

Features

• Build large sites from Notion data with a single command
• Automatic collections straight from Notion
• All (non-draft) pages in Notion built by default thanks to 11ty pagination
• Tag based collections [coming soon]
• Very fast builds thanks to NotionCMS caching
• Notion image caching
• Supercharged SEO thanks to NotionCMS SEO core plugin and extendable to your exact SEO needs. Plus, if you're using 11ty for SSG, you're ahead of the pack already!

This is just an overview of why 11ty + NotionCMS is so powerful.

For full list of 11ty features:

11ty

NotionCMS

Minimal styling thanks to modern normalize and Sakura.