Problem
After Introducing Extend blocks I am getting errors thrown at me. Im a pretty raw beginner when it comes to this, so I dont even know if this is a right place to ask.

Errors I get after Npm start (Npx eleventy --serve):

Error writing templates: (more in DEBUG output)
Having trouble writing template: dist/index.html

TemplateWriterWriteError was thrown
Having trouble compiling template ./src/_includes/layouts/home.html

TemplateContentCompileError was thrown
tag extends not found, file:./src/_includes/layouts/home.html, line:1

ParseError was thrown
tag extends not found

Also getting Errors from

AssertionError was thrown:
AssertionError: tag extends not found at assert
regarding a bunch of variables in liquid.common.js, which seems odd to me.

Then it repeats starting with

Problem writing Eleventy templates: (more in DEBUG output)

Attempted Solutions

• Run CLI in admin mode
• move layouts folder out of _includes and change all refrences regarding this move

Hi!

I just started with Lesson 22 (Global CSS and design tokens) and found a small issue: The links to the starter files seem to be broken. The code references {{starterFiles }} but I didn't find the variable in the project.
https://github.com/andy-piccalilli/learneleventyfromscratch.com/blob/df1e3908f0797fdfa0b97707cb000d89bc1a1a42/docs/lesson/22.md#L17-L19

I have the zip file on my disk and also found the old download link from https://piccalil.li which is still working.
If you want I can send a PR to fix this by either using the old Piccalilli link or adding the zip file to a ./public/files directory. Do you have a preference?

Hey there, great job on providing this tutorial! I am learning 11ty myself, and I think it is much more gentle and easier to learn compare to the official 11ty docs. Good job there!

I just can't help but see that the learneleventyfromscratch.com is built using VuePress (which I think it is also a good SSG!). It is just ironic that you are teaching others to use 11ty, and yet you choose not to use it to build the tutorial site itself. I think it will be more convincing and bring more confidence to readers if you rebuilt the site using 11ty instead?

Hi!

First of all: thanks for the amazing course.
I'm currently at Lesson 19 and noticed an inline code snippet that isn't rendered correctly. In this line {{ assetHash }} is not rendered in the HTML output:
https://github.com/andy-piccalilli/learneleventyfromscratch.com/blob/c11b053c94bc3922a6ccd52e56744d847147ace6/docs/lesson/19.md#L364

My guess is that VuePress tries to interpret {{ assetHash }}. I don't have any experience with VuePress but I noticed that code snippets are often wrapped in ::: v-pre [ snippet ] ::: blocks. Could it be that this is missing here?

Here is a screenshot of the problem:

I will set up the project and see if I can fix this in a PR if you want.

Microsoft's new, official, native, open source Windows Terminal is the best terminal for Windows these days.

https://docs.microsoft.com/en-us/windows/terminal/

I would suggest wording along the lines of:

On Windows, Microsoft's own modern Windows Terminal is a fine choice.

It is slowly making its way to being the default in Windows. The latest preview builds have a setting to make it the default terminal right now, which is huge.

(also, retro mode is cool-as)

In the sass.js file, const sassProcessor = require('gulp-sass'); needs to also define the sass compiler.

ex: const sassProcessor = require('gulp-sass')(require('sass'));

I presume this is a mistake, and it should be deleted from the zip file.

In your examples you use config. but Eleventy currently uses eleventyConfig for configuration.

Please disregard, my mistake for not reading properly. Changing as much text as possible to stop others being redirected here.

Adding Passthrough

Syntax needs to be:

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

Edit: Adding links to my completed lesson code here, as I go through the tutorial.

• end of lesson 2 code

Original:

Is it still possible to download snapshots of the project at the end of each lesson?

In lesson one, it says that the zip files are linked at the end of each lesson, but I am not seeing them anywhere.

I'm at the end of Lesson 2 and already getting errors. Because the course is retired, I can't tell if I made a mistake, or if it is simply something that needs to be trouble-shot for updating.

Thanks for any help on this!

From Lesson One:

TIP

Last point before we get stuck in to the course.

At the end of each lesson, there will be a link to a ZIP of a snapshot of the course project where it is at the end of the lesson that you’re on.

This means that if something is broken and you don’t know how to fix it: grab that zip archive and replace your project folder with its contents.

