Collected notes as a CMS

Today I thought how hard could it be to set up collected notes as a CMS, spoilers alert: really easy.

To set it up I used eleventy or 11ty for the first time and it blew me away, it just works!

As the docs say, the setup is really easy, this was how I set it up:

mkdir e11y-collected-notes && cd e11y-collected-notes
yarn init -y
yarn add @11ty/eleventy
touch index.md

At this point I opened index and entered something like "Hello 11ty" and in package.json I added

"build": "eleventy --formats=md,11ty.js",
"dev": "eleventy --serve --formats=md,11ty.js"

Here --serve is for the local server and --formats is for whatever format you will be templating with, in this case, md for markdown and 11ty.js for Javascript template functions.

yarn dev should work for you straight out of the box, lets set up our file structure:

/_data
   - posts.js
/_includes
    layout.11ty.js
    post.11ty.js
/blog
    index.md
    post.md
/css
    global.css
.eleventy.js
index.md
package.json

So let me walk you through,

_data

Here we have the call to out API, anything exposed here will be able to be consumed from our pages.

Consuming Collected Notes API is so easy, in this case I just made a call to https://collectednotes.com/jenaro.json and that's it, you have all your notes under notes key.

_includes

Here we have the layouts, a general layout for the homepage and a post layout for each post; to consume a layout all you need to do is, in said template.

In my case for example: post.md

---
layout: post.11ty.js
---

blog

This folder will contain our pages for the blog, index.md will be mapped to /blog/ and post.md to /blog/<post title>.

To map the latter, we use something 11ty defines as pagination navigation with permalink, and that defines how your file will be mapped to the output.

This is what post.md ended up looking like:

---
pagination:
    data: posts.posts
    size: 1
    alias: post

permalink: "blog/{{ post.path | slug }}/"
layout: post.11ty.js
---

{{post.body}}

css

The css is pretty straightforward, but, to get it to be mapped by 11ty we need to use .eleventy.js

.eleventy.js

This is eleventy's configuration file and it has to be at root level. This is what I did to get 11ty to map the css folder into the output:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("css");
  return {
    passthroughFileCopy: true,
  };
};

index.md

Lastly the index.md at root level will be parsed to the / route.

Conclusion

11ty blew my mind, how easy it was to set up and get running, if you want to see the end product you can at my github, I love taking notes on Collected Notes and using it as a CMS is viable!