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.
Top comments (2)
What about 11ty build / deploy benchmark compared to Hugo?
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