🎉 Want a Design or Code Review? Sign up for a free video review at PeerReviews.dev »

Create an Eleventy (11ty) theme based on a free HTML template

By Bryan Robinson

In this video series, we’ll take a look at what it takes to start with a free HTML template found on Google and convert it for use with a static site generator (SSG). We’ll be using my personal favorite SSG 11ty.

For many people working in agencies or doing freelance, it’s hard to make a transition from WordPress to something static. Themes are incredibly handy when using WordPress. You can still have the conveniences of templates and themes with a static site generator.

Many SSGs have themes available free or for low costs, but it’s not too hard to convert any HTML theme into a theme on a SSG.


Tutorial 1: Project structure and initial templates

In this video, we’ll tackle picking our theme and basic 11ty setup and configuration. After we move our assets and static HTML into our project, we install Eleventy via npm install @11ty/eleventy and create a .eleventy.js configuration file with some simple modifications.

Tutorial 2: Creating a base template

In this video, we’ll tackle creating the base template from which all our other templates will inherit.

This template will contain our header and footer, as well as our page banners.

We set up the template and then use front matter to use the layout on each of our HTML pages.

Tutorial 3: Creating a reusable simple content template

In this video, we explore extending our base template to allow for a reusable simple content template that we’ll use for our “About” page.

Tutorial 4: Eleventy Collections for Services and Testimonials (where the fun begins)

This video is where the fun begins! We start converting our data over from static HTML to be more dynamic by creating 11ty Collections.

These collections allow us to create a file per service and testimonial and then loop through those in our templates to create the design from our HTML.

Tutorial 5: Creating a Custom Homepage with front matter and collections

In this tutorial, we’ll tackle converting our homepage into a custom template. We’ll use front-matter for the one-off data on the homepage. For Services and Testimonials, we’ll pull data directly from the collections we created in the previous video. For a new Brands section, we’ll create another collection and pull those in as well.

Coming Soon: Contact Form, Deployment and NetlifyCMS tutorials

You May Also Enjoy

Creating an 11ty Plugin - SVG Embed Tool

In the sites I’ve built with Eleventy (11ty) recently, I’ve found myself reusing a couple filters. This has involved me copying and pasting the code a lot. The solution? Create an 11ty Plugin.

Now offering design and code reviews at PeerReviews.dev

For the past few months, I’ve talked with a lot of different people about how best to serve up-and-coming designers and developers. I want to be a resource for people learning to code and learning about design. So, when my friend James Q. Quick released his first code review on YouTube, I knew I needed to follow along.

Routing contact-form emails to different addresses with Netlify, Zapier and SendGrid

When your client wants dynamic form processing, and your site is "static," what are you going to do? In this article, we'll explore two methods to do dynamic form routing based on a user's answer to a form field.

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo