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

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.

透過使用 CDN 並創建自定義工具和工作流程，以及 5 個真實世界的項目，加快構建靜態網站的速度。

購買印刷版或 Kindle 版本的書籍將包含一本免費的 PDF 電子書。

主要特點：

- 學習如何使用和擴展 11ty，這是業界最靈活的靜態網站生成器之一。
- 通過自定義 11ty 以滿足各種項目需求，優化您的體驗。
- 使用 11ty Serverless 在不重新創建模板的情況下創建請求時間體驗。

書籍描述：

11ty 是 Jamstack 領域的黑馬，提供了無與倫比的靈活性和性能，使其在其他靜態網站生成器（如 Jekyll 和 Hugo）中具有優勢。開發人員可以利用完整的 Node 生態系統，創建快速靜態優先的網站，可以從內容交付網絡或簡單的服務器部署。本書將教您如何快速設置、自定義和充分利用 11ty。

《Eleventy by Example》將幫助您在深入研究更複雜的網站和擴展 11ty 的基本功能之前，揭示創建第一個 11ty 網站所需的一切，包括自定義短代碼、插件和內容類型。通過 5 個互動項目，您將學習如何構建基本網站、博客、媒體站和靜態站，這些站點將對用戶輸入做出響應，而無需服務器。通過這些項目，您將學習基本的 11ty 技能，如模板、集合和數據使用，以及高級技能，如插件創建、圖像處理、與無頭 CMS 一起工作以及使用強大的 11ty Serverless 插件。

通過閱讀本書，您將能夠利用 11ty 的能力，實施最佳實踐和可重用技術，從而減少網站上線時間。

您將學到什麼：

- 使用可重用模板和全局可用數據創建基本網站。
- 使用 11ty 的集合構建博客。
- 設置一個攝影網站，使用 11ty Image 插件部署適當大小的圖像。
- 連接內容管理系統，提供增強的編輯器和開發人員體驗。
- 通過無需專用服務器的無服務器功能和 11ty Serverless 模擬增強的搜索體驗。
- 通過創建自定義的 11ty 工具和插件提高生產力。

本書適合對於在向客戶端發送較少的 JavaScript 的同時構建高效網站感興趣的任何人。必須具備 HTML 和 CSS 的扎實知識，以及初級水平的 JavaScript 和 Node.js 生態系統知識，包括查詢 API。

1. Setting up Your Website
2. Adding Data to Your 11ty Website
3. Deploying to a Static Site Host
4. Building a Blog with Collections
5. Creating Custom Shortcodes to Add Mixed Media to Markdown
6. Building a Photography Site with the 11ty Image Plugin
7. Building a Podcast Website with 11ty Plugins and Custom Outputs
8. Creating a Static-Site Search with 11ty Serverless and Algolia
9. Integrating 11ty with a Headless CMS
10. Creating Custom 11ty Plugins

1. 設置您的網站
2. 將數據添加到您的11ty網站
3. 部署到靜態網站主機
4. 使用集合構建博客
5. 創建自定義短碼以在Markdown中添加混合媒體
6. 使用11ty圖像插件構建攝影網站
7. 使用11ty插件和自定義輸出構建播客網站
8. 使用11ty Serverless和Algolia創建靜態網站搜索
9. 將11ty與無頭CMS集成
10. 創建自定義的11ty插件