Don’t forget to run npm install if you do this though!

keywords: starter files, zip files, snapshots

Hey, great course. In lesson 9, it uses eleventy-cache-assets, which has been replaced by eleventy-fetch.

I just did this lesson using eleventy-fetch and it worked. Making a few tweaks to the docs to replace eleventy-cache-assets with eleventy-fetch would bring this lesson up to date.

The blog.md code shown in Lesson 11 looks like this:

---
title: 'The Issue 33 Blog'
layout: 'layouts/feed.html'
pagination:
  data: collections.blog
  size: 5
permalink: 'blog{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html'
paginationPrevText: 'Newer posts'
paginationNextText: 'Older posts'
paginationAnchor: '#post-list'
---

The latest articles from around the studio, demonstrating our design
thinking, strategy and expertise.

The paginationPrevText and paginationNextText values should be swapped here.

I had left a project for a few months, when I came back to it today, and at the beginning of lesson 9, I see there is a call to run npm install. I think we should include a boilerplate reminder to run 'npm update' before running install. Especially since I was coming back to the project after a few months.

To match the information on the eleventy site, the base config file should be as shown below. The directory name is irrelevant, but the lambda expression is replaced with a function call.

module.exports = function (eleventyConfig) {
     return {
          dir: {
               input: "src",
               output: "_site",
          },
     };
};

Hello,

I am still going through the tutorial and trying to document errors and how they are fixed.
At lesson 19, there was a breaking change with Gulp and/or Sass
Here is the issue: maiya-22/learning-repo__learn-11ty-from-scratch#4

If anyone can help solve this, I will followup with posting updates here, etc.

Would it be better to fix the repo by removing SaSS all together? I saw @Andy-set-studio comment somewhere that he does not use SaSS anymore due to the advances with CSS.

Any pointers are really appreciated. Thank you!

This course is great, Andy. Thanks. I'm very happy to have bought it earlier in the year, even though I'm only now getting to it and it's now free!

In Lession 11 Wrapping up your reference to:

 http://localhost:8080https://piccalil.li/blog/

…should be:

 http://localhost:8080/blog/

…and you have a missing image:

