Lesson 31 - Wrapping Up

Course
Learn Eleventy From Scratch
Module
Wrapping Up

Here we are at the last lesson. Time to get our new site ready to go live and plan for the future.


We’ve got a beautiful website now, so let’s do some final tweaks to get it ready for production.

Adding a social image and favicon permalink

We’ll start by adding our default social image and favicon, then we’ll update our meta info partial. The first thing we need to do is download a couple of assets.

Download assets

Now you’ve got them, take the meta folder from the zip you’ve just downloaded and copy it into your eleventy-from-scratch/src/images folder.

Now open eleventy-from-scratch/src/_includes/partials/meta-info.html and add the following on line 10:

Code language
HTML
{% if not socialImage %} 
  {% set socialImage = site.url + '/images/meta/social-share.png' %} 
{% endif %}

That links our default social image up for us to use this new asset if no image is defined in a page’s Front Matter.

At the bottom of eleventy-from-scratch/src/_includes/partials/meta-info.html, add the following:

Code language
HTML
<link rel="icon" href="/images/meta/favicon.svg" type="image/svg+xml" />

Because most browsers now support SVG shortcut icons/favicons, we’ll keep it simple for ourselves and just add that. You could, however, generate a full suite of icons, using a service like RealFaviconGenerator.

Minifying HTML output permalink

Right, next up, we’re going to use a handy Eleventy feature called Transforms. We’re going to grab each page as it’s built and minify the HTML, only if we are in production mode.

The reason why we only minify HTML in production mode is because this upcoming function is pretty heavy-duty, for understandable reasons, so it makes sense to only run it once per page.

Transforms are a bit like filters where we take the input, pass it though the Transform and then get the transformed output back in return. You can think of it a bit like how our Gulp tasks worked earlier in the course.

Let’s create the Transform code. Create a new folder by running the following in your terminal:

Code language
bash
mkdir src/transforms

Now, create a new file called eleventy-from-scratch/src/transforms/html-min-transform.js and add the following to it:

Code language
JavaScript
const htmlmin = require('html-minifier');

module.exports = (value, outputPath) => {
  if (outputPath && outputPath.indexOf('.html') > -1) {
    return htmlmin.minify(value, {
      useShortDoctype: true,
      removeComments: true,
      collapseWhitespace: true,
      minifyCSS: true
    });
  }

  return value;
};

What this function does is first check each page to see if it’s an HTML file. If not, it returns it out, untouched. If it is a HTML file, it runs it through a package called html-minifier which gives us back some nice compressed HTML in return.

We’ve got a new package here, so let’s install it. In your terminal, run the following:

Code language
bash
npm install html-minifier

Now that’s installed, let’s wire it up.

Open up eleventy-from-scratch/.eleventy.js and on around line 6, add the following:

Code language
JavaScript
// Transforms
const htmlMinTransform = require('./src/transforms/html-min-transform.js');

// Create a helpful production flag
const isProduction = process.env.NODE_ENV === 'production';

We’ve imported our Transform, and just like in our Gulp tasks, we’re determining whether or not we’re in production mode.

Now, in the same file, on around line 20, delete the following:

Code language
Diff - don’t copy
// Set directories to pass through to the dist folder
config.addPassthroughCopy('./src/images/');

Now, replace it with the following:

Code language
JavaScript
// Only minify HTML if we are in production because it slows builds _right_ down
if (isProduction) {
  config.addTransform('htmlmin', htmlMinTransform);
}

This wires up our htmlMinTransform Transform, only if we are in production mode.

Netlify config permalink

You can deploy this site wherever you want because it’s a static site. You can also deploy to Netlify for free.

Read this handy guide on deploying to Netlify. It’ll give you all the info you need.

For now, though, let’s give Netlify a helping hand. Create a new file called eleventy-from-scratch/netlify.toml and add the following to it:

Code language
text
[build]
  command = "npm run production"
  publish = "dist"

What we’re doing here is saying to Netlify: “to deploy this site, run the production task from our package.json file and then publish the dist folder that you created.”

Job done!

Testing our production task permalink

We already created our production task, so all we need to do now is run it.

In your terminal, stop Eleventy if it’s running and run the following:

Code language
bash
npm run production

Then, run this:

Code language
bash
cd dist && npx serve

This runs a package called serve which runs a local server with your production ready website.

If you go to http://localhost:5000, you should see this:

The home page of our finished website

If you view the source, it should look like this:

A block of compressed, minified HTML

The end permalink

That’s it—we’ve finished this course. Huge congratulations to you for getting this far. You’ve learned so much by completing this course and I really hope that you take these new skills and apply them into making some truly magnificent work.

What can you do now?

Here are some ways you can build on what you’ve learned:

  1. Apply your own design and front-end to your new website.
  2. Try to get 100’s across the board on lighthouse (we’re most of the way there already).
  3. Add some new sections to this site, or even remove some.
  4. Create your own personal site and blog using the Eleventy and the front-end development skills you’ve learned in this course.

If you do make something, I would love to see it. I teach because I love to see people skill up—it brings me a lot of joy.

If you do build something with the skills that I’ve taught you during this course, I’d be over the moon if you Tweet me a link to @piccalilli_, or post on any social network using the hashtag #ILearnedEleventyFromScratch.

If you’ve enjoyed this course, I’d love you to share it with your friends. That would be hugely appreciated. Here’s a Tweet template to help with that.

Thank you permalink

I’ll start by thanking you for purchasing this course and supporting my work. I really, really appreciate that.

My family gets the biggest thanks because they’ve put up with me obsessing over this course for months and have always supported me throughout the whole thing.

I also want to give a huge thanks to my editor, Amy Hupe. She has shaped all of the words into something truly special and has made a huge impact on the quality of the final product.

Next, I want to extend a special thanks to Cassie Evans, who took a very early version of this course and test-drove it for me; their feedback improved it tenfold.

Finally, I would love to thank the designers who I commissioned to create work pieces for our project site. They are Faith Egwuenu, Bobbi Reyda, Saoirse Mullan, and Samuel Arhore.

Until next time, take it easy 👋

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me