https://github.com/dispherical/notion11ty

Use notion as a CMS in 11ty. Can be used with anything else, but was specifically designed with 11ty.
https://github.com/dispherical/notion11ty

notion notion-api notion-blog

Last synced: about 1 month ago
JSON representation

Use notion as a CMS in 11ty. Can be used with anything else, but was specifically designed with 11ty.

• Host: GitHub
• URL: https://github.com/dispherical/notion11ty
• Owner: dispherical
• License: mit
• Created: 2022-05-10T23:58:02.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-20T05:22:12.000Z (about 2 years ago)
• Last Synced: 2024-10-27T13:48:52.135Z (2 months ago)
• Topics: notion, notion-api, notion-blog
• Language: JavaScript
• Homepage:
• Size: 22.5 KB
• Stars: 5
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# notion11ty

Use notion as a CMS in 11ty. Can be used with anything else, but was specifically designed with 11ty in mind. Requires tinkering and browsing the source code to use. It exposes the following object to use in your templates:

```

title: "Why do cockroaches exist?",

date: "MMMM do[,] YYYY"

html: "
Hello and welcome
...",

readTime: "5 min read",

slug: "why-do-cockroaches-exist",

description: "Hello and welcome (150 chars or less)",

```

### Table setup

The code automagically is setup to use this table structure 

![](https://doggo.ninja/lfdgYE.png)


### env setup

`NOTION_API_KEY` is an API key for notion, used for fetching posts

`NOTION_API_TABLE` is the table ID, where the post is fetched from

`COOKIE` is for downloading the post images, used with [notion-exporter](https://npm.im/notion-exporter). It's the cookie named "token_v2"

Put it in the root folder and it should work.

![](https://doggo.ninja/HRmLaD.png)

### What each file does

`_data/posts.js`

Fetches the post content and rewrites the HTML to use the weird image path format

`.eleventy.js`

Uses imageResolve.js to download images

`imageResolve.js`

Downloads images and places them in the \_site folder to be published