Once you have a basic Eleventy blog up and running, you'll want to customize it to match your style and needs. This post covers some common customization techniques.

Working with Layouts

Layouts in Eleventy allow you to define the common structure of your pages. They're typically stored in the _includes directory.

A basic layout might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customizing Your Eleventy Blog</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
      <a href="/about/">About</a>
    </nav>
  </header>
  
  <main>
    
  </main>
  
  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>
</html>

Using Data Files

Data files allow you to store site-wide information that can be accessed from any template. They're stored in the _data directory.

For example, you might create a site.json file:

{
  "title": "My Awesome Blog",
  "description": "A blog about web development and other cool stuff",
  "author": "Your Name"
}

Then you can access this data in your templates:

<title>Chandler Weiner</title>
<meta name="description" content="Scientist, Techie, Tea Lover, and Traveler">

Custom Filters

Eleventy allows you to create custom filters to transform data in your templates. For example, you might want to format dates in a specific way:

eleventyConfig.addFilter("readableDate", dateObj => {
  return new Date(dateObj).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
});

Then in your templates:

<time>Invalid Date</time>

Collections

Collections in Eleventy allow you to group content together. The most common use is for blog posts.

You can create a collection by tagging your content:

---
tags: posts
---

Then you can access all posts with:


  <h2><a href="/2018-12-17-first-post/">Hello World</a></h2>

  <h2><a href="/2019-09-18-hacktoberfest-2019/">Hacktoberfest 2019</a></h2>

  <h2><a href="/2019-09-25-goals-for-hacktoberfest-2019/">Goals for Hacktoberfest 2019</a></h2>

  <h2><a href="/2019-10-22-wordpress-orlando-october-meetup/">WordPress Orlando October Meetup</a></h2>

  <h2><a href="/2020-04-30-wp-coffee-talk/">WP Coffee Talk</a></h2>

  <h2><a href="/2025-04-11-eleventy-plugins/">Enhancing Your Eleventy Blog with Plugins</a></h2>

  <h2><a href="/posts/first-post/">Getting Started with Eleventy</a></h2>

  <h2><a href="/posts/second-post/">Customizing Your Eleventy Blog</a></h2>

Conclusion

Eleventy provides many ways to customize your blog. By using layouts, data files, custom filters, and collections, you can create a unique and personalized blog that meets your specific needs.