Hello World

Cat of the Day

Collections

Collections are groups of related content created by adding tags.

two curly braces vs a single curly brace and a percent sign

the portion retrieving the frontmatter variable is flanked by two curly braces. For both Liquid and Nunjucks templating, \{\% \%\} contains functions and {\{ }\} displays variables.

Posts

Nothing

list

Nobody

Instruct 11ty How to Handle Template Processing

While we can do some template mixing, sometimes 11ty needs a little hint on our expectations of how to process the mix.

In the case of mixing templating with markdown, 11ty only allows either Liquid or Nunjucks.

What happened to cause our error had to do with order of operations, and in this case we need to add an 11ty-supplied frontmatter key to tell 11ty which order to process the templating vs. the markdown.

Add templateEngineOverride: njk,md to index.md frontmatter, which says to process the Nunjucks include first and then continue processing the markdown to render.

Hooray! The error is resolved, and we can again see our postlist being rendered on the home page. Create a CSS File

One big thing missing from our site is some style 😎

CSS is not yet a file type recognized for auto-inclusion in the build directory, so we need to do a few extra steps.

First, let's create a very basic starting point for our CSS.

Create src/css/style.css, and add:

body { font-family: sans-serif; }

Passthrough CSS

In order for 11ty to recognize our CSS file and include it in the build directory, we need to modify .eleventy.js.

As the first line inside of the module.exports function (before the return we had previously added), add:

eleventyConfig.addPassthroughCopy("./src/css");

This tells 11ty to "pass through" the CSS directory. Watch CSS for Changes

In addition to the pass through, we also need to ask 11ty to watch the CSS directory for changes so that when we modify our CSS file it triggers a rebuild and refresh from Browsersync.

Still in .eleventy.js, add the following after our pass through line:

eleventyConfig.addWatchTarget("./src/css/");

When changes are made to .eleventy.js, it typically requires stopping the watch process and restarting. On both Mac and PC, use Ctrl + C in Terminal to stop the watch command, and then re-run npm start to start it again. When complete, the CSS directory should be present in public and if you test modifying style.css the changes should cause a rebuild and be updated in public/css/style.css.

Link to Stylesheet in base Layout

Now, our CSS hasn't updated our site to a sans-serif font yet. Any guesses why?

Yup - we need to add the stylesheet link to our layout!

Within _includes/base.njk, add the following within the section after the : <link rel="stylesheet" href="/css/style.css" /> And on save, once Browsersync refreshes, the page content should be using a sans-serif font. 🏁 Checkpoint: You have now created a successful 11ty starting point! Using what you've learned so far, you can continue making different content types and organizing them into collections. You know how to modify their permalinks, and chain layouts. And you know how to use Liquid and Nunjucks to display variables and leverage for loops. You can also mix templating languages and overcome templating pitfalls. And you can add and watch a CSS file. The last few sections show a bit more advanced features of 11ty that will help you take your project further! <h1>Custom Data</h1> One of the expected directories in the 11ty file system is _data, and any files you create here that are module.exports or basic JSON data is made availably globally to your pages and layouts. Open .eleventy.js, and add the following between the work related to our CSS, and the return: eleventyConfig.addFilter("randomItem", (arr) => { arr.sort(() => { return 0.5 - Math.random(); }); return arr.slice(0, 1); }); addFilter globally makes the "randomItem" filter available to any templating language. In this case, we expect that the data that will come into the filter will be an array, since we'll be using it on our facts array. The body of the filter is a very basic randomizing function written in JavaScript. Add the Filter to facts Loop <h1></h1> Back in our post layout, we'll update our for loop to include our filter. If you recall from applying the safe filter, a filter goes after the variable or collection it is being applied to, with a pipe | character inbetween. The facts array is passed into the filter for processing. On save, there should only be one randomly selected fact displayed on each blog post. Of course, there's a chance that the fact will be the same since it's a small pool to choose from ☺️ Important note: Since 11ty is a truly static site builder, the quote will be selected during build time and not on page load. This is an important difference from dynamic build tools like Gatsby. You can include JavaScript on your own to make this selection happen on page load, but using the filter method makes it part of the build process. If you have content that you want to update somewhere between statically and page load, you can use tools like IFTTT to trigger periodic builds if your site host supports webhooks. Create Data from API <h1></h1> 11ty can use the output of Node modules as data, which also means we can use Node packages to help us retrieve data. And it means we can get external data at build time. Let's explore this by retrieving a cat picture from an API using axios for fetching. Create _data/catpic.js, and add the following: const axios = require("axios"); module.exports = async () => { const result = await axios.get("https://aws.random.cat/meow"); return result.data.file; }; Note: You may need to add axios to your package for a local build to work: npm install axios It's ok if you're not very familiar with Node! What we're doing here is fetching the result from the cat pic API. Then we are returning the file key that is present in that particular data set. </main> <aside> Did you know horses can swim? Did you know that the average human can hold their breath for 2 minutes? Did you know that we live on Earth? </aside> </body> </html>