How notioncms.dev is built with Eleventy and Notion CMS

This site, notioncms.dev, you are currently viewing is self-contained in the way that these words you are reading were written into a Notion page, and were converted into a website using Notion CMS and the static site generator Eleventy.

This guide shows you how it is done so you can utilize Notion CMS in your Eleventy built website as well.

1. Glance through the concept

A Notion page contains content, metadata, and some basic styles, and whatever web framework or tool you use defines appearance.

A Notion database contains Notion pages which share the same structure of metadata. For example, articles that are written by different authors, on different dates, with different tags, and etc.

1. Create a Notion API Token

2. Create a Notion page and database

2. Create a Eleventy website from scratch

Initialize a new project and install Eleventy

# Initialize a new project
mkdir notioncms.dev
cd notioncms.dev
npm init -y
# Install Eleventy as a dev dependency
npm install --save-dev @11ty/eleventy

3. create the layout

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    <main>
      <section>
        {{ content | safe }}
      </section>
    </main>
  </body>
</html>

---
layout: base.njk
eleventyComputed:
  title: "{{ homePage.properties.title }}"
---

{{ homePage.body | safe }}

3. Install and setup eleventy-plugin-notion-cms

What eleventy-plugin-notion-cms does is pulling content from the Notion pages and databases you specified using notion-cms, and injecting them into your Eleventy global data.

As of the time this page is written, it requires you to do an extra step to inject the data into Eleventy global data.