Eleventy by Example E-Book

Bryan Robinson

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 217

Veröffentlichungsjahr: 2023

Beschreibung

Build faster static sites by leveraging CDN and creating custom tools and workflows with 5 real-world projects

Purchase of the print or Kindle book includes a free PDF eBook

Key Features

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

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

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

Who this book is 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.

Leseprobe

Eleventy by Example

Create powerful, performant websites with a static-first strategy

Bryan Robinson

BIRMINGHAM—MUMBAI

Eleventy by Example

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Bhavya Rao

Senior Content Development Editor: Feza Shaikh

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Project Coordinator: Aishwarya Mohan

Proofreader: Safis Editing

Indexer: Hemangini Bari

Production Designer: Alishon Mendonca

Marketing Coordinator: Anamika Singh, Namita Velgekar, Nivedita Pandey

First published: May 2023

Production reference: 1060423

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80461-049-7

www.packtpub.com

To my wife, Emily, this book would not exist without your support, patience, love, and belief in me. To my son, Lincoln, you change my perspective each day; thank you for being you.

– Bryan Robinson

Contributors

About the author

Bryan Robinson is a developer and designer with over 15 years of experience building and leading teams on the web. He enjoys well-written HTML, clean CSS, and just the right amount of JavaScript.

I want to thank the whole of the 11ty community. The folks that work on and around 11ty are some of the nicest, most supportive developers on the internet. I’ve always enjoyed 11ty but watching the creative applications of those in the community keeps my passion fresh.

It also may go without saying, but none of this would be possible without Zach Leatherman, the creator of 11ty. When I learned about this little framework, it was like learning that Zach had read my mind and created something specifically to help me author websites in the exact way I’d always wanted to. To this day, I’ve yet to find a framework, language, or system that I enjoy using more.

About the reviewers

Ed Henderson has over 25 years of experience in full stack web design and development. He has witnessed the evolution of web technologies, from the early days of HTML and CSS to the latest cutting-edge frameworks and tools.

Throughout his career, Ed has had the opportunity to work on many projects in the UK, Europe, USA, and Asia, collaborating with diverse teams and clients from different backgrounds and cultures.

Ed now lives in East Lothian, just outside Edinburgh, with the rest of team Hendo: his amazing wife, Rose, and awesome sidekicks, Jack, Toby, and Noah.

Saad Koubeissi is a senior frontend software engineer from London, United Kingdom. With over a decade of industry experience, he is currently working as an engineering manager. Saad combines his love for accessibility and UX while adhering to web standards to build performance-driven websites and applications. Eleventy (11ty), React, and Next.js are among his favorite tools. As an avid supporter of mentoring, Saad has volunteered for various programs and organizations, such as The Duke of Edinburgh’s Award, coaching young learners through Harvard’s prominent computer science (CS50) course. Beyond working as an engineer and mentoring, Saad is the co-founder and co-host of the “Life in Tech with Jay and Saad” podcast.

Table of Contents

Preface

1

Setting Up Your Website

Technical requirements

What are static site generators and why are they important?

What is 11ty?

Running 11ty with no configuration

Installing 11ty

Running 11ty

Configuring 11ty

Understanding the difference between a page, template, and layout

Creating the base layout file

What’s this {{ }} doing in my HTML?

What happened to the head and footer?

Creating reusable includes

Summary

Further reading

2

Adding Data to Your 11ty Website

Technical requirements

Understanding the 11ty Data Cascade

Computed data

Page frontmatter

Template data files

Directory data files

Layout frontmatter

Configuration API global data

Global data files

Adding data for each page

Adding variable data to the home page

Writing conditionals to display no markup if data doesn’t exist

Adding About page data and content

Adding an array to the frontmatter and looping through it in a page

Adding data to external files

Creating a template data file for the home page triptych

Moving the About page to its own directory

Adding global data

Adding dynamic global data

Summary

3

Deploying to a Static Site Host

Technical requirements for hosting 11ty websites

How will the host build files?

How are the files served?

What other services does the host provide?

Deploying 11ty manually

Deploying to a static site host

Setting up a GitHub repository

Deploying 11ty to Netlify

Deploying to Cloudflare Pages

Summary

4

Building a Blog with Collections

Technical requirements

What is a collection?

Creating a collection with directory data and Markdown

Creating directory data for use in each post

Creating a custom template for blog posts

Adding content dates to blog posts

Displaying the next or previous blog post

Creating a paginated list of blog posts

Paginating the list page

Creating dynamic category pages

Summary

5

Creating Custom Shortcodes to Add Mixed Media to Markdown

Technical requirements

What is a shortcode?

Creating a YouTube embed

Getting the correct markup for a YouTube embed

Setting up the shortcode

Creating a custom blockquote with semantic HTML

Creating the proper semantic HTML for a block quote

Setting up the shortcode

Creating a CodePen embed

Getting the proper markup from CodePen

Building the shortcode

Summary

6

Building a Photography Site with the 11ty Image Plugin

Technical requirements

Setting up the basic project with collections

Writing a data file to automatically create an image array for each post

Installing and configuring the Image plugin

Creating specialized layouts for different gallery

Creating a side-scrolling gallery

Creating a pop-up gallery

Summary

7

Building a Podcast Website with 11ty Plugins and Custom Outputs

Technical requirements

Understanding the special requirements for a podcast site

What is an 11ty plugin?

Finding 11ty plugins

Using the RSS plugin

Installing the plugin

Setting up a feed page

Using the Podcast Tools plugin

Summary

8

Creating a Static-Site Search with 11ty Serverless and Algolia

Technical requirements

Creating a search index from 11ty content

What is Algolia?

Creating the search JSON file

Creating jsonify and htmlStrip filters

Setting up Algolia

