Alex Libby - Beginning Eleventy: A Practical Introduction to the Eleventy Static Site Generator

Beginning EleventyA Practical Introductionto the Eleventy Static SiteGeneratorAlex LibbyBeginning Eleventy: A Practical Introduction to the Eleventy Static SiteGenerator Alex Libby Belper, Derbyshire, UK ISBN-13 (pbk): 978-1-4842-8314-1 ISBN-13 (electronic): 978-1-4842-8315-8 https://doi.org/10.1007/978-1-4842-8315-8 Copyright 2022 by Alex Libby This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made.

The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: James Robinson-Prior Development Editor: James Markham Coordinating Editor: Jessica Vakili Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, Suite 4600, New York, NY 10004-1562, USA. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com.

Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at www.apress.com/. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper This is dedicated to my family, with thanks for theirlove and support while writing this book.Table of Contents About the Author xi About the Technical Reviewer xiii Acknowledgments xv Introduction xvii Chapter 1: Introducing Eleventy 1 What Makes Eleventy So Appealling? 2 Introducing Our Project 3 Implementing a Development Environment 4 Implementing Our First Example 6 Breaking Apart the Code 10 Understanding Eleventy Concepts 10 Layouts and Templates 11 Using Filters and Shortcodes 12 Collections 14 Custom Data 15 Pagination 16 The Eleventy Configuration File 17 Performing Some Additional Changes 18 Summary21 v Table of ConTenTs Chapter 2: Creating Structure 23 Exploring the Site Structure 23 Creating Pages and Blog Posts 25 Breaking Apart the Code 29 Adding Pagination 31 Setting Up Paginating for the Post Index 32 Adding Pagination Links to Posts 36 Implementing a Site Navigation 41 Understanding the Code Changes 44 Configuring Links Using Permalinks 46 Summary49 Chapter 3: Sourcing Data 51 Implement Sourcing from Markdown Files 51 Why Is Data Crucial in Eleventy? 54 Understanding the Process for Consuming Data 55 Exploring the Options Available 57 Adding Site Metadata 58 Exploring the Code Changes 61 What About Other Data? 62 Fetching from an External Source63 Exploring the Changes 65 Sourcing from a Third-Party CMS 66 Setting Up the Data 67 Retrieving Data from DatoCMS 74 Caching Data 81 Summary84 vi Table of ConTenTs Chapter 4: Creating Templates 85 Understanding How Templates Work in Eleventy 85 Creating Layouts for Our Site 87 Building the Base Template87 Breaking Apart the Code 90 Choosing the Right Tools 92 Updating Content Pages 95 Understanding the Code Changes 97 Updating the Post Layout 98 Breaking Apart the Changes 101 Updating the Rest of the Site 103 Setting Up a Site Map 103 Adding RSS Feeds 108 Handling Invalid URLs 115 Summary119 Chapter 5: Configuring Options 121 Exploring What Is Available 121 Creating Shortcodes 123 Breaking Apart the Code 126 Tagging Content 128 Exploring the Code Changes 134 Counting Pages 135 Exploring the Code in Detail 137 Responding to Events 138 Understanding What Happened 141 Watching the Changes 142 Understanding What Happened 146 A Small Thought 147 vii Table of ConTenTs Overriding BrowserSync 147 Launching a Script Automatically 149 Breaking Apart the Code 151 Summary152 Chapter 6: Styling the Site and Content 155 Making Improvements 155 Adding Images 157 Understanding What Happened 160 Adding Support for Styles 161 Exploring What Happened 163 Styling the Site 164 Sourcing from a CSS Library 168 Breaking Apart the Code 170 Using a CSS Preprocessor 172 Dissecting the Code 177 Automating the Process 179 Exploring the Changes 185 Summary186 Chapter 7: Creating Plugins 189 Why Use a Plugin? 189 Understanding the Architecture 190 Putting Some Examples to Use 192 Lazy-Loading Images 192 Adding Reading Time 196 Creating a Simple Plugin 199 Understanding What Happened 201 Testing the Plugin Locally 202 viii Table of ConTenTs Understanding the Code Changes 205 Publishing to a GitHub Site 206 Publishing to npm 209 Understanding What Happened 212 Summary214 Chapter 8: Internationalizing the Site 217 Setting the Background 218 Exploring Options 219 Some Housekeeping 221 Creating a Strategy 224 Setting the Locale 226 Understanding the Changes Made 231 Localizing Dates 232 Understanding What Happened 235 Localizing Layouts 236 Exploring the Changes 244 Localizing the Header 245 Breaking Apart the Changes 248 Summary249 Chapter 9: Localizing the Content251 Localizing Blog Content 252 Breaking Apart the Code Changes 255 Updating Post Tagging 256 Updating the English Version 256 Dealing with French Content 261 Separating Content into Localized Collections 265 Updating the Index Page 270 ix Table of ConTenTs Understanding the Changes Made 275 Adding a Language Switcher 276 Summary279 Chapter 10: Polishing the Site 281 Exploring Options 281 Tidying Up the Code 284 Examining the Code Changes 288 Adding Extra Features 289 Reviewing the Code Changes 293 Testing the Site with Cypress 295 Understanding the Changes 298 Assessing Performance 299 Breaking Apart the Code 304 Looking to the Future 305 Summary308 Chapter 11: Deployment and Publishing 311 Understanding the Deployment Process 311 Laying the Foundations 313 Setting Up a GitHub Pages Account 313 Deploying the Site to GitHub 317 Understanding the Changes Made 320 Tidying Up the Release 322 Understanding What Happened 325 Adding a Domain Name 326 Breaking Apart the Code Changes 331 Summary331 Index 333 x About the AuthorAlex Libby is a front-end engineer and seasoned computer book author who hails from England.

His passion for all things open source dates back to the days of his degree studies, where he first came across web development and has been hooked ever since. His daily work involves extensive use of React, NodeJS, JavaScript, HTML, and CSS. Alex enjoys tinkering with different open source libraries to see how they work. He has spent a stint maintaining the jQuery Tools library and enjoys writing about open source technologies, principally for front-end UI development. xi