Jenaro Calvino

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

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:

   - posts.js

So let me walk you through,


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 and that's it, you have all your notes under notes key.


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:

layout: post.11ty.js

This folder will contain our pages for the blog, will be mapped to /blog/ and 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 ended up looking like:

    data: posts.posts
    size: 1
    alias: post

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


The css is pretty straightforward, but, to get it to be mapped by 11ty we need to use .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) {
  return {
    passthroughFileCopy: true,

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


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!

almost 4 years ago

Jenaro Calviño