Sending records to Algolia

Setting up 11ty to run in a serverless function

Configuring 11ty Serverless

Creating the search results page

Querying Algolia at request time on the search page

Summary

9

Integrating 11ty with a Headless CMS

Technical requirements

Why use a headless CMS with 11ty?

What is a headless CMS?

What is Hygraph?

Creating proper data in Hygraph

Content modeling in the Schema area

Adding content to Hygraph

Querying the API in the API playground

Setting up Hygraph API access

Querying and formatting the data for 11ty

Converting existing pages to use CMS data

Creating a pagination template to create individual 11ty pages

Setting up a publication flow with webhooks

Summary

10

Creating Custom 11ty Plugins

Technical requirements

What can an 11ty plugin do?

Creating a basic plugin

Basic setup

Creating shortcodes and testing

Testing the plugin in a real project

Creating a configurable data source plugin for Hygraph data

Setting up the plugin to accept options

Testing the configuration

Creating an Algolia helper plugin that can read from a project’s files

Publishing your plugin

Summary

Index

Other Books You May Enjoy

Preface

Eleventy (11ty) is the dark horse of the Jamstack world. In the tradition of static site generators (SSGs) such as Jekyll and Hugo, 11ty takes steps to bring the entirety of the Node.js ecosystem to help developers build highly performant, static-first websites that can be served blazingly quickly from a content delivery network (or simple server).

Eleventy by Example covers everything you need to create your first 11ty website, then dives into making more complex sites and extending 11ty’s base functionality with custom shortcodes, plugins, and content types. Over the course of five interactive projects, you’ll learn how to build basic websites, blogs, media sites, and static sites that still respond to user input without needing a server. With this, you’ll learn about basic 11ty concepts such as templates, collections, and data use, and advanced skills such as plugin creation, image manipulation, working with a headless CMS, and using the powerful 11ty Serverless plugin.

By the end of the book, you’ll be ready to take advantage of all the power 11ty offers to build almost any web project, with best practices that can be taken from project to project, reducing the time it takes to get a site launched.

Who this book is for

This book is for anyone who is looking for ways to ship less JavaScript to the client to create more performant sites while still providing a strong developer experience. You should have a strong knowledge of HTML and CSS and at least beginner knowledge of JavaScript and the Node.js ecosystem, including querying APIs.

What this book covers

Chapter 1, Setting Up Your Website, what is 11ty? This chapter dives into the world of SSGs to explore why 11ty exists and gets you started on your path to creating static-first websites with simple templates and configuration.

Chapter 2, Adding Data to Your Website, in this chapter, we take the project created in Chapter 1 and extend it by employing multiple techniques to import data into our HTML. We will learn all about the 11ty Data Cascade and how to add static and dynamic data.

Chapter 3, Deploying to a Static Site Host, a site isn’t a website until it’s been deployed to a server. In this chapter, we’ll take a look at the requirements for getting your 11ty website deployed to a static site host.

Chapter 4, Building a Blog with Collections, now that you’ve deployed your first 11ty website, let’s create a new project. In this chapter, we’ll dive into the world of 11ty collections to create a basic blog with custom templates, pagination, and dynamic category pages.

Chapter 5, Creating Custom Shortcodes to Add Mixed Media to Markdown, a blog isn’t just text. Sometimes you want more interactive elements. In this chapter, we’ll extend the basic functionality of 11ty to add custom shortcodes to import YouTube videos, CodePen displays, and custom blockquotes with semantic HTML.

Chapter 6, Building a Photography Site with the 11ty Image Plugin, images can provide an amazing amount of interest to your website. In this chapter, we dive into the 11ty Image plugin to discover how our static site can have optimized images for both a user’s browser and for our image’s use case.

Chapter 7, Building a Podcast Website with 11ty Plugins and Custom Outputs, not everything a website needs is HTML. In this chapter, we’ll take a look at the unique needs for a podcast website and output both an HTML website and a standards-compliant podcast RSS feed to launch your very own podcast.

Chapter 8, Creating a Static-Site Search with 11ty Serverless and Algolia, when you reach a certain level of content, search is an inevitability. Without a server, creating a search functionality is often relegated to frontend code. With 11ty Serverless, we can have solid, progressively enhanced search experiences without needing to create a split in our code base.

Chapter 9, Integrating 11ty with a Headless CMS, markdown is great for many content use cases, but sometimes you just need a content management system (CMS). In this chapter, we see how 11ty can work with the headless CMS Hygraph to provide a great editor experience alongside a great developer experience.

Chapter 10, Creating Custom 11ty Plugins, throughout this book, we’ve customized 11ty in many ways. Needing to do that customization between projects can require a lot of copying and pasting. In this chapter, we’ll optimize our flow by creating three custom 11ty plugins that give us great power for each of our projects.

To get the most out of this book

This book assumes a passing familiarity with beginner knowledge of Node.js, HTML, and CSS.

Software/hardware covered in the book

Operating system requirements

11ty 2.0

Windows, macOS, or Linux

Node.js 18

Windows, macOS, or Linux

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Eleventy-by-Example. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/ERy5P.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “This HTML is now on every page using the base.html layout.”

A block of code is set as follows:

{% if title or bannerContent %}   <section class="banner">     {% if title %}<h1>{{ title }}</h1>{% endif %}     {% if bannerContent %}<p>{{ bannerContent }}</p>{% endif %}   </section> {% endif %}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

    return {         dir: {             input: "src",             output: "_site", // This is the default, but it's included here for clarity.             includes: "_templates"         }     }

Any command-line input or output is written as follows:

npm install @11ty/eleventy@v2

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “For this demo, we’ll use Rich Text to get additional options in our API.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read 11ty By Example, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781804610497

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly