Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Eleventy By Example
Eleventy By Example

Eleventy By Example: Create powerful, performant websites with a static-first strategy

Arrow left icon
Profile Icon Bryan Robinson
Arrow right icon
NZ$21.99 NZ$31.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (10 Ratings)
eBook May 2023 198 pages 1st Edition
eBook
NZ$21.99 NZ$31.99
Paperback
NZ$39.99
Subscription
Free Trial
Arrow left icon
Profile Icon Bryan Robinson
Arrow right icon
NZ$21.99 NZ$31.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (10 Ratings)
eBook May 2023 198 pages 1st Edition
eBook
NZ$21.99 NZ$31.99
Paperback
NZ$39.99
Subscription
Free Trial
eBook
NZ$21.99 NZ$31.99
Paperback
NZ$39.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Eleventy By Example

Setting Up Your Website

At its core, Eleventy (11ty) is a simple concept. It takes a group of pages, data, and templates and combines them to create a static output – typically HTML – that can be served on a web server or distributed on a content delivery network (CDN). Tools that do this are typically referred to as static site generators (SSGs).

In this chapter, you’ll learn all you need to know to get your first simple 11ty website completed. In order to do this, we’ll talk a little bit about the history of static sites to uncover what makes 11ty special, as well as how to install and configure it on your computer to get moving in a simple, best-practice-focused structure. Every 11ty concept starts with the concepts in this chapter. This is what we will cover in this chapter:

  • What are static site generators and why are they important?
  • What is 11ty?
  • Running 11ty with no configuration
  • Configuring 11ty with basic best practices
  • ...

Technical requirements

In every chapter in this book, you’ll need a computer with Node.js and npm (11ty is built with Node.js and runs via npm), a code editor such as VS Code, and access to the book’s GitHub repository for both the starting point code and the finished work. 11ty’s minimum required Node.js version is 14. The code for this book was written and tested with Node 18. Basic knowledge of HTML, CSS, JavaScript, and the command line will also be beneficial.

Before beginning, fork and clone the project’s GitHub repository: https://github.com/PacktPublishing/Eleventy-by-Example.

What are static site generators and why are they important?

SSGs have been around since early in the history of web development with systems such as HSC (which stands for HTML Sucks Completely) and Movable Type looking to solve the sometimes problematic developer experience of authoring plain HTML for multi-page sites. These technologies added features such as includes and macros that made creating and maintaining HTML websites much easier.

The other direction development began to move in was rendering templates on the server instead of serving simple HTML back per request. The upside to this was a strong developer experience and the ability to create pages dynamically. Templates were created and uploaded to a server and when a request came from a client, the pages’ HTML was built and sent to the client. This methodology would become the predominant authoring experience for the web over the next decade. With it came longer load times.

SSGs would see a boost in 2008 with...

What is 11ty?

11ty is an SSG developed by Zach Leatherman in 2017 with a strong sense of inspiration from Jekyll but built in the then-flourishing JavaScript ecosystem. If you know a little Node.js or JavaScript, you can extend the functionality of 11ty. If you don’t have a strong JavaScript background but can run a few commands in the command line, you can use 11ty.

11ty has a few strong philosophies:

  • Static-first – While there are new features in 11ty that allow it to run at request time, as well as pre-generate HTML, the strongest use of 11ty will be to create a static site first, and then extend into the server rendering only when necessary.
  • Flexible – 11ty doesn’t prescribe one way to create sites. In fact, one of the strongest benefits of 11ty over other SSGs is that it comes bundled with over 10 templating engines that can be used separately or together.
  • Frontend agnostic – 11ty doesn’t force you into a single frontend...

Running 11ty with no configuration

While most sites you build with 11ty will require some amount of configuration, 11ty comes packaged with enough defaults to get you up and running without writing any configuration.

To start, from within the cloned GitHub repository, open project-1/chapter-1/start in your code editor. This project has a very basic HTML website. It has an assets directory with CSS and images and an index.html and about.html document with some basic structure and content. If you open index.html in a browser, you’ll get a web page, but it won’t have any styles associated and the anchor to the About page won’t work. That’s because this page is expected to run on a server.

Installing 11ty

In order to get a local server, we’ll install and run 11ty.

First, all Node.js projects need a package.json file. We can create one by running the following:

npm init -y

Running this command will initialize this project as a Node.js...

Configuring 11ty

While 11ty can be run without configuration, a little configuration will make our project cleaner and give us access to additional functionality within 11ty.

To configure 11ty, in our project root, we need a configuration file: eleventy.config.js. At its core, 11ty is a Node.js project. The 11ty configuration file is a JavaScript file that exports a configuration function.

The basic structure of the file is as follows (not project code):

// Create variables that require() any packages we need
const plugin = require('some-eleventy-plugin-package')
// Use module.exports to export a configuration function
module.exports = function(eleventyConfig) {
  // Run any code needed (including built-in 11ty methods)
  // If needed, return an object of configuration
  return {
     // Options here
  }
}

By default, 11ty does not keep track of CSS files, basic JavaScript files, or image files....

Understanding the difference between a page, template, and layout

One of 11ty’s strengths is also a source of confusion. 11ty comes bundled with 10 templating languages. These languages (including Liquid, Nunjucks, and Handlebars) can be used to create individual pages, includes, and layouts, and can be chained together to create complex systems. While this is incredibly powerful, it can create confusion around terminology.

The 11ty documentation says that layouts “are special templates that can be used to wrap other content.” This doesn’t necessarily clear things up. For this book, we’ll use the following definitions to try to keep things clear:

  • Page – an item meant to be rendered as a single URL on the final site, for example, index.html or about.html in this project
  • Layout – a file that is used by a page to wrap content in the entire structure for an HTML page
  • Include – a file consisting of a small, reusable...

Creating the base layout file

Up to this point, everything we’ve accomplished with 11ty can be replicated in other, smaller tools. Removing the basic HTML boilerplate from each page makes the code much more maintainable and extensible.

To start, we need a new subdirectory in the src directory. Name this directory _templates. By default, 11ty uses an _includes directory for includes and layouts. To avoid semantic confusion, we’ll update our configuration to use the new directory instead.

A note on directory naming

It’s perfectly fine to use the default folder names. Most of my 11ty projects use the _includes naming convention. This step is more for clarity than best practices.

In the configuration function’s return statement, update the dir object to include an includes property:

