Week 6: 3/8 + 3/10

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 these two videos on Creating Front Matter Data and Building a Template Page.

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:

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:

  1. 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.
  2. Open VS Code
  3. Open The Terminal
  4. In the Terminal Checkout the 02_01b branch:
    git checkout 02_01b
    1. NOTE: for the second video you will do:
      git checkout 02_02b
  5. You can create a new branch copy AFTER you’ve checked out the branch by typing something like:
    git checkout -b 02_01mine
    1. 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).
  6. In the Terminal start the project type: npm start
  7. 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

screenshot from Terminal in Visual Studio Code

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.

View GitHub Repository

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

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

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.

List of Journal Entries

Click on the link above to see the journal entries organized by week. Here are the instructions:

  1. Go to Journal Entries
  2. Read and comment on TWO journal entries from two different weeks.
  3. Try to comment on an entry that nobody else has commented on yet.
  4. BONUS: go back in later and add a comment to a third entry that already has a comment.

Leave a comment