Week 6
Before Class: Learn
Last week we got started on setting up Eleventy. This week we will get into Eleventy and learn to use Templates. This is cool because after this week you will know enough to get a basic site up with Eleventy.
Do this before Monday
Watch
Watch these two videos on Creating Front Matter Data and Building a Template Page.
- Course Video (Collection): Eleventy Templates [19m 32s]
These videos go over using templates in Eleventy. There is some new terminology:
There is also a lot to learn about how to write the templates, how they’re processed and more. You may want to watch them through once, then try to follow along. We will roughly cover the first video on Monday and the Second video on Tuesday.
Related Links
Here are some related links from the videos:
- Site that shows converting YAML to JSON
- Nunjucks web site (this is the Template Language the course uses)
- Base Template: In the second video, Building a Template Page, he copies code from the wiki on the course GitHub Repo to create base.njk file. This is a link to that wiki page so you can copy too.
Follow Along: Getting Started
To refresh your memory on how to work with the class files, here is how you will get set up to follow along with the videos:
- Make sure you’ve done the Fork+clone stuff from last week so you have the files.
Make sure you have the Git Lens and Git History Extensions installed. - Open VS Code
- Open The Terminal
- In the Terminal Checkout the 02_01b branch:
git checkout 02_01b- NOTE: for the second video you will do:
git checkout 02_02b
- NOTE: for the second video you will do:
- You can create a new branch copy AFTER you’ve checked out the branch by typing something like:
git checkout -b 02_01mine- the name you give is up to you but generally I suggest using the existing branch name and replacing ‘b’ with some other word (mine, test, your name, whatever).
- In the Terminal start the project type: npm start
- Click on the Local Link to open a browser window preview (on mac shown below you hold the command key and click)
It should look something like this in your terminal
To Stop watching type this in your terminal: Control+C
We will go over all of this on Monday and Wednesday.
Course Files
Remember that all of the files for the site are in a GitHub Repository. Last week we went over Forking this repository, cloning it to your computer and how to use git checkout to get the branches.
If you haven’t already, you should Fork and Clone this repository to download it to your computer. Look at Last week for more info.
Live Sessions
Session 1: Creating Front Matter Data
Monday, March 8 at 7:30p–9:10p
Monday we will look templates and the basics of getting them processed in Eleventy.
Links for Monday Session
- Branch: 02_01b
- Miro Board
Session 2: Building a Template Page
Wednesday, March 10 at 7:30p–9:10p
Wednesday we will look at creating a base template to use to process your markdown files.
Links for Wednesday Session
- Branch: 02_02b
- Miro Board
- Base Template
After Class
This week instead of posting a journal entry for yourself. I would like for you to read some of your classmate’s journal entries and comment on them.
Click on the link above to see the journal entries organized by week. Here are the instructions:
- Go to Journal Entries
- Read and comment on TWO journal entries from two different weeks.
- Try to comment on an entry that nobody else has commented on yet.
- BONUS: go back in later and add a comment to a third entry that already has a comment.
