Using Data to Create a CMS With Forestry and Eleventy

Transcript

1. Using the Power of Data to Create a Simple CMS Using Forestry and Eleventy.
2. What Is Eleventy? Eleventy is a static site generator (SSG) made to be a JavaScript alternative to Jekyll. It is zero-config by default, but has flexible (and seemingly infinite) configuration options. It works with your project’s existing directory structure, uses independent template engines, and works with multiple template languages. You can pick one or use them all together in a single project. - HTML, Markdown, JavaScript, Liquid, Nunjucks, Pug, Handlebars, Mustache, EJS, and Haml are all options. Installing it in your project is a single `npm install @11ty/eleventy` away. To extend it, you add a `.eleventy.js` file to your project root and configure away; this is how you install plugins, add new language filters, etc.
3. What Is Forestry? Forestry is a Git-backed content management system (CMS) for websites built using static site generators. It is entirely powered by Git, which means any changes made in the Forestry interface get committed upon save. You have the ability to create multiple sites based on different branches of the same repo and, depending on the SSG you're using, can save new posts as drafts. Forestry is able to edit Markdown, JSON, YAML and TOML files, no matter your SSG of choice. To get started, you create a Forestry account, log in to your Git provider, and select your repo. Forestry will add a batch of config files to a `.forestry` folder in your project root, which handles all the data and settings of your CMS.
4. How I Got Here 01 Eleventy was the first SSG I tried out and it immediately felt natural to how I wanted to build my website. 02 As time went on, I experimented with its extensibility and templating languages, seeing how much I can do at once. 03 My site is fairly straightforward - consisting of a homepage, posts, projects, and a bio - but it’s also my testing playground for anything new I want to try. It got to a point where I needed a simpler way to manage my blog.
5. Before we continue... • Pages in 11ty use layout files, stored in the `_includes` directory. • The layout a page should use is denoted in the page’s Front Matter. • Layouts work as bases for your page, where all your page’s content gets passed into the `{content}` section of your layout. • Page’s in a single directory can use their own layouts, so the final appearance can vary widely even if the pages are stored in the same place.
6. Front Matter Front matter is YAML (or JSON, or TOML) applied at the top of a file as metadata. In the case of 11ty, it can be used to pass data from template to template. It looks like this → --- title: Name of Your Post date: 2021-10-06 description: what is this about? tags: [“first tag”, “posts”, “javascript”] layout: name-of-layout-file.njk --- # This is Level 1 Heading You’re writing Markdown here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
7. Front Matter My site contains post pages (a blog) and project pages (a.k.a. “work”). Both types of pages are Markdown files using their own dedicated layout file. My /work/ page displays both types in their own dedicated sections; project pages are up top and posts are down below. • root ◦ _includes ▪ layout.njk ◦ /posts ▪ first-post.md → site.com/posts/first-post ▪ some-small-project.md ▪ index.njk ▪ ... ◦ /work ▪ this-is-a-project.md ▪ cool-company.md → site.com/work/cool-company ▪ index.njk ▪ ... ◦ index.njk → site.com/
8. Screenshot of my /work/ page
9. Main Work Featured Posts
10. Editing In Forestry By this point, we’ve created some pages, gave them metadata in the form of front matter, and have some layouts that can present our pages. It’d be a pain to have to copy & paste the necessary front matter fields into each new post or project. You might forget how to format a certain field, or leave one out altogether. Instead of creating starter files in your project (which you’ll have to tell 11ty to ignore when building the site - been there done that), you can create Front Matter Templates in Forestry for easy reuse.
11. This is what my Blog Post Front Matter template looks like. It contains all the fields a post could potentially have with their associated types (toggle, text, date, etc). Front Matter templates are independent of the pages that use them. You could use an existing page to create a template from, but I manually created this one and tied it to any new blog posts created in Forestry.
12. An example of a completed blog post in Forestry. FYI, if you configure Eleventy to use Nunjucks as your Markdown engine, then you can use the {% image %} shortcode in your posts too!
13. The JSON file we created feeds data to a Nunjucks page, which generates the resulting resume.
14. A snippet of the resume’s Nunjucks page.
15. Summary Eleventy is a great static site generator with unlimited customization possibilities. It connects well to Forestry CMS for a nicer editing experience on your personal (or not) website.