Eleventy by example create powerful, performant websites with a static-first strategy
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 de...
| Main Author: | |
|---|---|
| Format: | eBook |
| Language: | English |
| Published: |
Birmingham
Packt Publishing, Limited
2023
|
| Edition: | 1st edition |
| Subjects: | |
| Online Access: | |
| Collection: | O'Reilly - Collection details see MPG.ReNa |
Table of Contents:
- 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
- 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
- Chapter 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
- Cover
- Copyright
- Contributors
- Table of Contents
- Preface
- Chapter 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
- Chapter 2: Adding Data to Your 11ty Website
- 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
- Chapter 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
- Moving the About page to its own directory
- Adding global data
- Adding dynamic global data
- Summary
- Chapter 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
- Chapter 4: Building a Blog with Collections
- Technical requirements
- What is a collection?