4. Making it your own

09 Mar, 2024

This is your project now! Stake your claim: Update _data/meta.js with your info. Explore the project and change whatever you want.

Adding new posts

New blog posts are pretty straightforward: Make a new template file in your posts folder and start writing.

Thanks to those data files we went over earlier, you shouldn't need to add any front matter most of the time. You still can, though - and there are times you'll need to, like if you want to use a title that has a hyphen in it.

Oh - I haven't gone over dates! Eleventy actually assigns these all on its own; I didn't do any work to set that up. By default, it looks for a date (in YYYY-MM-DD format) in the template's filename/path - if it can't find one, it uses the file creation date instead.

Adding new pages

Create a new template file outside of your posts folder.

These require a bit more work than blog posts: They don't automatically get a layout, so you'll want the line layout: base.njk in their front matter. (Unlike post.njk, this layout doesn't automatically include an <h1> element, so you'll want one of those, too.) And you'll probably want to update _includes/header.njk to link to it.

Styling

Eleventy-Zones is CSS-compatible with Zonelets themes! (The included one is "Weatherbeaten" from Zonelets creator Marina Kittaka's theme pack.)

Next steps

Tweak things to your liking and host it for others to see! (If you're deploying to a subdirectory, like how this demo site is in the 11ty-zones-demo subdirectory, make sure to update the pathPrefix in .eleventy.js.)

This starter only scratches the surface of what you can do - have a look around and see what sounds interesting and/or useful for your site. (Image optimization? Pagination? Internationalization?)

Ready to learn more Eleventy? Besides the official documentation, some great places to start are 11ty Rocks! and 11ty.Recipes. I also really like the 11ty Bundle - there's a weekly roundup of new posts from across the community, but the best part is that those posts get added to an ever-growing index, neatly categorized for when you want to dive deep into a topic.