😱 Book Release: Eleventy by Example – Learn 11ty with 5 in-depth projects
Oh hi, everyone! Listen, I've got some really exciting news. I'm honestly kind of shocked. I wrote a book. For a publisher. That comes out tomorrow.
Amazing right?
Well, listen, it's a book that talks about my absolute favorite development topic: 11ty.
Let's not go any farther without a link to buy... that seems appropriate, right? It's available in paperback and eBook.
What's covered?
Well... a lot. We build five distinct projects to cover all the basics, intermediate, and some advanced topics. Let's do a quick rundown of projects and skills.
Project 1: Basic Marketing website
The first project is super basic. We take some simple HTML and we build out a website with 11ty. To do this, we tackle a few topics:
- Basic project setup
- Running with no configuration
- Best practice directory structure and configuration
- Page templates, layouts, and includes
- The data cascade and data in templates
- Global data, template data, JavaScript data, you name it, we got it
- Deployment to Netlify and CloudFlare
Not bad for a simple marketing site tutorial!
Project 2: Simple blog
Who doesn't need a blog example, am I right? In this project, we create a blog with 11ty including dealing with dreaded off-by-one date issues. The solution I wrote for the book is now one of the recommended solutions in 11ty's docs. We also make our blogs more interesting with custom media types.
Skills learned:
- Collections
- Custom page templates
- Pagination (powerful, but confusing to new devs)
- Custom shortcodes (embed YouTube, CodePen, and blockquotes)
Project 3: Photography site
We use what we learned in the blog project and create a custom photography site to play with the Image plugin. Honestly, this was the project that took me the most work. The Image plugin is great, but I'd never used it, and dealing with responsive images in the browser takes some getting used to.
Skills learned:
- Installing and configuring a plugin
- Using the 11ty Image plugin
- Responsive images
- Custom data based on the file system (another really clever code snippet that I'm quite proud of to get a list of images as data for each post)
Project 4: Podcast website
While not everyone has a podcast, most people know about podcasts. In this project, we tackle some of the interesting requirements for dealing with podcasts. We then use this project as a base to talk about integrating with 3rd parties: Hygraph (headless CMS) and Algolia (Search).
Skills learned:
- Custom filters
- Custom file types (exporting JSON and RSS instead of HTML)
- Using plugins
- 11ty Serverless for search and indexing
- JavaScript data files to fetch data from a headless CMS
Project 5: A custom plugin
Finally, we use everything we've learned to put together a custom plugin to have all our shortcodes, filters and more readily available for any new project.
Skills Learned:
- Plugin setup
- Plugin testing
Ready to learn?
I'm really proud of the book and everything it teaches. If you're interested in picking up 11ty, I think it's a great resource.