Lesson 31: Wrapping Up

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

We’ll start by copying through our default social image and favicon, then we’ll update our meta info partial. The first thing we need to do is add a passthrough copy for our meta assets.

Open up eleventy-from-scratch/eleventy.config.js in your text editor and add this line on around line 27, right after our existing passthrough copy setup for fonts.

eleventyConfig.addPassthroughCopy('src/images/meta');

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

{% 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:

<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.

Netlify config

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:

[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 site

In your terminal, stop Eleventy (Ctrl + C) if it’s running and run the following:

npm run production

Then, run this:

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:3000, you should see this:

The end

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’ve enjoyed this course, I’d love you to share it with your friends. That would be hugely appreciated. Here’s a Bluesky template to help with that. If you're on GitHub, you can star the repository for this course at uncenter/learn-eleventy.

Thank you

This course could not be possible without the work of many amazing people: the original author of this course, Andy Bell; Andy's editor, Amy Hupe; Cassie Evans, a very early course test-driver for Andy; and last but not least, the designers whom Andy commissioned to create work pieces for the Issue 33 project site. They are Faith Egwuenu, Bobbi Reyda, Saoirse Mullan, and Samuel Arhore.

Until next time, take it easy. 👋