gulp-imagemin in its latest version is now ESM only (see also #24 ).

In my personal project I have changed the gulp pipeline to use ESM and was able to update all dependencies to their latest versions.

I want to leave my code here for anyone who's interested in doing the same, too.

I followed this guide.

1. Update packages

Updated package.json:

{
  "devDependencies": {
    "get-google-fonts": "^1.2.2",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-imagemin": "^8.0.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.64.1"
  }
}

2. Update gulp to use ESM

Change the file endings of all gulp files to .mjs:

• gulp-tasks/fonts.mjs
• gulp-tasks/images.mjs
• gulp-tasks/sass.mjs
• gulpfile.mjs

3. Change syntax

gulpfile.mjs:

import gulp from "gulp";
const { parallel, watch: gulpWatch } = gulp;

// Pull in each task
import fonts from "./gulp-tasks/fonts.mjs";
import images from "./gulp-tasks/images.mjs";
import sass from "./gulp-tasks/sass.mjs";

// Set each directory and contents that we want to watch and
// assign the relevant task. `ignoreInitial` set to true will
// prevent the task being run when we run `gulp watch`, but it
// will run when a file changes.
const watcher = () => {
  gulpWatch("./src/images/**/*", { ignoreInitial: true }, images);
  gulpWatch("./src/scss/**/*.scss", { ignoreInitial: true }, sass);
};

// The default (if someone just runs `gulp`) is to run each task in parallel
export default parallel(fonts, images, sass);

// This is our watcher task that instructs gulp to watch directories and
// act accordingly
export const watch = watcher;

gulp-tasks/fonts.mjs:

import GetGoogleFonts from "get-google-fonts";

const fonts = async () => {
  // Setup of the library instance by setting where we want
  // the output to go. CSS is relative to output font directory
  const instance = new GetGoogleFonts({
    outputDir: "./dist/fonts",
    cssFile: "./fonts.css",
  });

  // Grabs fonts and CSS from google and puts in the dist folder
  const result = await instance.download(
        'https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,700;1,400&family=Red+Hat+Display:wght@400;900'
  );

  return result;
};

export default fonts;

gulp-tasks/images.mjs:

import gulp from "gulp";
import imagemin, { mozjpeg, optipng } from "gulp-imagemin";

// Grabs all images, runs them through imagemin
// and plops them in the dist folder
const images = () => {
  // We have specific configs for jpeg and png files to try
  // to really pull down asset sizes
  return gulp
    .src("./src/assets/images/**/*")
    .pipe(
      imagemin(
        [
          mozjpeg({ quality: 60, progressive: true }),
          optipng({ optimizationLevel: 5, interlaced: null }),
        ],
        {
          silent: true,
        },
      ),
    )
    .pipe(gulp.dest("./dist/assets/images"));
};

export default images;

gulp-tasks/sass.mjs:

import gulp from "gulp";
import cleanCSS from "gulp-clean-css";
import * as dartSass from "sass";
import gulpSass from "gulp-sass";
const sassProcessor = gulpSass(dartSass);

// Flags whether we compress the output etc
const isProduction = process.env.NODE_ENV === 'production';

// An array of outputs that should be sent over to includes
const criticalStyles = ['critical.scss', 'home.scss', 'page.scss', 'work-item.scss'];

// Takes the arguments passed by `dest` and determines where the output file goes
const calculateOutput = ({history}) => {
  // By default, we want a CSS file in our dist directory, so the
  // HTML can grab it with a <link />
  let response = './dist/css';

  // Get everything after the last slash
  const sourceFileName = /[^(/|\\)]*$/.exec(history[0])[0];

  // If this is critical CSS though, we want it to go
  // to the _includes directory, so nunjucks can include it
  // directly in a <style>
  if (criticalStyles.includes(sourceFileName)) {
    response = './src/_includes/css';
  }

  return response;
};

// The main Sass method grabs all root Sass files,
// processes them, then sends them to the output calculator
const sass = () => {
  return gulp
    .src("./src/scss/*.scss")
    .pipe(sassProcessor().on("error", sassProcessor.logError))
    .pipe(
      cleanCSS(
        __prod__
          ? {
              level: 2,
            }
          : {},
      ),
    )
    .pipe(gulp.dest(calculateOutput, { sourceMaps: !__prod__ }));
};

export default sass;

I am at lesson 19 : Setting up SASS

running npm start throws an error

 Having trouble writing template: dist/about-us/index.html

`TemplateWriterWriteError` was thrown
 Template render error: (./src/_includes/layouts/about.html)
  Error: template not found: css/critical.css

Tested on Windows 10
npm --version: 6.14.11
node --version: 14.16.0
and Windows 7
npm --version: 6.14.8
node --version: 14.15.1

The problem is Regex in file /gulp-tasks/sass.js
History array return the file path in windows filepath format in Windows
Current regex does not work for matching filenames in Windows filepath format
sass never creates a css directory inside /src/_includes directory

Present Code:

 const sourceFileName = /[^/]*$/.exec(history[0])[0]; 
 // only matches last element after / in the file path 
 // (works for Unix file format, fails for windows)

Modify it to :

  const sourceFileName = /[^(/|\\)]*$/.exec(history[0])[0]; 
  // matches last element after / and \ in the the file path 
  // (works for both file formats)

  /*
        [^          Matches any character not in the square brackets
            (       Creating a group 
                /   Match the / character
                |   Alternation. Matches either the character before or after the symbol
                \\  Match the \ character and one extra \ for escaping the backslash
            )   
        ]
        *           Matches 0 or more repetition
        $           Matches the end of string
  */

Demo:

Lesson 21 doesn't work, at least for me. I thought I'd open an issue, if only to reassure people who are having the same issue.

Unless there's another version, it seems gulp-imagemin has moved from CommonJS to modern ES Modules. This means the image optimisation can't be mixed with the non-module gulpfile.

If the course moves from Gulp to NPM Scripts this won't be an issue any more.

rssLastUpdatedDate is deprecated in new version of eleventy.

As per docs, should use getNewestCollectionItemDate | dateToRfc3339.

This is a rather minor issue but I noticed that a few links (one in Lesson 26 and another in Lesson 28) were not working properly. I was wondering if I could create a PR to correct them!

Lesson 31: Wrapping Up, under Netlify Config the link to Read this handy guide on deploying to Netlify is broken.