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

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 👋