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