DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create an Eleventy (11ty) theme based on a free HTML template
Bryan Robinson
Bryan Robinson

Posted on • Updated on • Originally published at bryanlrobinson.com

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

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.

Introduction

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.

Contact form and Netlify Deploy

In this tutorial, we'll flesh out the contact page, including making a variable for our map and setting up form submissions to Netlify. We'll connect up to GitHub and have Netlify automatically deploy our 11ty site every time we push to master.

Coming Soon: NetlifyCMS tutorials

Top comments (2)

Collapse
 
bayuangora profile image
Bayu Angora

What about 11ty build / deploy benchmark compared to Hugo?

Collapse
 
brob profile image
Bryan Robinson Author

Not sure about comparisons, but 11ty has a benchmark repository here: github.com/11ty/eleventy-benchmark

Anecdotally, my main blog builds significantly faster on 11ty than Jekyll but I don’t have much experience with Hugo to know about this. I know Hugo is often considered one of the fastest SSGs

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.