Eleventy Help

This page collects resources, tutorials and posts about Eleventy.

How it works

Eleventy is a static site generator. This means that you write create files using a combination of html/css/javascript and some template languages. Then you tell Eleventy to create your site. Eleventy reads the files you created and creates (generates) the HTML/CSS/JavaScript for your web site.

The original source files you write are in an input folder. The files Eleventy generates from that are put automatically in an output folder.

Eleventy Build Process miro presentation visualizes how the eleventy process works.

diagram of the Eleventy build process taken from the miro previously linked to.

Setup

Eleventy Repository Templates

To make your life easier I suggest using a repository template instead of trying to generate all of the files on your own.

Final Project Template

Here is the guide to making the 11ty repository for your final.

NOTE: for group projects only one person does this. They then invite the rest of the group to the repo as collaborators.

  1. Go to this repository: https://github.com/stein-bmcc/eleventy-sass
  2. Click use this template
  3. Give the new repo a name and save it. Make sure it’s public.
    • Invite others as collaborators if this is a group project
  4. Start a Codesapce
  5. Once it’s going, do the following in the Terminal
    • type: npm install
    • type: npm update
    • type npm start
    • Double check there are no errors

You’re now ready to go.

Overall Description of Files

For the most part you will have the files you need if you work off of the example repositories created in class. here are The basics:

  • .eleventy.js (this has 11ty specific setup including naming the input and output folders)
  • package.json (this names all of the node modules needed for everything to work).
  • .gitignore (this tells Git which files and folders it can ignore. It is important to ignore your output folder and the node_modules folder. Also good to ignore .env, .log and .DS_Store files)
  • Output folder (this has been named _site and src in our eleventy projects. It holds all of the files used to build your web site).
    • index.md (this will be your homepage, all sites need at least this.)
    • _includes folder (this folder must hold at least your base page template. You can add more templates if you want)
    • images folder (for your images)
    • js folder (for any JavaScript)
    • css or sass folder (for your CSS or Sass if you’re using)

Collections

These are one of the most useful features of 11ty. They allow you to do things like:

  • Show a list of pages with the same tag
  • Show related content

If the content on your site can be divided into categories, or you want to show groups of content in places, Collections will help. Here are some resources

Posts on our OpenLab Site

  • Showing Groups of Pages in 11ty

    There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called Collections that are a group of content. This post looks at how to show pages in a collection. That collection can be based on tags, custom front-matter variables, and a listing all of the files in……

  • Week 15: 5/9 + 5/11

    Tuesday 5/9 We will start by looking at making your group repo and a refresher on branching. Group Work We will give you some time to work in groups. While in groups: Additional Time If there is time left at the end, then we will also go into topics of interest to your groups and……

  • Deploy to Netlify

    This post covers how to get your site in the web using Netlify’s servers. Terminology Some words you might not know Video Walkthrough This is a screencast of me going through the steps below: Screencast of Deploy to Netlify Steps to Deploy to Netlify It will go to a new screen and show that your……