Show notes
As WordPress user we know how to build dynamic sites. We know next to nothing about Static Site Generators and the Jamstack. Here we rebuild a HTML site with 11ty (Eleventy). We also look at adding a CMS.
Things we cover
- What we need to run 11ty (Node, Git and free hosting).
- Starting 11ty from scratch (installing 11ty).
- Creating our first page. Converting Markdown to HTML.
- Creating a header and footer template for our site.
- Introducing Front Matter (like WordPress custom fields).
- Adding CSS and bundling with a Nunjucks template.
- Bringing in other website assets with the Eleventy config file.
- Making the site's head dynamic for SEO (doing the job of a WordPress SEO plugin).
- Making HTML more manageable with partials.
- Adjusting CSS classes with Front Matter.
- Introducing data (like WordPress's database), but with a dynamic menu.
- Adding events. Similar to working with WordPress's post loop.
- Adding a CMS (Decap and locally the Front Matter CMS extension).
Resources
- 11ty YouTube.
- 11ty Bundle. A fabulous place for all the latest by Bob Monsour.
These are years out of date, but with the help of 11ty docs and Claude AI I could covert to 11ty V3:
-
Learn Eleventy From Scratch. Andy Bell.
-
Turn static HTML/CSS into a blog with CMS using the JAMStack. Kevin Powell.