dprn-remix

Eleventy (11ty) is a simpler static site generator that's gained popularity for its flexibility and ease of use. In this post, I'll share some tips for building great static sites with Eleventy.

Eleventy supports many template languages out of the box:

• Markdown
• Nunjucks
• Liquid
• Handlebars
• Mustache
• EJS
• Haml
• Pug

Collections are a powerful way to group related content:

// In .eleventy.js
eleventyConfig.addCollection("posts", function(collectionApi) {
  return collectionApi.getFilteredByGlob("src/posts/*.md");
});

Custom filters help transform data:

eleventyConfig.addFilter("readableDate", dateObj => {
  return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy");
});

1. Organize your content - Use clear folder structures
2. Use data files - Store site-wide data in _data/
3. Create reusable includes - Build modular templates
4. Optimize images - Use appropriate formats and sizes
5. Test locally - Always test before deploying

• Minimize CSS and JavaScript
• Optimize images
• Use semantic HTML
• Implement proper caching headers
• Consider a CDN for static assets

Eleventy makes it easy to build fast, maintainable static sites. Give it a try for your next project!