module.exports = function(eleventyConfig) {
    // Copy `assets/` to `_site/assets/`
    eleventyConfig.addPassthroughCopy...

Creating reusable includes

While the base layout is more maintainable, we can make it easier to reconfigure by breaking the layout down into smaller pieces called includes. These includes will be the beginning of taking the code and turning them into building blocks that can be remixed into different layouts as necessary.

To start, we need to identify the smaller pieces of the base template. Let’s create a header.html file in the src/_templates/includes directory and move all the HTML meta information and visible site header into that file. Everything from the DOCTYPE element to the header element should be removed from base.html and moved into the new file.

While we’re refactoring the header, let’s also move the <nav> element into its own include, as well. 11ty templates can be nested. This means we can include files inside other files. In this case, the header.html include can include navigation.html.

Create a navigation.html file in the includes...

Summary

In this chapter, we took a basic HTML website and converted it to an 11ty site. We learned about the philosophies and terminology that are core to understanding 11ty. We ran 11ty with no configuration, then set 11ty up with a best-practice structure using 11ty’s eleventy.config.js configuration file. We repurposed our HTML code into reusable layouts and includes for maintainability and reusability.

To take this chapter further, look at how you might break the header.html include down into smaller, more readable pieces. Maybe abstract out the meta tags into their own include or move the logo SVG into its own file.

In the next chapter, we’ll take a look at 11ty’s powerful Data Cascade and how to add dynamic or unique data to each include as well as to our pages and layouts.

Further reading

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Learn how to use and extend 11ty, one of the most flexible static site generators in the industry.
  • Optimize your experience by customizing 11ty to suit various projects’ needs
  • Create request-time experiences without recreating templates with 11ty Serverless

Description

11ty is the dark horse of the Jamstack world, offering unparalleled flexibility and performance that gives it an edge against other static site generators such as Jekyll and Hugo. With it, developers can leverage the complete Node ecosystem and create blazing-fast, static-first websites that can be deployed from a content delivery network or a simple server. This book will teach you how to set up, customize, and make the most of 11ty in no time. Eleventy by Example helps you uncover everything you need to create your first 11ty website before diving into making more complex sites and extending 11ty’s base functionality with custom short codes, plugins, and content types. Over the course of 5 interactive projects, you’ll learn how to build basic websites, blogs, media sites, and static sites that will respond to user input without the need for a server. With these, you’ll learn basic 11ty skills such as templates, collections, and data use, along with advanced skills such as plugin creation, image manipulation, working with a headless CMS, and the use of the powerful 11ty Serverless plugin. By the end of this book, you’ll be well-equipped to leverage the capabilities of 11ty by implementing best practices and reusable techniques that can be applied across multiple projects, reducing the website launch time.

Who is this book for?

This book is for anyone looking to build efficient websites while shipping less JavaScript to the client. Strong knowledge of HTML and CSS and beginner-level knowledge of JavaScript and the Node.js ecosystem, including querying APIs is a must.

What you will learn

  • Create a basic website with reusable templates and globally available data
  • Build a blog using 11ty's collections
  • Set up a photography site that uses the 11ty Image plugin to deploy properly sized images
  • Connect a content management system to provide an enhanced editor and developer experience
  • Model an enhanced search experience with no dedicated server through serverless functions and 11ty Serverless
  • Boost productivity by creating custom 11ty tools and plugins

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : May 05, 2023
Length: 198 pages
Edition : 1st
Language : English
ISBN-13 : 9781804618622
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : May 05, 2023
Length: 198 pages
Edition : 1st
Language : English
ISBN-13 : 9781804618622
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total NZ$ 168.97
Building Microservices with Node.js
NZ$54.99
Exploratory Data Analysis with Python Cookbook
NZ$73.99
Eleventy By Example
NZ$39.99
Total NZ$ 168.97 Stars icon

Table of Contents

12 Chapters
Chapter 1: Setting Up Your Website Chevron down icon Chevron up icon
Chapter 2: Adding Data to Your 11ty Website Chevron down icon Chevron up icon
Chapter 3: Deploying to a Static Site Host Chevron down icon Chevron up icon
Chapter 4: Building a Blog with Collections Chevron down icon Chevron up icon
Chapter 5: Creating Custom Shortcodes to Add Mixed Media to Markdown Chevron down icon Chevron up icon
Chapter 6: Building a Photography Site with the 11ty Image Plugin Chevron down icon Chevron up icon
Chapter 7: Building a Podcast Website with 11ty Plugins and Custom Outputs Chevron down icon Chevron up icon
Chapter 8: Creating a Static-Site Search with 11ty Serverless and Algolia Chevron down icon Chevron up icon
Chapter 9: Integrating 11ty with a Headless CMS Chevron down icon Chevron up icon
Chapter 10: Creating Custom 11ty Plugins Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5
(10 Ratings)
5 star 50%
4 star 50%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




S. Wilkinson May 16, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
A great book to learn Eleventy and I've been a web developer for over 25 years. Recommended!
Amazon Verified review Amazon
Keith Carangelo Jun 27, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is a great way to learn how to use Eleventy. The example projects make it extremely easy to experiment and learn things on your own. Robinson does a terrific job of explaining all of the material concisely, giving the reader the flexibility of delving deeper into the features most relevant to their particular needs. I couldn't have asked for more: thank you for this terrific book!
Amazon Verified review Amazon
ray@camdenfamily.com May 18, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I'd like to think I know Eleventy pretty well. I've written about it here a few times, this site is built on Eleventy, I've presented on it, but I certainly don't think I know everything about it. That being said, when I got my copy of "Eleventy by Example" by Bryan Robinson, my expectation was that I'd be reading it to get his take on teaching Eleventy but not really learning terribly much. I was wrong.One of the strengths of Eleventy is how flexible it is. There's no "One Way" of Eleventy, but rather you're given the flexibility to approach projects in ways that make sense for your (or your team's) skills and strengths. This is why I fell in love with it in the first place. If Eleventy didn't support something out of the box, I had no concern I'd be able to add my customization with no trouble.Going into his book, however, I was surprised, again and again, at his approach to solving common tasks in Eleventy. In nearly every chapter, I saw a new (to me) way of working with Eleventy. Not only did I learn more, but I actually found myself liking Eleventy even more.The book does a great job of using multiple different types of projects as a way of teaching various parts of Eleventy. In some ways, it combines one of my favorite types of technical books (cookbooks that assume you know the basics already) with a general introduction.I would absolutely recommend the book, even if you've already started with Eleventy, as both a way to flesh out your understanding as well as a way to get inspiration for future work.
Amazon Verified review Amazon
Jessica Quick May 15, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I've always been interested in Eleventy, but I never felt like I had a great resource to walk me through it until now!The author, Bryan, does an incredible job of detailing and introducing topics progressively in a way that just make sense. Moving from a basic blog to incorporating useful features like tagging, pagination, dynamic routes, shortcuts, RSS feeds, and more is pretty impressive.The examples are spot on and taught in a very clear way. I love it. Thank you so much!
Amazon Verified review Amazon
Himanshu Goyal May 13, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I highly recommend this book !! This book is for anyone looking to build efficient websites while shipping less JavaScript to the client. Strong knowledge of HTML and CSS and beginner-level knowledge of JavaScript and the Node.js ecosystem, including querying APIs is a must.you'll be well-equipped to leverage the capabilities of 11ty by implementing best practices and reusable techniques that can be applied across multiple projects, reducing the website launch time.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.